TextInput

It is a React Native component used to add user-defined text into an application. It is similar to <input /> of HTML.
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";
  4. class App extends Component {
  6. render() {
  7. return (
  8. <View>
  9. <Text> Hi React Native</Text>
  10. </View>
  11. );
  12. }
  13. }
  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";
  4. class App extends Component {
  5. state = {
  6. myComment: ""
  7. }
  8. handleTextChange = (inputText) => {
  9. this.setState({ myComment: inputText })
  10. }
  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. }
  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. })
  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";
  4. class App extends Component {
  5. state = {
  6. myComment: ""
  7. }
  8. handleTextChange = (inputText) => {
  9. this.setState({ myComment: inputText })
  10. }
  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. }
  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. })
  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.
Code
  1. import React, { Component } from "react";
  2. import { StyleSheet, View, TextInput, Text, Button } from "react-native";
  4. class App extends Component {
  5. state = {
  6. userName: "",
  7. userPassword: ""
  8. }
  9. uaserNameTextChange = (inputText) => {
  10. this.setState({ userName: inputText })
  11. }
  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. }
  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. }
  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. })
  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.