React Native Loading Spinner Overlay

In this tutorial we are going to discuss how to display loading spinner overlay animation effect in react native application. You may have seen this kind of loading spinner overlay animation effect in various app like Flipkart, Amazon, Myntra, Snapdeal etc. We will use the react-native-loading-spinner-overlay library to make an overlay Loading animation effect. This is basically used to block the screen while the application is doing some work like fetching data from the server or processing any big data which needs some resources.

React Native Loading Spinner Overlay

In this example we are going to create simple loading spinner overlay animation effect, with help of  that you can perform background service and task.

Step 1: First create the new reactive project.

Step 2 :  Install the install react-native-loading-spinner-overlay package in your React Native project. Refer the below screenshot, while installing react loading spinner overlay package.

Command :

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

Once installation complete check you package.json file in react native application. You  will find  React Native Loading Spinner Overlay package installed in dependencies section.

{
  "name": "RNV59",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android",
    "test": "jest"
  },
  "dependencies": {
    "@popmotion/popcorn": "^0.3.3",
    "d3-shape": "^1.3.4",
    "expo": "^32.0.0",
    "randomcolor": "^0.5.4",
    "react": "16.8.3",
    "react-native": "0.59.1",
    "react-native-loading-spinner-overlay": "^1.0.1",
    "react-native-paper": "^2.2.8"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/runtime": "^7.4.2",
    "babel-jest": "^24.5.0",
    "jest": "^24.5.0",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

Step 3: Open App.js File  in your favorite code editor and erase all code and follow this tutorial.

Step 4: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text, Button } from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';

Step 5: Open App.js component and define the state object, in which set the spinner attribute to false initially. 

state = {
    spinner: false
  };

Step 6: Update the spinner state object at very 5 seconds with the help of componentDidMount function lifecycle hook.

componentDidMount() {
    setInterval(() => {
      this.setState({
        spinner: !this.state.spinner
      });
    }, 5000);
  }

Step 7: Open App.js component and  and Implement render method. The render method returns Spinner and Text component wrapped by root View component.

render() {

    return (
      <View style={styles.container}>

        <Spinner
          visible={this.state.spinner}
          textContent={'Loading...'}
          textStyle={styles.spinnerTextStyle}
        />
        <Text style={styles.headerText}>Welcome to React Native!</Text>
        <Text style={styles.headerText}>React Native loading spinner overlay</Text>
        <Text style={styles.headerText}>Example</Text>      

      </View>
    );
  }

Step 8 : Apply the below style sheet design. 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  spinnerTextStyle: {
    color: '#FFF'
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to create simple loading spinner overlay animation effect in react native application, with help of  that you can perform background service, asynchronous request and some other task.

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text, Button } from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';


export default class App extends Component {

  state = {
    spinner: false
  };

  componentDidMount() {
    setInterval(() => {
      this.setState({
        spinner: !this.state.spinner
      });
    }, 5000);
  }

  render() {

    return (
      <View style={styles.container}>

        <Spinner
          visible={this.state.spinner}
          textContent={'Loading...'}
          textStyle={styles.spinnerTextStyle}
        />
        <Text style={styles.headerText}>Welcome to React Native!</Text>
        <Text style={styles.headerText}>React Native loading spinner overlay</Text>
        <Text style={styles.headerText}>Example</Text>

      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  spinnerTextStyle: {
    color: '#FFF'
  },
});

Screenshot :

This is all about react native loading spinner overlay animation effect example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.