Skip to content

Commit

Permalink
Better TextInput: Native auto-expandable <TextInput> is here (iOS only)
Browse files Browse the repository at this point in the history
Reviewed By: mmmulani

Differential Revision: D4646962

fbshipit-source-id: bc054d9c68c385b13222e7c9fb8728d21f987a48
  • Loading branch information
shergin authored and facebook-github-bot committed Mar 20, 2017
1 parent 1b013cd commit 26e2c08
Showing 1 changed file with 9 additions and 30 deletions.
39 changes: 9 additions & 30 deletions Examples/UIExplorer/js/TextInputExample.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -103,34 +103,6 @@ class TextEventsExample extends React.Component {
}
}

class AutoExpandingTextInput extends React.Component {
state: any;

constructor(props) {
super(props);
this.state = {
text: 'React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.',
height: 0,
};
}
render() {
return (
<TextInput
{...this.props}
multiline={true}
onChangeText={(text) => {
this.setState({text});
}}
onContentSizeChange={(event) => {
this.setState({height: event.nativeEvent.contentSize.height});
}}
style={[styles.default, {height: Math.max(35, this.state.height)}]}
value={this.state.text}
/>
);
}
}

class RewriteExample extends React.Component {
state: any;

Expand Down Expand Up @@ -403,6 +375,10 @@ var styles = StyleSheet.create({
padding: 4,
marginBottom: 4,
},
multilineExpandable: {
height: 'auto',
maxHeight: 100,
},
multilineWithFontStyles: {
color: 'blue',
fontWeight: 'bold',
Expand Down Expand Up @@ -801,10 +777,13 @@ exports.examples = [
render: function() {
return (
<View>
<AutoExpandingTextInput
<TextInput
placeholder="height increases with content"
defaultValue="React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native."
multiline={true}
enablesReturnKeyAutomatically={true}
returnKeyType="default"
returnKeyType="go"
style={[styles.multiline, styles.multilineExpandable]}
/>
</View>
);
Expand Down

0 comments on commit 26e2c08

Please sign in to comment.