Get Text Input values | React Native tutorial for beginners

1. First all we need to import TextInput, button and other inputs from react-native.

import {
 Platform,StyleSheet,Text,View,TextInput,TouchableOpacity,Keyboard

} from 'react-native';

<TextInput placeholder="First Name"
        style={styles.textbox}></TextInput>

3. Next we need function to pass textbox value to put state.
it will be for fname = first name.

onChangeText={
          fname => this.setState({fname})
        }>

4. Do same for last name variable and now we will call button with TouchableOpacity function.

this button need two attributes onPress function for click and Text for show something on button.

<TouchableOpacity style={styles.btn} onPress={this.myfun}>
        <Text style={styles.txt}>Click</Text>
        </TouchableOpacity>

Styles for our inputs:

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

  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }, 

  textbox:{
    borderWidth:1,
    borderColor:'#ccc',
    width:250,
    padding:8, margin:5,

  },  
  txt:{
    textAlign:'center',color:'white',
    fontWeight:'bold',
    fontSize:20
  },  

  btn:{
    backgroundColor:'red',width:250,
    padding:8,
    margin:10
  }

});

Constructor is the main function where will declare our state variable like fname and lname. and we will declare both variables empty by default. 

constructor(props){
   super(props);
   this.state={
     fname:'',
     lname:'',

   }
 }

props is nothing but parameters in react native, second state is always initialise under constructor function.

Here is video for more help (language: Hindi):