Documentation Index
Fetch the complete documentation index at: https://mintlify.com/facebook/react-native/llms.txt
Use this file to discover all available pages before exploring further.
This component is Android-only. It will not work on iOS or other platforms.ProgressBarAndroid has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from @react-native-community/progress-bar-android instead of react-native. ProgressBar. This component is used to indicate that the app is loading or there is activity in the app.
Example
import React from 'react';
import { View, ProgressBarAndroid, StyleSheet } from 'react-native';
const App = () => (
<View style={styles.container}>
<ProgressBarAndroid />
<ProgressBarAndroid styleAttr="Horizontal" />
<ProgressBarAndroid styleAttr="Horizontal" color="#2196F3" />
<ProgressBarAndroid
styleAttr="Horizontal"
indeterminate={false}
progress={0.5}
/>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-evenly',
padding: 10,
},
});
export default App;
Props
styleAttr
Type: 'Horizontal' | 'Normal' | 'Small' | 'Large' | 'Inverse' | 'SmallInverse' | 'LargeInverse'
Default: 'Normal'
Style of the ProgressBar:
Horizontal - A horizontal progress barNormal - Circular, normal size (default)Small - Circular, small sizeLarge - Circular, large sizeInverse - Circular, normal size, for use on dark backgroundsSmallInverse - Circular, small size, for use on dark backgroundsLargeInverse - Circular, large size, for use on dark backgrounds
indeterminate
Type: boolean
Default: true
If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal.
<ProgressBarAndroid styleAttr="Horizontal" indeterminate={false} progress={0.5} />
progress
Type: number
The progress value (between 0 and 1). This prop is only used when indeterminate is false.
<ProgressBarAndroid
styleAttr="Horizontal"
indeterminate={false}
progress={0.75}
/>
animating
Type: boolean
Default: true
Whether to show the ProgressBar (true, the default) or hide it (false).
<ProgressBarAndroid animating={false} />
color
Type: ColorValue
Color of the progress bar.
<ProgressBarAndroid color="#2196F3" />
<ProgressBarAndroid color="rgb(255, 0, 0)" />
<ProgressBarAndroid color="rgba(0, 255, 0, 0.5)" />
testID
Type: string
Used to locate this view in end-to-end tests.
Complete Example
import React, { useState, useEffect } from 'react';
import { View, ProgressBarAndroid, Button, Text, StyleSheet } from 'react-native';
const App = () => {
const [progress, setProgress] = useState(0);
const [animating, setAnimating] = useState(true);
useEffect(() => {
let interval;
if (animating && progress < 1) {
interval = setInterval(() => {
setProgress((prevProgress) => {
const newProgress = prevProgress + 0.01;
return newProgress > 1 ? 0 : newProgress;
});
}, 100);
}
return () => clearInterval(interval);
}, [animating, progress]);
return (
<View style={styles.container}>
<Text style={styles.title}>Indeterminate Progress</Text>
<ProgressBarAndroid styleAttr="Horizontal" />
<Text style={styles.title}>Determinate Progress</Text>
<ProgressBarAndroid
styleAttr="Horizontal"
indeterminate={false}
progress={progress}
animating={animating}
color="#2196F3"
/>
<Text style={styles.progressText}>{Math.round(progress * 100)}%</Text>
<Button
title={animating ? 'Pause' : 'Resume'}
onPress={() => setAnimating(!animating)}
/>
<Button title="Reset" onPress={() => setProgress(0)} />
<Text style={styles.title}>Different Styles</Text>
<View style={styles.row}>
<ProgressBarAndroid styleAttr="Small" />
<ProgressBarAndroid styleAttr="Normal" />
<ProgressBarAndroid styleAttr="Large" />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
justifyContent: 'center',
},
title: {
fontSize: 16,
fontWeight: 'bold',
marginTop: 20,
marginBottom: 10,
},
progressText: {
textAlign: 'center',
marginVertical: 10,
fontSize: 14,
},
row: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
},
});
export default App;