React Native ActivityIndicator Component

In this article, we’re going to explore how to create an ActivityIndicator in React Native. If you’ve ever wanted to show a loading spinner while your app is processing something, the ActivityIndicator component is just what you need. It’s designed to display a circular loading indicator that lets your users know something is happening in the background.

Demo Video:

Syntax:

<ActivityIndicator />

Props:

Now let’s start with the implementation.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

• For the Android users,
  • For the Android Emulator, press "a" as mentioned in the image below.
  • For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
• For iOS users, simply scan the QR code using the Camera app.
• If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Edit Code

App.js:

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

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,
  }
  
});
export default App;

Output:

• Image:

• Video: