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. , with help of that you can perform background service, asynchronous request and some other task.This is all about





In this tutorial we are going to discussapplication. You may have seen this kind of loading spinner overlay animation effect in various app likeetc. 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.