Text Input In React Native

In this article, I will demonstrate how to provide text into the application using keypad and what TextInput and multiline TextInput in React Native are.

TextInput

 
It is a React Native component used to add user-defined text into an application. It is similar to <input /> of HTML.
  • Import from “react-native”
  • Properties: -style, autoCapitalize, defaultValue, keyboardType, maxLength, placeholder, placeholderTextColor, secureTextEntry
  • Functional Properties: - onBlur, onChangeText,onKeyPress, onChange, onContentSizeChange 
Let's see an example.
 
Step 1
 
Change the App.js code and make it simple.
 
App.js code
  1. import React, { Component } from "react";  
  2. import { View, Text } from "react-native";  
  3.   
  4. class App extends Component {  
  5.   
  6.   render() {  
  7.     return (  
  8.       <View>  
  9.         <Text> Hi React Native</Text>  
  10.       </View>  
  11.     );  
  12.   }  
  13. }  
  14.   
  15. export default App;  
Output
 
Text Input In React Native
 
Step 2 
 
Import TextInput from "react-native" and add TextInput component in the View component of React Native like below.
 
Text Input In React Native 
 
Output
 
Text Input In React Native 
 
Step 3
 
Import StyleSheet, View, Text from “react-native” for adding style in React Native component and displaying the text on the screen. The onChangeText function gets executed whenever the user types or enters text in the TextInput. So, I have added onChangeText property for setting the value of the state in the below example, and added Placeholder and PlaceHolderText color property.
 
Code - App.js
  1. import React, { Component } from "react";  
  2. import { StyleSheet, View, TextInput, Text } from "react-native";  
  3.   
  4. class App extends Component {  
  5.   state = {  
  6.     myComment: ""  
  7.   }  
  8.   handleTextChange = (inputText) => {  
  9.     this.setState({ myComment: inputText })  
  10.   }  
  11.   
  12.   render() {  
  13.     return (  
  14.       <View style={styles.container}>  
  15.         <TextInput  
  16.           style={styles.textInputStyle}  
  17.           onChangeText={this.handleTextChange}  
  18.           placeholder="Enter your comment"  
  19.           placeholderTextColor="red"  
  20.         />  
  21.         <Text>Ouptput of your TextInput :-</Text>  
  22.         <Text style={styles.textOutputStyle}>{this.state.myComment}</Text>  
  23.       </View>  
  24.     );  
  25.   }  
  26. }  
  27.   
  28. const styles = StyleSheet.create({  
  29.   container: {  
  30.     flex: 1  
  31.   },  
  32.   textInputStyle: {  
  33.     borderColor: '#9a73ef',  
  34.     borderWidth: 1,  
  35.     height: 40,  
  36.     margin: 20,  
  37.     padding: 10,  
  38.   },  
  39.   textOutputStyle: {  
  40.     fontSize: 20  
  41.   }  
  42. })  
  43.   
  44. export default App;  
Output
 
Text Input In React Native 
 

Multiline TextInput

 
It is similar to the <textarea /> of HTML. By default, TextInput is not multiline. To make theTextInput as multiline, just assign multiline = {true}. The numberOfLines = {mention number} property help to set the number of lines in multiline TextInput.
 
Code
  1. import React, { Component } from "react";  
  2. import { StyleSheet, View, TextInput, Text } from "react-native";  
  3.   
  4. class App extends Component {  
  5.   state = {  
  6.     myComment: ""  
  7.   }  
  8.   handleTextChange = (inputText) => {  
  9.     this.setState({ myComment: inputText })  
  10.   }  
  11.   
  12.   render() {  
  13.     return (  
  14.       <View style={styles.container}>  
  15.         <TextInput  
  16.           style={styles.textInputStyle}  
  17.           onChangeText={this.handleTextChange}  
  18.           placeholder="Enter your comment"  
  19.           placeholderTextColor="red"  
  20.           multiline={true}  
  21.           numberOfLines={5}  
  22.         />  
  23.         <Text>Ouptput of your TextInput :-</Text>  
  24.         <Text style={styles.textOutputStyle}>{this.state.myComment}</Text>  
  25.       </View>  
  26.     );  
  27.   }  
  28. }  
  29.   
  30. const styles = StyleSheet.create({  
  31.   container: {  
  32.     flex: 1  
  33.   },  
  34.   textInputStyle: {  
  35.     borderColor: '#9a73ef',  
  36.     borderWidth: 1,  
  37.     height: 100,  
  38.     margin: 20,  
  39.     padding: 10,  
  40.   },  
  41.   textOutputStyle: {  
  42.     fontSize: 20,  
  43.     fontStyle: "italic",  
  44.     paddingTop: 10,  
  45.     color: "blue"  
  46.   }  
  47. })  
  48.   
  49. export default App;  
