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 build a nice overlay using the activity indicator component by also leveraging the modal capabilities like Sanaur suggests.

For example you can use the below functional component. You can control it's visibility through the show prop that you can tie to a state in your screen.

An example that you can adapt to your needs.

const ModalActivityIndicator = props => {
  const {
    show = false,
    color = "black",
    backgroundColor = "white",
    dimLights = 0.6,
    loadingMessage = "Doing stuff ..."
  } = props;
  return (
    
      
        
          
          {loadingMessage}
        
      
    
  );
};

and in your screen, in the render's return, just add it there as a child (please ignore the rest of the code, I put it there for context).

return (
 {
    Keyboard.dismiss();
  }}
>
  
    
    

where screenIsWaiting is just a state, for example

  const [screenIsWaiting, setScreenIsWaiting] = useState(false);

To test it you can add a button somewhere,

   {
      setScreenIsWaiting(true);
      await sleep(5000);
      setScreenIsWaiting(false);
      ...
    }}
  />

where sleep is a function defined as

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

I found the sleep() idea on stackoverflow on another post.

You can of course also define the

only once in your App's root component and trigger it's display and props via a global state container like redux.