Skip to main content
Version: 0.60

ProgressBarAndroid

Android-only React component used to indicate that the app is loading or there is some activity in the app.

Example:

import React, {Component} from 'react';
import {ProgressBarAndroid, StyleSheet, View} from 'react-native';

export default class App extends Component {
render() {
return (
<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,
},
});

Reference

Props​

Inherits View Props.

animating​

Whether to show the ProgressBar (true, the default) or hide it (false).

TypeRequired
boolNo

color​

Color of the progress bar.

TypeRequired
colorNo

indeterminate​

If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal, and requires a progress value.

TypeRequired
indeterminateTypeNo

progress​

The progress value (between 0 and 1).

TypeRequired
numberNo

styleAttr​

Style of the ProgressBar. One of:

  • Horizontal
  • Normal (default)
  • Small
  • Large
  • Inverse
  • SmallInverse
  • LargeInverse
TypeRequired
enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse')No

testID​

Used to locate this view in end-to-end tests.

TypeRequired
stringNo