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

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 &&
    
      
    
}