status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-26 08:05:34 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Reviewed By: mmmulani

Differential Revision: D4646962

fbshipit-source-id: bc054d9c68c385b13222e7c9fb8728d21f987a48
This commit is contained in:
Valentin Shergin 2017-03-20 00:00:21 -07:00 committed by Facebook Github Bot
parent 1b013cd30c
commit 26e2c08544
1 changed files with 9 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
Examples/UIExplorer/js/TextInputExample.ios.js
View File

@ -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>
);