React Native - ActivityIndicator Overlay

App.js

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

export default class App extends Component {
  state = {
    loading: false
  }

  renderLoading() {
    if (this.state.loading) {
      return (
        <ActivityIndicator size="large"  color="black" style={{
            position:'absolute', left:0, right:0, bottom:0, top:0 }}/>        
      )
    } else {
      return null
    }
  }

  render() {
    return (
      <View style={styles.container} >
        <Text>Email</Text>
        <TextInput style={styles.input} placeholder="Digite seu e-mail" />
        <Text>Senha</Text>
        <TextInput style={styles.input} placeholder="Digite sua senha" />

        <TouchableOpacity style={styles.button} onPress={()=>this.setState({loading: true})}>
            <Text style={{color:'white'}}>Enviar</Text>
        </TouchableOpacity>
        {this.renderLoading()}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  input: {
    height: 40
  },
  button: {
    height: 34,
    flexDirection: 'row',
    backgroundColor: 'steelblue',
    justifyContent: 'center',
    alignItems: 'center'
  },
  container: {
    flex: 1,
    marginTop: 40,
    marginHorizontal: 10,
    justifyContent: 'center',
  }
})