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 (
        
            
                Username:
                
            
            
                Password:
                
            
            
                Logon
            
        
    );
}

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.

user_13345964 · Answer

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

user_711001 · Answer

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,

  

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.

user_8031495 · Answer

There is a library available for this react-native-loading-spinner-overlay. You can simply install it using

npm install react-native-loading-spinner-overlay --save

and can import into your project using

import Spinner from 'react-native-loading-spinner-overlay';

Here is how to use it

user_9428203 · Answer

STEP 1: Create the component for the spinner:

export const OverlaySpinner = () => {
 return (
    
      
    
  );   
 };

STEP 2:

Create the style for the spinner view (using zIndex is very important to make sure the view is over everything on the screen):

spinnerView: {
    position: "absolute",
    zIndex: 1,
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#F5FCFF88",
  },

STEP 3:

Make the initial state for the spinning component:

const [showSpinner, setshowSpinner] = useState(true);

STEP 4:

Use the component and don't forget to import it (don't forget to dismiss the keyboard on submit)

{showSpinner && }

user_10720731 · Answer

I suppose you should use Modal to overlay activity indicator. Following is an example:

 {console.log('close modal')}}>

Admin · Answer

Add in view of loading

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

Admin · Answer

set in View of Activity Indicator

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

user_4163583 · Answer

Here my code for a functional component for anyone looking to achieve this with nativebase as design system. useColorScheme is another hook I use for detecting dark mode.

import { Flex, Spinner } from "native-base"
import React from "react"
import useColorScheme from "../../hooks/useColorScheme"

export default function Loading() {
  const colorScheme = useColorScheme()

  return (
    
      
    
  )
}

How do I overlay ActivityIndicator in react-native?

10 Answers