React Native’s ProgressBarAndroid component is used to show the current state of a loading activity or app. Only the Android platform supports the ProgressBarAndroid component. The ProgressViewIOS component is used to utilise the progress bar in the iOS platform.

Syntax:

<View>
   // Other Component
  <ProgressBarAndroid/>
   // Other Component
<View>

Props for ProgressBarAndroid

• animating: A boolean value that indicates whether or not to display the progress bar.
• color: It describes the progress bar’s colour.
• indeterminate: It is used to demonstrate ambiguous progress.
• progress: It gives a numerical description of the progress value.
• styleAttr: This attribute describes the style of the Android ProgressBar component. Horizontal, Normal (the default), Small, Large, Inverse, SmallInverse, and LargeInverse are all valid values for this field.
• testID: In end-to-end testing, this view can be found using the testID.

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 ProgressBarAndroidDemo

Step 3: Now go into your project folder i.e. ProgressBarAndroidDemo using the following command.

cd ProgressBarAndroidDemo

Example

Now let’s implement the ProgressBarAndroid. Here we have shown a simple loader animation, and after it ends, we have shown a text to the user.

import React, { useState } from 'react';
import {
StyleSheet, Text, View, ProgressBarAndroid,
TouchableWithoutFeedback
} from 'react-native';

export default function App() {

// State to hold current value
const [val, setVal] = useState(true);

return (
	<View style={styles.container}>
	<TouchableWithoutFeedback onPress={() => { setVal(false); }}
		style={{ flex: 1 }}>
		<View style={{
		flex: 1, justifyContent: 'center',
		alignItems: 'center'
		}}>
		<ProgressBarAndroid animating={val} color="blue"
			styleAttr='LargeInverse' />
		{!val && <Text>App has finished loading</Text>}
		</View>
	</TouchableWithoutFeedback>
	</View>
);
}

const styles = StyleSheet.create({
container: {
	flex: 1,
	backgroundColor: '#fff',
	alignItems: 'center',
	justifyContent: 'center',
},
});

Start the server by using the following command.

npm run android

Output: