How to get TextInput value on button click into react-native

Share the post

Hello All, In the last post We had discussed state & props in react-native with example. Today We will discuss How to get TextInput value on button clicks into react-native? We will see this concept with the help of an example & retrieve TextInput entered value on button click. For example, We will make Two TextInput of Username & Password and get input value on button click. In TextInput value, We will check the value using onchangetext & setState to assign the value to the state. Please find the below example for more clarification.

Example to get TextInput value in react-native

  1. Create a sample page to implement the TextInput field for Username & Password. I have created One page called HomePage.js
  2. Import TextInput.
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';

3. Write the TextInput for Username & password

              <TextInput style={styles.txtinput}
                    placeholder="Enter Username"
                    onChangeText={(text) => this.setState({ username: text })}
                />

                <TextInput style={styles.txtinput}
                    placeholder="Enter Password"
                    secureTextEntry={true}
                    onChangeText={(text) => this.setState({ password: text })}
                />


Here, We are using setState to set the value of username & password onChangeText. So, every time when the text gets changed this function call & update those value in state.

4. Write the button to get the entered value in username & password

<Button onPress={() => this.getValues()} title='Get Values' />

In this way we are calling a function called getValues() to get the data inside of username & password text inputs.

5. Copy below styles for View & TextInput. So that you will also get the idea about how to style Textinput in react-native.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    txtinput: {

        width: '75%',
        height: 50,
        borderWidth: 1,
        borderColor: 'black',
        borderRadius: 10,
        padding: '24px',
        margin: '10px',

    }
});

6. The full code HomePage.js is as follows

import { StatusBar } from 'expo-status-bar';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';


export default class HomePage extends Component {
    state = {
        username: '',
        password: ''
    }

    getValues() {
        console.log(this.state.username);
        console.log(this.state.password);
    }


    render() {
        return (
            <View style={styles.container}>
                <TextInput style={styles.txtinput}
                    placeholder="Enter Username"
                    onChangeText={(text) => this.setState({ username: text })}
                />

                <TextInput style={styles.txtinput}
                    placeholder="Enter Password"
                    secureTextEntry={true}
                    onChangeText={(text) => this.setState({ password: text })}
                />
                <Button onPress={() => this.getValues()} title='Get Values' />
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    txtinput: {

        width: '75%',
        height: 50,
        borderWidth: 1,
        borderColor: 'black',
        borderRadius: 10,
        padding: '24px',
        margin: '10px',

    }
});

7. Output

Output
Output

In this output, We can see the value of username & password on the console. Please see the above screenshot as I have entered the value of username to ‘abcd’ & password to ‘abcde’. Both values are seen correctly.

This is how we will able to get the Input value in react native. If you want to do some HTTP request from react native mobile applications then the next post will help you to do that. Looking for the new topics in react native then stay tuned.

1 thought on “How to get TextInput value on button click into react-native”

Leave a Comment