Output
 
Text Input In React Native 
 
Example
 
User login functionality using TextInput and Button element,
 
In this example, we are going to create a small screen of login form like below.
 
Text Input In React Native 
 
Steps for achieving the above functionality.
  • Import StyleSheet, View, TextInput, Text, Button from React Native
    1. import { StyleSheet, View, TextInput, Text, Button } from "react-native";  
  • Add TextInput

    1. Add two TextInput element in View component one for user name and the second one for password.
    2. Add style, onChangeText event, placeholder, placeholderTextColor properties to TextInput component.
    3. Use secureTextEntry property to enter password securely.
  • Add Button component with title, color and onPress event properties to create Login button for the user login screen.
Code
  1. import React, { Component } from "react";  
  2. import { StyleSheet, View, TextInput, Text, Button } from "react-native";  
  3.   
  4. class App extends Component {  
  5.   state = {  
  6.     userName: "",  
  7.     userPassword: ""  
  8.   }  
  9.   uaserNameTextChange = (inputText) => {  
  10.     this.setState({ userName: inputText })  
  11.   }  
  12.   
  13.   uaserPasswordTextChange = (inputText) => {  
  14.     this.setState({ userPassword: inputText })  
  15.   }  
  16.   userLogin = () => {  
  17.     alert("User Name :-" + this.state.userName + "\n"  
  18.       + "Password :-" + this.state.userPassword + "\n")  
  19.   }  
  20.   
  21.   render() {  
  22.     return (  
  23.       <View style={styles.container}>  
  24.         <Text style={styles.txtLogin}>User Login</Text>  
  25.         <TextInput  
  26.           style={styles.textInputStyle}  
  27.           onChangeText={this.uaserNameTextChange}  
  28.           placeholder="Enter username"  
  29.           placeholderTextColor="red"  
  30.         />  
  31.         <TextInput  
  32.           style={styles.textInputStyle}  
  33.           onChangeText={this.uaserPasswordTextChange}  
  34.           placeholder="Enter password"  
  35.           placeholderTextColor="red"  
  36.           secureTextEntry={true}  
  37.         />  
  38.         <View style={{ margin: 25 }}>  
  39.           <Button  
  40.             title="Login"  
  41.             color="green"  
  42.             onPress={this.userLogin}  
  43.           />  
  44.         </View>  
  45.       </View>  
  46.     );  
  47.   }  
  48. }  
  49.   
  50. const styles = StyleSheet.create({  
  51.   container: {  
  52.     flex: 1,  
  53.     justifyContent: "flex-start",  
  54.     alignContent: "center",  
  55.     margin: 10  
  56.   },  
  57.   textInputStyle: {  
  58.     borderColor: '#9a73ef',  
  59.     borderWidth: 1,  
  60.     height: 40,  
  61.     marginLeft: 20,  
  62.     marginRight: 20,  
  63.     padding: 10,  
  64.     marginTop: 8  
  65.   },  
  66.   txtLogin: {  
  67.     padding: 20,  
  68.     fontWeight: "bold",  
  69.     fontSize: 20  
  70.   }  
  71. })  
  72.   
  73. export default App;  
Output
 
Once you add code as mentioned above, your output should be like below.
 
Text Input In React Native 
 
Add username and password in the text field of the user login screen and check the output. Your output should be like the below screen.
 
Text Input In React Native 
 

Summary

 
In this article, I have demonstrated the React Native TextInput component, uses, and some important properties. Hopefully, it will help.