React Native ActivityIndicator
The component for displaying loading action is called React Native ActivityIndicator. It is the same as the Progress Bar and circular loader. It is employed to display the status of a protracted task so that the user may comprehend what is happening.
Properties
- animating : show the indicator or not
- color : set the foreground color of the spinner
- size : ‘small’ how big the indicator is
- hidesWhenStopped(iOS only) : hide the indicator when it stops
Example
In this example, we’ll create a simple React Native app that has 2 buttons: Show and Hide.
When you touch the Show one, our circle loading indicator will show up.
The indicator will leave the screen when the Hide button is touched.
Code
import React, { useState } from 'react';
import {StyleSheet, View, Button, ActivityIndicator} from 'react-native';
const App = () => {
const [isShown, setIsShown] = useState(false);
return (
<View style={styles.screen}>
<ActivityIndicator animating={isShown} size="large" color="#3b63b3" />
<View style={styles.buttonWrapper}>
{/* This button is touchable only when the indicator is hidden */}
<Button title="Show" disabled={isShown} onPress={() => setIsShown(true)} />
{/* This button is touchable only when the indicator is shown */}
<Button title="Hide" disabled={!isShown} onPress={() => setIsShown(false)} />
</View>
</View>
);
};
// just some styles for our app
const styles = StyleSheet.create({
screen: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-around',
alignItems: 'center',
},
buttonWrapper: {
flexDirection: 'row'
}
});
export default App;
When you run your app, it should look like this:
