@react-native-community/progress-bar-android
v1.0.5
Published
Progress Bar component for React Native
Downloads
98,695
Maintainers
Readme
@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
- React Native 0.60+
The package is automatically linked when building the app. All you need to do is:
npx pod-install
- React Native <= 0.59
Run the following commands
$ react-native link @react-native-community/progress-bar-android
Manual installation
- 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 addRNCProgressBar.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNCProgressBar.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)
- 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 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')
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).
| 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:
- 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 |