Working With TextInput Component In React Native

This tutorial explains how to use TextInput Component in react native application. This Component helps to inputting text into the application text area field via a keyboard and also in this example we are going to display the entered text value of TextInput Component in the Text component with the help of States and Props.
Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.

TextInput React Native Example :

Lets follow the below steps to add TextInput Component in react native application :

Step-1 :  Create a new React Native project.

Step-2 :  Add Platform, StyleSheet, Text, View, TextInput Component in import block.

import { Platform, StyleSheet, Text, View, TextInput } from "react-native";

Step-3 : 
Add constructor block in react native class and here we are using states to store the user inputs in TextInput component.

constructor(props) {
    super(props);
    // State helps to Store and Display User Input
    this.state = {
      TextInputValue: ""
    };
  }

Step-4 : Adding the TextInput Component in render block. When user enters any text in text field then it will display the user inputs in Text component with the helps of States and Props.

render() {
    return (
      <View style={styles.container}>
      {// TextInput Component helps to accept user inputs via keyboard... }
        <TextInput
          style={{ height: 40, width: "95%" }}
          onChangeText={TextInputValue => this.setState({ TextInputValue })}
        />
        {// Display the user inputs }
        <Text style={styles.headerText}>
          {" Display User Input: " + this.state.TextInputValue}
        </Text>
      </View>
    );

Complete Source Code for App.js 

Lets see the complete source code that helps to display the text area field in react native application.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, TextInput } from "react-native";

export default class HomeActivity extends Component {
  constructor(props) {
    super(props);
    // State helps to Store and Display User Input
    this.state = {
      TextInputValue: ""
    };
  }

  render() {
    return (
      <View style={styles.container}>
      {/* TextInput Component helps to accept user inputs via keyboard...*/ }
        <TextInput
          style={{ height: 40, width: "95%" }}
          onChangeText={TextInputValue => this.setState({ TextInputValue })}
        />
        {/* Display the user inputs */}
        <Text style={styles.headerText}>
          {" Display User Input: " + this.state.TextInputValue}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  }
});

Screenshot :

 

Download Link : 
https://github.com/skptricks/React-Native/tree/master/Working%20With%20TextInput%20Component%20In%20React%20Native

Demo :

This is all about TextInput Component In React Native.