Open In App

React Native ActivityIndicator Component

Last Updated : 14 Jun, 2021
Like Article

In this article, we are going to see how to create an ActivityIndicator in react-native. For this, we are going to use ActivityIndicator component. It is used to display a circular loading indicator.


<ActivityIndicator />

Props in ActivityIndicator:

  • animating: It will show the indicator if true or hide it if false.
  • color: The foreground color of the spinner.
  • hidesWhenStopped: It control whether the indicator should hide when not animating. It is only available for ios devices.
  • size: Size of the indicator.


Now let’s start with the implementation:

  • Step 1: Open your terminal and install expo-cli by the following command.

    npm install -g expo-cli
  • Step 2: Now create a project by the following command.

    expo init myapp
  • Step 3: Now go into your project folder i.e. myapp

    cd myapp

Project Structure:

Example: Now lets implement the ActivityIndicator. Here we created an ActivityIndicator.


import React from 'react';
import {View, StyleSheet, Text , 
        ActivityIndicator} from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      <ActivityIndicator size="large" color="lightgreen"/>
      <Text style={styles.text}>Loading...</Text>
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  text : {
    marginTop : 10,

Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again. 


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads