Retrieve TextInput value on button click example in react native

• Create Components folder under src folder
• Add RetrieveTextboxValueOnButton.js file and add below Code

import React, { useState } from "react";

import { Text, View, TextInput, Button } from "react-native";

const RetrieveTextboxValueOnButton = () => {

  const [data, setData] = useState("");

  const GetValueFunction = () => {

    alert(data);

    // console.log(data);

  };

  return (

    <View>

      <Text> Retrieve TextInput Data on Button Click example</Text>

      <TextInput

        placeholder="Enter Text here"

        onChangeText={text => setData(text)}

        value={data}

        style={{

          textAlign: "center",

          borderColor: "gray",

          borderWidth: 3,

          height: 50

        }}

      />

      <Button

        title="Get Text Input Value"

        color="#0000FF"

        onPress={GetValueFunction}

      />

    </View>

  );

};

export default RetrieveTextboxValueOnButton;

• Open App.js file and update code as below

import React from 'react';

import { View,StyleSheet } from 'react-native';

import RetrieveTextboxValueOnButton from './src/Component/RetrieveTextboxValueOnButton'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <RetrieveTextboxValueOnButton/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

Output: