Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

React Native ActivityIndicator Component

  • Last Updated : 14 Jun, 2021

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.

Syntax:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

<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.

App.js




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>
    </View>
  );
}
  
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. 

Reference: https://reactnative.dev/docs/activityindicator

My Personal Notes arrow_drop_up
Recommended Articles
Page :