Retrieve TextInput entered value on Button Click onPress in React Native

This post explains how to retrieve TextInput Layout component entered value in react native application with the help of state and props. TextInput is a basic component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted.

In this example we are entering and retrieving value TextInput layout entered value on button click and displaying the entered value on screen using Alert dialog box.

Retrieve the value of a text field in react native application :

Lets follow the below steps to Retrieve TextInput entered value on Button Click onPress in React Native.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

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

Step-4: Create constructor block inside the HomeActivity class and store the TextInput layout Component value inside the TextInputValue state. Whenever you will modify the TextInput layout value, it will update the value of TextInput value inside the state.

constructor(props) {
      super(props)
      this.state = {
        TextInputValue: ''
      }
  }

Step-5 : Create a buttonClickListener function inside the HomeActivity  class. This function will display the updated value of TextInput layout, with the help of Alert dialog/popup.

buttonClickListener = () =>{
      const { TextInputValue }  = this.state ;
      Alert.alert(TextInputValue);
  }

Step-6 : Implement render  method and return TextInput, Button component wrapped by root View  component. Specify the below layout inside the render block.

• onChangeText prop of TextInput Component: This will update the TextInput layout value inside the state. (this.state = { TextInputValue: '' })
• onPress prop of Button Component : When user click on button , it will call buttonClickListener function and display the updated state value inside the Alert Dialog box.

render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>
          React Native TextInput PlaceHolder Text Example
        </Text>

        <TextInput
          style={{height: 45,width: "95%",borderColor: "gray",borderWidth: 2}}
          // Adding hint in TextInput using Placeholder option.
          placeholder=" Enter Your First Name"
          //set the value in state.
          onChangeText={TextInputValue => this.setState({TextInputValue})}
          // Making the Under line Transparent.
          underlineColorAndroid="transparent"
        />

        <View style={[{ width: "93%", margin: 15, backgroundColor: "red" }]}>
          <Button
          onPress={this.buttonClickListener}
          title="Get Value"
          color="#00B0FF"
          />
        </View>
      </View>
    );
  }

Complete Source Code for App.js 

Lets see the complete source code that helps to Retrieve TextInput entered value on Button Click onPress in React Native.

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

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

export default class HomeActivity extends Component {

  constructor(props) {
      super(props)
      this.state = {
        TextInputValue: ''
      }
  }

  buttonClickListener = () =>{
      const { TextInputValue }  = this.state ;
      Alert.alert(TextInputValue);
  }


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>
         Retrieve TextInput entered value on Button Click 
        </Text>

        <TextInput
          style={{height: 45,width: "95%",borderColor: "gray",borderWidth: 2}}
          // Adding hint in TextInput using Placeholder option.
          placeholder=" Enter Your First Name"
          //set the value in state.
          onChangeText={TextInputValue => this.setState({TextInputValue})}
          // Making the Under line Transparent.
          underlineColorAndroid="transparent"
        />

        <View style={[{ width: "93%", margin: 15, backgroundColor: "red" }]}>
          <Button
          onPress={this.buttonClickListener}
          title="Get Value"
          color="#00B0FF"
          />
        </View>
      </View>
    );
  }
}

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

Screenshot :

This is all about retrieving TextInput entered value on Button Click onPress event in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.