React Native ActivityIndicator Example

Hi Guys,

Hello all! In this article, we will talk about react native ActivityIndicator example. This article goes in detailed on how to use ActivityIndicator in react native. let’s discuss about how to add ActivityIndicator in react native how to create ActivityIndicator using react native. you can see ActivityIndicator example in react native.

I will give you a simple example of ActivityIndicator example in react native.

Step 1 - Create project

In the first step Run the following command for create project.

expo init ActivityIndicator

Step 2 - App.js

In this step, You will open App.js file and put the code.

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

export default function App() {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>React Native ActivityIndicator Example</Text>
            <View style={styles.horizontal}>
                <ActivityIndicator 
                    color='#f21515'
                />
                <ActivityIndicator
                    size='large' 
                    animating = {true}
                    color="#00ff00"
                />
                <ActivityIndicator 
                    size='small' 
                    color="#1717ed"
                />
            </View>    
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        marginTop:50,
    },
    horizontal: {
        flexDirection:'row',
        justifyContent: "space-around",
    },
    title: {
        textAlign:'center',
        fontSize:20,
        backgroundColor:'#f21515',
        padding:15,
        color:'#FFFF',
        marginBottom:60
    },
});

Step 3 - Run project

In the last step run your project using bellow command.

expo start --web

Now run your project in browser.

port : http://localhost:19006/

Output:

It will help you...