Skip to content

Instantly share code, notes, and snippets.

@brentvatne
Created July 9, 2015 22:42
Show Gist options
  • Save brentvatne/a267d10eabd2d91a8d44 to your computer and use it in GitHub Desktop.
Save brentvatne/a267d10eabd2d91a8d44 to your computer and use it in GitHub Desktop.
'use strict';
import React, { AppRegistry, StyleSheet, Text, View, Component, NativeModules } from 'react-native';
const UIManager = NativeModules.UIManager;
class AutoText extends Component {
constructor(props) {
super(props);
this.state = {
size: 0.5,
}
}
tryNewSize() {
requestAnimationFrame(() => {
UIManager.measureLayoutRelativeToParent(
React.findNodeHandle(this._text),
() => { React.AlertIOS.alert('ERROR!') },
(x, y, w, h) => { this.isSizeOk(w, h) },
);
});
}
isSizeOk(w, h) {
if (h > this.props.height) {
if (this.state.size == 0.5) {
this.setState({complete: true});
} else {
this.setState({size: this.state.size -= 0.5, complete: true});
requestAnimationFrame(() => {
this.tryNewSize();
});
}
} else {
if (!this.state.complete) {
this.setState({size: this.state.size += 0.5});
requestAnimationFrame(() => {
this.tryNewSize();
});
}
}
}
_onLayout() {
// console.log(arguments);
}
componentDidMount() {
// Convert this to async/await function so I can process synchronously in loop
this.tryNewSize();
}
render() {
return (
<Text ref={component => this._text = component}
onLayout={this._onLayout}
style={{backgroundColor: 'transparent', fontSize: this.state.size, color: this.state.complete ? 'black': 'transparent'}}>
{this.props.children}
</Text>
)
}
}
class AutoresizeTextExample extends Component {
render() {
return (
<View style={styles.container}>
<View style={{width: 400, height: 300, borderWidth: 1, borderColor: 'red', overflow: 'hidden'}}>
<AutoText width={400} height={300}>
Carles umami Echo Park, drinking vinegar disrupt four dollar toast
vinyl. Forage chia butcher, fap American Apparel selvage
Kickstarter retro cred. Pinterest raw denim wayfarers heirloom
flexitarian chia. Umami 8-bit pug, ugh actually hashtag
Intelligentsia food truck irony sartorial post-ironic disrupt
squid. Fap swag fixie try-hard pug blog Carles, authentic Odd
Future PBR&B hashtag butcher cardigan food truck wolf. Salvia
seitan gastropub Shoreditch disrupt, lo-fi chillwave drinking
vinegar narwhal post-ironic meh ennui selvage four loko whatever.
</AutoText>
</View>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('AutoresizeTextExample', () => AutoresizeTextExample);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment