How do I overlay ActivityIndicator in react-native?

Question

I have a View with few form elements and a button (TouchableHighlight). On clicking the button, an Activity Indicator should be shown as an overlay to the existing view. The Activity Indicator should be centered within the page and the existing view should be slightly blurred to indicate overlay. I tried different options but could not get it to work.

render() {     const { username, password } = this.state;      return (         <View style={styles.container}>             <View style={styles.group}>                 <Text style={styles.text}>Username:</Text>                 <TextInput                     style={styles.input}                     onChangeText={this.handleUserNameChange.bind(this)}                     value={username}                     underlineColorAndroid="transparent"                 />             </View>             <View style={styles.group}>                 <Text style={styles.text}>Password:</Text>                 <TextInput                     style={styles.input}                     secureTextEntry={true}                     onChangeText={this.handlePasswordChange.bind(this)}                     value={password}                     underlineColorAndroid="transparent"                 />             </View>             <TouchableHighlight                 style={styles.button}                 onPress={this.handleLogin.bind(this)}>                 <Text style={styles.buttonText}>Logon</Text>             </TouchableHighlight>         </View>     ); } 

Existing styles:

const styles = StyleSheet.create({     container: {         flex: 1,         justifyContent: 'flex-start',         alignItems: 'center',         backgroundColor: '#F5FCFF',         marginTop: 60     },     group: {         alignItems: 'flex-start',         padding: 10     },     input: {         width: 150,         padding: 2,         paddingLeft: 5,         borderColor: 'gray',         borderWidth: 1     },     text: {         padding: 0     },     button: {         width: 150,         backgroundColor: '#2299F2',         padding: 15,         marginTop: 20,         borderRadius: 5     },     buttonText: {         textAlign: 'center',         color: '#fff',         fontSize: 24     }, }); 

I need to an ActivityIndicator to the above View, overlay the view, and center the ActivityIndicator.

Answer 1

For this to work, you'd need to absolute position it, and render it after the elements that should be underneath the overlay:

  loading: {      position: 'absolute',      left: 0,      right: 0,      top: 0,      bottom: 0,      alignItems: 'center',      justifyContent: 'center'    }

Then simply compose it into the render method conditionally, based on a loading state. I am going to assume this.handleLogin sets some sort of loading state already.

Make sure it's rendered last so it takes precedence.

...  {this.state.loading &&      <View style={styles.loading}>        <ActivityIndicator size='large' />      </View>  }

Answer 2

Here is a complete example using create react native app.

import React from 'react'; import {StyleSheet, ActivityIndicator, View} from "react-native";  export default class Example extends React.Component {      constructor(props) {         super(props);          this.state = {}      render() {         return (             <View                 style={{flex: 1}}             >                   //Add other content here                   {this.state.loading &&                   <View style={styles.loading}>                       <ActivityIndicator/>                   </View>                   }                 </View>             );         }     }      showLoading() {        this.setState({loading: true})     }      hideLoading() {        this.setState({loading: false})     }      const styles = StyleSheet.create({         loading: {             position: 'absolute',             left: 0,             right: 0,             top: 0,             bottom: 0,             opacity: 0.5,             backgroundColor: 'black',             justifyContent: 'center',             alignItems: 'center'         }     })