A basic login component with two TextInput's and a TouchableHighLight

Login.js

import React, { Component } from 'react'
import { View, 
         TextInput, 
         Text, 
         Alert, 
         TouchableHighlight, 
         StyleSheet } from 'react-native'

export default class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {text: '', 
                  password: ''
    }
  }

  updateEmail = (email) => {
    this.setState({email: email})
  }

  updatePassword = (password) => {
    this.setState({password: password})
  }

  loginPress = (email) => {
    Alert.alert('Please verify your email: \n' + email)
  }

  render() {
    return(
      <View style={styles.loginView}>
        <TextInput
          style={styles.input}
          placeholder='Email'
          autoCapitalize='none'
          onChangeText={this.updateEmail}
          clearButtonMode='while-editing'
        />
        <TextInput
          style={styles.input}
          placeholder='Password'
          onChangeText={this.updatePassword}
          secureTextEntry={true}
        />
        <TouchableHighlight
          style={styles.button}
          onPress={() => this.loginPress(this.state.email, this.state.password)}
          underlayColor='white'
        >
          <Text style={styles.buttonText}>Login</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  loginView: {
    height: '50%', 
    width: '90%', 
    backgroundColor: 'orange',
    alignItems: 'center', 
  }, 
  input: {
    marginTop: 40, 
    padding: 10, 
    backgroundColor: 'white', 
    height: 44, 
    width: '90%'
  }, 
  button: {
    marginTop: 20, 
    backgroundColor: 'limegreen', 
    height: 44, 
    width: '90%', 
    alignItems: 'center', 
    justifyContent: 'center'
  }, 
  buttonText: {
    color: 'white',
    fontSize: 20, 
    fontWeight: '900',
  }
})