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
Share your thoughts in the comments
Please Login to comment...