Progress Bar Component for Android Devices
$ npm install @react-native-community/progress-bar-android --save
or
$ yarn add @react-native-community/progress-bar-android
- React Native 0.60+
The package is automatically linked when building the app. All you need to do is:
$ cd ios && pod install
- React Native <= 0.59
Run the following commands
$ react-native link @react-native-community/progress-bar-android
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 addRNCAndroidprogressbar.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNCAndroidprogressbar.a
to your project'sBuild 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.RNCAndroidprogressbarPackage;
to the imports at the top of the file - Add
new RNCAndroidprogressbarPackage()
to the list returned by thegetPackages()
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')
- Install dependencies
- Install dependencies for example folder
- Start the metro bundler
- Build the application
yarn install
cd example
# inside 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.
Whether to show the ProgressBar (true, the default) or hide it (false).
Type | Required |
---|---|
bool | No |
Color of the progress bar.
Type | Required |
---|---|
color | No |
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 |
The progress value (between 0 and 1).
Type | Required |
---|---|
number | No |
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 |
Used to locate this view in end-to-end tests.
Type | Required |
---|---|
string | No |