Textinput_keyboard

 app.js

import React from 'react'

import { View, Text } from 'react-native'

import Index from './Components/Practice'

const App = () => {

  return (

      <Index />

   

  )

}

export default App;

***************************************************

practice

index.js

import React, {useState} from 'react';

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

import Styles from './styles';

const Index = () => {

  const [Data, setData] = useState('');

  return (

    <View style={Styles.container}>

      <Text style={Styles.txt}>Please enter your Name</Text>

      <TextInput

        style={Styles.input}

        placeholder="enter text here"

        onChangeText={value => setData(value)}

        // multiline

        // keyboardType={'nu meric'}

        secureTextEntry={true}

        // maxLength={3}

        //for disable textinput box

        // editable={true}

      />

      <Text style={Styles.txt2}>your Name is:{Data}</Text>

    </View>

  );

};

export default Index;

practice

styles.js

import {StyleSheet} from 'react-native';

// import { heightPercentageToDP as dp, widthPercentageToDP as wp } from 'react-native-responsive-screen';

import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';

const Styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor:'skyblue',

    alignItems:'center'

  },

  txt:{

      fontSize:hp(5)

  },

  input:{

      borderWidth:hp(0.5),

      width:wp(60),

      height:hp(10),

      borderRadius:wp(5),

      textAlign:'left',

      fontSize:hp(4)

  },

  txt2:{

      fontSize:hp(5),

      textAlign:'center'

  }

});

export default Styles;

******************************************************

pkg.json

  "dependencies": {

    "react": "17.0.2",

    "react-native": "0.65.1",

    "react-native-responsive-screen": "^1.4.2"

  },