React Native Text Input
TextInput is the fundamental component to input text. It has several props which
configure the different features, such as onChangeText that takes a function and call it
whenever the text changed. The onSubmitEditing prop takes a function, which is called
when the text submitted.
There are several things, which can be performed with text input, such as validating the
text inside while user types.
React Native TextInput Example 1
In this example, we create a TextInput and perform an onChangeText action. At every
text change, it calls the setState and checks the condition of a split. If the input text
found ' ' space, it displays '🍕' in the text. The text is placed in state as it is changed every
time.
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';
export default class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
render() {
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40,backgroundColor: 'azure', fontSize: 20}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
<Text style={{padding: 100, fontSize: 50}}>
{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>*
</View>
);
}
}
Output
TextInput properties
allowFontScaling autoCapitalize autoCorrect
blurOnSubmit caretHidden clearButtonMode
contextMenuHidden dataDetectorTypes defaultValue
editable enablesReturnKeyAutomatically inlineImageLeft
keyboardAppearance keyboardType maxLength
numberOfLines onBlur onChange
onContentSizeChange onEndEditing onFocus
onLayout onScroll onSelectionChange
placeholder placeholderTextColor returnKeyLabel
scrollEnabled secureTextEntry selection
selectionColor selectionState selectTextOnFocus
textContentType style textBreakStrategy
The method .focus() and .blur() are exposed from the native element. These methods
focus or blur the TextInput programmatically.
Multiline TextInput
The multiline props provide facility to input multiple lines of text. Some props
of TextInput are only compatible with multiline, for example, multiline={true/false}.
The property borderButtomColor will not work if multiline = false.
React Native TextInput Example 2
import React, { Component } from 'react';
import { AppRegistry, View, TextInput } from 'react-native';
class UselessTextInput extends Component {
render() {
return (
<TextInput
{...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
editable = {true}
maxLength = {40}
/>
);
}
}
export default class UselessTextInputMultiline extends Component {
constructor(props) {
super(props);
this.state = {
text: 'Useless Multiline Placeholder',
};
}
render() {
return (
<View style={{
backgroundColor: this.state.text,
borderBottomColor: '#000000',
borderBottomWidth: 1,
}}
>
<UselessTextInput
multiline = {true}
numberOfLines = {10}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
style={{fontSize: 20}}
/>
</View>
);
}
}
Output