Permalink
Browse files

Better TextInput: Native auto-expandable <TextInput> is here (iOS only)

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 26e2c08544f3beac9926652f1b8f38ca7647df6e
Showing with 9 additions and 30 deletions.
  1. +9 −30 Examples/UIExplorer/js/TextInputExample.ios.js
@@ -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;
@@ -403,6 +375,10 @@ var styles = StyleSheet.create({
padding: 4,
marginBottom: 4,
},
multilineExpandable: {
height: 'auto',
maxHeight: 100,
},
multilineWithFontStyles: {
color: 'blue',
fontWeight: 'bold',
@@ -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>
);

0 comments on commit 26e2c08

Please sign in to comment.