Overlay ActivityIndicator / Progress Bar / Loading Spinner in React Native

Overlay ActivityIndicator is basically used to block the screen while application does some work like fetching data from server or processing data

This requires react-native-loading-spinner-overlay library, which provides a component called Spinner

Spinner code

<Spinner
  //visibility of Overlay Loading Spinner
  visible={this.state.loading}
  //Text with the Spinner
  textContent={'Loading...'}
  //Text style of the Spinner Text
  textStyle={styles.spinnerTextStyle}
/>

This creates an overlay Spinner whose visibility depends on a variable that can be changed in an interval function

Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named net_info_app)

react-native init net_info_app

This creates a directory named net_info_app and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into

Installation of Dependency

To install react-native-loading-spinner-overlay

Go to project directory

cd ProjectName

Run following command

yarn react-native-loading-spinner-overlay --save

App.js

/*Example of Recat Native Loading Spinner Overlay*/
import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';

export default class App extends React.Component {
  state = {
    //default loading false
    loading: false,
  };
  componentDidMount() {
    //Setting a timer to show the spinner demo in every 3 second
    setInterval(() => {
      this.setState({
        //change the state of the laoding in every 3 second
        loading: !this.state.loading,
      });
    }, 3000);
  }
  render() {
    return (
      <View style={styles.container}>
        <Spinner
          //visibility of Overlay Loading Spinner
          visible={this.state.loading}
          //Text with the Spinner
          textContent={'Loading...'}
          //Text style of the Spinner Text
          textStyle={styles.spinnerTextStyle}
        />
        <Text style={{ textAlign: 'center', fontSize: 20 }}>
          Spinner Overlay Example
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    textAlign: 'center',
    paddingTop: 30,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  spinnerTextStyle: {
    color: '#FFF',
  },
});

Run instructions

Running in Android

cd into project directory (here net_info_app)

cd net_info_app

Run metro server to serve js

react-native start

Go to project directory in another terminal tab

Enter following run command for Android:

react-native run-android

Running in ios

cd into project directory (here net_info_app)

cd net_info_app

Enter following command :

react-native run-ios

This might take some time

If the app shows error about metro server not configured (check Running an App in iOS), then run metro server in another tab:

react-native start

Reload the app

Re-run react-native run-ios command if reloading doesn't work