How to get values which are in TextInput when Button is click in ReactNative

Please have a look at the example below:

Setup the state in constructor

constructor(){
 super();
 this.state = {isLoggedIn : false, email :"", password : ""};
}

render method called when page loads:

render() {
return (
  <View style={styles.container}>
    <TextInput style={styles.input}
      placeholder = "Username"
      returnKeyType = "next"
      underlineColorAndroid='transparent'
      onChange = {(text) => this.setState({email : text})}
    />
    <TextInput style={styles.input}
      secureTextEntry
      returnKeyType= 'go'
      onChange = {(password) => this.setState({password : password})}

call onChange and setState of username and password

this.setState({password : password})}

      placeholder = "password"/>

    <TouchableOpacity style={styles.clickContainer} onPress=
{this.login.bind(this)}>
      <Text style={styles.buttonText} >Login</Text>
    </TouchableOpacity>
  </View>
);
  }

Login method get the entered username and password

login(){
 console.log(this.state.email);
 this.setState({isLoggedIn : true});
}

You can get value from state i.e this.state.username.

<Button
    style={styles.textInputStyle}
    onPress={() => console.log(this.state.username)}>
      Submit
</Button>

I tried the following code and it worked with me. It is about establishing variables, and then making the value of the textinput to be this variable. You can deal with the variable as the value of textinput.

//This is an example of online Emulator by https://aboutreact.com
import React, {useState} from 'react';
import { Text, View, StyleSheet, TextInput, Alert, Button } from 'react-native';

const App = () => {
  const [name, setname] = useState('')
  const [secret, setsecret] = useState('')
  var Value = name;
  var secret_Value = secret;
  return (
    <View style={styles.container}>
      <TextInput 
        style={styles.input}
        placeholder='write here'
        value={Value}
        onChangeText={(Value) => {
          setname(Value)
          
        }}
      />
      <TextInput 
        style={styles.input}
        placeholder='write here'
        value={secret_Value}
        onChangeText={(secret_Value) => {
          setsecret(secret_Value)
          
        }}
      />
      <Button title='submit' onPress={() => {
        if (Value === 'Omar' && secret_Value === '123'){
          Alert.alert('Done')
        }
      }}/>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#D3BFA1',
    alignItems: 'center',
    justifyContent: 'center'
  },
  input: {
    borderBottomWidth: 1,
    width: '50%',
    marginVertical: 5
  },
});

In your state, you have usename and password and in your render(), you are asking for a name. If you want the name, you should put it in the state as well.

this.state = {
          username: '',
          password: '',
          name: ''
        } 

If you want to get username and password,

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  TextInput,
  View ,
} from 'react-native';

var styles = require('./Style/customStyle');

import Button from 'react-native-button';
import RadioButton from 'react-native-radio-button'

class AwesomeProject extends Component {

  constructor(props){
    super(props)

    this.state = {
      username: '',
      password: '',
    }
  }

  onUsernameChange(username) {
     let s = this.state;
     s.username = username;
     this.setState(s);   
  }

  onPasswordChange(password) {
     let s = this.state;
     s.password = password;
     this.setState(s);   
  }

  render() {
    return (
    <ScrollView style={styles.content}>
      <View style={styles.content}>

        <Text style={styles.welcome}>
          Create Account
        </Text>

        <Text style={styles.textStyle}>
          Name
        </Text>

        <TextInput
          style={styles.textInputStyle}
          placeholder="Enter Username"
          returnKeyLabel = {"next"}
          onChangeText={this.onUsernameChange}
        />

        <TextInput
          style={styles.textInputStyle}
          placeholder="Enter Password"
          returnKeyLabel = {"next"}
          onChangeText={this.onPasswordChange}
        />

        <Button style={styles.buttonStyle}>
              Submit
        </Button>

        </View>
      </ScrollView>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

<TextInput editable={true} style={{height: 40, borderColor: 'gray', borderWidth: 1}}
   onChangeText={(text1) => this.setState({text1})}
    value={this.state.text1} />

    <Button
        onPress={()=>Alert.alert(this.state.text1)}
        title="Press Me"
        color="#841584"
      />

This will do it guys.