Progress Bar Component for Android Devices
npm install @react-native-community/progress-bar-android --save
# or
yarn add @react-native-community/progress-bar-android
The package is automatically linked when building the app. All you need to do is:
npx pod-install
Run the following commands
$ react-native link @react-native-community/progress-bar-android
example
yarn install
yarn start
yarn android
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import {ProgressBar} from '@react-native-community/progress-bar-android';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.example}>
<Text>Circle Progress Indicator</Text>
<ProgressBar />
</View>
<View style={styles.example}>
<Text>Horizontal Progress Indicator</Text>
<ProgressBar styleAttr="Horizontal" />
</View>
<View style={styles.example}>
<Text>Colored Progress Indicator</Text>
<ProgressBar styleAttr="Horizontal" color="#2196F3" />
</View>
<View style={styles.example}>
<Text>Fixed Progress Value</Text>
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={0.5}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
example: {
marginVertical: 24,
},
});
Inherits View 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, and requires a progress
value.
Type | Required |
---|---|
indeterminateType | No |
progress
The progress value (between 0 and 1).
Type | Required |
---|---|
number | No |
styleAttr
Style of the ProgressBar. One of:
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 |