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

When “How to get TextInput value on Button Click into React Native?” moves through design, development and browser testing, new hire reporting can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the React Native project before adopting it in production.

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...