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

You can use StyleSheet.absoluteFill to shorten code. Add this to your render:

  //... other code here
  {this.state.loading && 
      
  }

Improvement:

You can also create a Loading component:

Loading.js

import React from 'react';
import {View, ActivityIndicator, StyleSheet} from 'react-native';

export const Loading = ({theme = 'white', size = 'large'}) => {
  const color = theme === 'white' ? '#00bdcd' : '#fff';
  return (
    
      
    
  );
};

Then use it anywhere you want

   //... other code here
   // remember to import Loading component
   {this.state.loading && }