@react-native-community/progress-bar-android
Progress Bar Component for Android Devices
Getting started
npm install @react-native-community/progress-bar-android --save
# or
yarn add @react-native-community/progress-bar-android
Linking
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
Manual installation
Manually linking the library - iOS
- In XCode, in the project navigator, right click
Libraries ➜ Add Files to [your project's name]
- Go to
node_modules ➜ @react-native-community/progress-bar-android and add RNCProgressBar.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNCProgressBar.a to your project's Build Phases ➜ Link Binary With Libraries
- Run your project (
Cmd+R)
Manually link the library - android
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.reactnativecommunity.androidprogressbar.RNCProgressBarPackage; to the imports at the top of the file
- Add
new RNCProgressBarPackage() to the list returned by the getPackages() method
- Append the following lines to
android/settings.gradle:
include ':@react-native-community_progress-bar-android'
project(':@react-native-community_progress-bar-android').projectDir = new File(rootProject.projectDir, '../../node_modules/@react-native-community/progress-bar-android/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle:
implementation project(':@react-native-community_progress-bar-android')
Trying out this package in example
Android
- Install dependencies
- Install dependencies for example folder
- Start the metro bundler
- Build the application
yarn install
yarn start
yarn android
Example
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,
},
});
Reference
Props
Inherits View Props.
animating
Whether to show the ProgressBar (true, the default) or hide it (false).
color
Color of the progress bar.
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).
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.
