Open In App

Create an Activity Indicator in react-native using react-native-paper library

Improve
Improve
Like Article
Like
Save
Share
Report

React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms.

Prerequisites:

  • Basic knowledge of ReactJs.
  • Html, CSS, and javascript with ES6 syntax.
  • NodeJs should be installed in your system.
  • Jdk and android studio for testing your app on the emulator

In this article, we will show an Activity Indicator in react native using react-native-paper library  .  we will display how a text is getting updated after 6 seconds and the activity indicator disappears.

Creating React Native App:

Step 1: Create a react-native project :

npx react-native init DemoProject

Step 2: Now install react-native-paper

npm install react-native-paper

Step 3: Start the server

npx react-native run-android

Now go to your project and create a components folder. Inside the components folder, create a file ActivityIndicator.js

Project Structure: The project should look like this:

To display an ActivityIndicator using react-native-paper,  we have to pass animating props as true. To hide it, just set the animating prop to false. To change the color of the indicator, we can pass color props and change the size of the indicator, this library provides size props. It can be any one of the following:

Size = 'small' | 'large' | number 

Example: We will use useState, useEffect hooks of react-native to update the state of the components.

ActivityIndicator.js




import React, { useState, useEffect } from "react";
import { Text, View, StyleSheet } from 'react-native';
import { ActivityIndicator, } from "react-native-paper";
  
  
const ActivityIndicatorExample = () => {
    const [text, setText] = useState('');
    const [animate, setAnimate] = useState(true);
  
    useEffect(() => {
        setTimeout(() => {
            setText("Value updated successfully");
            setAnimate(false);
        }, 6000);
    })
    return (
        <View style={styles.activityI}>
            <ActivityIndicator animating={animate} 
                color="red" size="large" />
            <Text style={styles.text}>{text}</Text>
        </View>
    )
}
  
export default ActivityIndicatorExample;
const styles = StyleSheet.create({
    activityI: {
        alignContent: "center",
        margin: 50
    },
    text: {
        fontSize: 30,
        fontWeight: "bold"
    }
})


App.js




import React from 'react';
import { Text, View, StyleSheet, Alert } from 'react-native';
import ActivityIndicatorExample from './components/ActivityIndicator';
  
const App: () => Node = () => {
    return (
  
        <View>
            <ActivityIndicatorExample />
        </View>
  
    );
};
  
export default App;


Save it and restart the server by the following command:

npx react-native run-android

Output:



Last Updated : 03 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads