React Native Screen Overlay ActivityIndicator Progress Bar Example Tutorial

Circular progress bar also known as ActivityIndicator component in react native is a type of data loading widget which display on screen while loading content from internet. By default in react native we have ActivityIndicator component but it dose not blur or fade in complete application screen. So in this tutorial we are using react-native-loading-spinner-overlay custom component to make the loading spinner with screen overlay functionality. So in this tutorial we would React Native Screen Overlay ActivityIndicator Progress Bar Android iOS Example Tutorial.

Contents in this project React Native Screen Overlay ActivityIndicator Progress Bar Android iOS Example Tutorial:

1. Before getting started with application coding we have to download and install the react-native-loading-spinner-overlay component library in our current react native project. So open your react native project Root directory in Command Prompt or Terminal and execute below command.

Screenshot of CMD:

2. Now the library has been successfully downloaded and installed. Next step is to start coding. So open your project’s main App.js file and import View, StyleSheet and Text component.

3. Import Spinner component from react-native-loading-spinner-overlay library.

4. Creating our main  export default App class extends Component.

5. Creating constructor() in our main class. Inside the constructor we would make a State named as isLoading with default false value. We would use this State to show and hide the React Native Screen Overlay ActivityIndicator Progress Bar.

6. Creating componentDidMount() inbuilt method and here we would call the setInterval() method which automatically change the State value on every 3 seconds and show and hide the React Native Screen Overlay ActivityIndicator Progress Bar.

7. Creating componentWillUnmount() method which would make the state value again false on application minimize time or when app is not used.

8. Creating render’s return block and here we would make our Spinner component and Text component.

  • visible : Used to show and hide the Spinner.
  • textContent : To show some Text message on screen.
  • textStyle : Apply style on Spinner text.

9. Creating Style.

10. Complete Source Code for App.js file:

Screenshot in Android Device:

React Native Screen Overlay ActivityIndicator Progress Bar Example Tutorial Screenshots in iOS device:

Leave a Reply

Your email address will not be published. Required fields are marked *