Edit

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,
  AppRegistry,
  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
  }
});

AppRegistry.registerComponent('App', () => App);

Props

• View props...

• animating
• color
• indeterminate
• progress
• styleAttr
• testID

---

Reference

Props

animating

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

Type	Required
bool	No

---

color

Color of the progress bar.

Type	Required
color	No

---

indeterminate

If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal.

Type	Required
indeterminateType	No

---

progress

The progress value (between 0 and 1).

Type	Required
number	No

---

styleAttr

Style of the ProgressBar. One of:

• Horizontal
• Normal (default)
• Small
• Large
• Inverse
• SmallInverse
• LargeInverse

Type	Required
enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse')	No

---

testID

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

Type	Required
string	No