Skip to content
Related Articles

Related Articles

Improve 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:

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