React Native ActivityIndicator Andriod IOS Example

This tutorial explains how to display loading screen or activity indicator in react native application for android and ios device. ActivityIndicator is the common circular loading indicator used in both android and iOS devices. This type of loader which is basically used to display a loading dotted moving circle on android and iPhone devices, When user trying to loading something from server.

React Native ActivityIndicator Example 

Lets see the complete source code that helps to display loading screen or activity indicator in react native application for android and ios device.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

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

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

import React, { Component } from 'react';
import { StyleSheet, View, ActivityIndicator, Button } from 'react-native';

Step 4: Lets create constructor block inside your App component. In the constructor block we have created state variables that helps to hide and show activity indicator from the device screen.

 constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    }
  }

Step 5: Lets create function named as ShowHideActivityIndicator. This function would change the isLoading state value on button click.

 ShowHideActivityIndicator = () => {
    if (this.state.isLoading == true) {
      this.setState({ isLoading: false })
    }
    else {
      this.setState({ isLoading: true })
    }
  }

Step 6: Implement render method inside the App class and wrapped the below layout design inside the root View component.  

 render() {
    return (
      <View style={styles.Container}>
        {this.state.isLoading ? <ActivityIndicator size="large" color="#0000ff" style={{ padding: 20 }} /> : null}
        <Button title="Hide ActivityIndicator" onPress={this.ShowHideActivityIndicator} />
      </View>
    );
  }

Step 7 : Apply the below style sheet design. 

const styles = StyleSheet.create({
  Container: {
    justifyContent: 'center',
    flex: 1,
    margin: 10
  },

});

Complete Source Code for App.js 

Lets see the complete source code that helps to display loading screen or activity indicator in react native application for android and ios device.

import React, { Component } from 'react';
import { StyleSheet, View, ActivityIndicator, Button } from 'react-native';

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    }
  }

  ShowHideActivityIndicator = () => {
    if (this.state.isLoading == true) {
      this.setState({ isLoading: false })
    }
    else {
      this.setState({ isLoading: true })
    }
  }


  render() {
    return (
      <View style={styles.Container}>
        {this.state.isLoading ? <ActivityIndicator size="large" color="#0000ff" style={{ padding: 20 }} /> : null}
        <Button title="Hide ActivityIndicator" onPress={this.ShowHideActivityIndicator} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    justifyContent: 'center',
    flex: 1,
    margin: 10
  },

});

Screenshot : 

This is all about React Native ActivityIndicator Andriod and IOS 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.