Retrieve TextInput entered value on Button Click onPress in React Native

How to get TextInput inside typed value in React Native android iOS application and Show entered value in Alert Dialog message on screen.

TextInput is used to obtain value from application user in React Native. The same work has done in android using EditText. This tutorial is one of the most basic tutorial for React Native learners. Using this example a beginner can easily learn about State and Props. Because in React Native everything is depend on States and Props. So let’s get started 🙂 .

What we are doing in this project : In this tutorial we would retrieving the Text Input entered value on button click and displaying the entered value on screen using Alert.

Contents in this project Retrieve TextInput entered value on Button onPress :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add AppRegistry, StyleSheet, TextInput, View, Alert and Button component in import block.

3. Create Constructor in your application’s main class with props parameter.

3. Now add super method inside constructor with same props parameter.

4. Add this.state in constructor and set TextInputValueHolder = ‘ ‘ empty. To control the data which is going to change in React Native application we have to use state. Here this.state represents that this state belongs to same class.

5. Create a function with named as GetValueFunction . In this function we have been creating a constant TextInputValueHolder and assign the value present on this.state to it. After getting the value in variable we have printing that value on screen using Alert dialog.s

6. Add View component in render’s return block.

7. Create custom style sheet class named as MainContainer just above the AppRegistry.registerComponent line.

8. Call MainContainer class in View.

9. Add Text Input component inside View. Here placeholder represents the hint inside TextInput, onChangeText method set state’s value each type when user types somethings inside it and update the state value and using inline style we have set its inside typed text alignment center and TextInput height as 50 pixels.

10. Add Button component in View just below the TextInput component. Call the GetValueFunction on onPress of button.

11. Complete Source Code for index.android.js file :

Screenshots :

TextInput

6 Comments

  1. Sir please help me

    How to retrieve TextInput value in next page without using alert box.

Leave a Reply

Your email address will not be published. Required fields are marked *