ProgressBar Component for react-native Android
@react-native-community/progress-bar-android"">
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
Libraries
➜ Add Files to [your project's name]
node_modules
➜ @react-native-community/progress-bar-android
and add RNCProgressBar.xcodeproj
libRNCProgressBar.a
to your project’s Build Phases
➜ Link Binary With Libraries
Cmd+R
)android/app/src/main/java/[...]/MainActivity.java
import com.reactnativecommunity.androidprogressbar.RNCProgressBarPackage;
to the imports at the top of the filenew RNCProgressBarPackage()
to the list returned by the getPackages()
methodandroid/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')
android/app/build.gradle
:implementation project(':@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 ></ProgressBar>
</View>
<View style={styles.example}>
<Text>Horizontal Progress Indicator</Text>
<ProgressBar styleAttr="Horizontal" ></ProgressBar>
</View>
<View style={styles.example}>
<Text>Colored Progress Indicator</Text>
<ProgressBar styleAttr="Horizontal" color="#2196F3" ></ProgressBar>
</View>
<View style={styles.example}>
<Text>Fixed Progress Value</Text>
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={0.5}
></ProgressBar>
</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 |