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.

1. import React, { Component } from 'react';  
2. import { AppRegistry, Text, TextInput, View } from 'react-native';  
3.   
4. export default class PizzaTranslator extends Component {  
5.     constructor(props) {  
6.         super(props);  
7.         this.state = {text: ''};  
8.     }  
9.   
10.     render() {  
11.         return (  
12.             <View style={{padding: 10}}>  
13.                 <TextInput  
14.                     style={{height: 40,backgroundColor: 'azure', fontSize: 20}}  
15.                     placeholder="Type here to translate!"  
16.                     onChangeText={(text) => this.setState({text})}  
17.                 />  
18.                 <Text style={{padding: 100, fontSize: 50}}>  
19.                     {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}  
20.                 </Text>*  
21.             </View>  
22.         );  
23.     }  
24. }  

Output

 

TextInput properties

allowFontScaling	autoCapitalize	autoCorrect	autoFocus
blurOnSubmit	caretHidden	clearButtonMode	clearTextOnFocus
contextMenuHidden	dataDetectorTypes	defaultValue	disableFullscreenUI
editable	enablesReturnKeyAutomatically	inlineImageLeft	inlineImagePadding
keyboardAppearance	keyboardType	maxLength	multiline
numberOfLines	onBlur	onChange	onChangeText
onContentSizeChange	onEndEditing	onFocus	onKeyPress
onLayout	onScroll	onSelectionChange	onSubmitEditing
placeholder	placeholderTextColor	returnKeyLabel	returnKeyType
scrollEnabled	secureTextEntry	selection	selectionColor
selectionColor	selectionState	selectTextOnFocus	spellCheck
textContentType	style	textBreakStrategy	underlineColorAndroid

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

1. import React, { Component } from 'react';  
2. import { AppRegistry, View, TextInput } from 'react-native';  
3.   
4. class UselessTextInput extends Component {  
5.     render() {  
6.         return (  
7.             <TextInput  
8.                 {...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below  
9.                 editable = {true}  
10.                 maxLength = {40}  
11.             />  
12.         );  
13.     }  
14. }  
15. export default class UselessTextInputMultiline extends Component {  
16.     constructor(props) {  
17.         super(props);  
18.         this.state = {  
19.             text: 'Useless Multiline Placeholder',  
20.         };  
21.     }  
22.   
23.       
24.     render() {  
25.         return (  
26.             <View style={{  
27.                 backgroundColor: this.state.text,  
28.                 borderBottomColor: '#000000',  
29.                 borderBottomWidth: 1,  
30.                }}  
31.             >  
32.                 <UselessTextInput  
33.                     multiline = {true}  
34.                     numberOfLines = {10}  
35.                     onChangeText={(text) => this.setState({text})}  
36.                     value={this.state.text}  
37.                     style={{fontSize: 20}}  
38.                 />  
39.             </View>  
40.         );  
41.     }  
42. }  

Output: