How to get TextInput value on Button Click into React Native?

Hi Guys,

Are you looking for an example of how to get TextInput value on button click into react native?. I explained simply about retrieving TextInput entered value on button click onPress in react native. I explained simply about react native get InputText value on button click example. We will look at an example of how to get TextInput value from react native.

I will give you a simple example of how to get the input field value on the button click in react native. In this demo, we applied the onPress Event button and get the InputText value called, when the user fills in the TextInput.

So, let's following example:

Step 1 - Create project

In the first step run the following command for create project.

expo init ButtonOnPress

Step 2 - App.js

In this step, You will open App.js file and put the code.

import React, { useState } from "react";
import { StyleSheet, View, Text, Button, TextInput } from 'react-native';

export default function App() {
    const [text,setText] = useState('');
    return (
        <View style={styles.maincontainer}>
            <Text style={styles.title}>How to get TextInput value on Button Click into React Native</Text>
            <View style={styles.container}>
                <TextInput 
                    style={styles.input}
                    placeholder="Enter Name"
                    onChangeText={(text) => setText(text)}
                    value={text}
                />
                <Button title="submit" onPress={() => alert(text)} />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    maincontainer: {
        marginTop: 40,
    },
    input:{
        borderWidth:1,
        marginBottom:10,
        padding:10,
        width:'100%',
        borderRadius:10,
     },
    title: {
        backgroundColor: 'red',
        textAlign: 'center',
        padding: 10,
        fontSize: 20,
        color: '#FFFF',
        fontWeight:'bold',
    },
    container: {
        marginTop: 40,
        alignItems: 'center',
    },
});

Step 3 - Run project

In the last step run your project using bellow command.

expo start --web

Now run your project in a browser.

port : http://localhost:19006/

Output:

It will help you...