Progress Bar component for React Native
npm install @react-native-community/progress-bar-android[![Build Status][build-badge]][build]
[![Version][version-badge]][package]
![Supports Android][support-badge]
[![MIT License][license-badge]][license]
[![Lean Core Badge][lean-core-badge]][lean-core-issue]
Progress Bar Component for Android Devices
``
npm install @react-native-community/progress-bar-android --save
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:
`
npx pod-install
- React Native <= 0.59
Run the following commands
`
$ react-native link @react-native-community/progress-bar-android
Manually linking the library - iOS
1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to ➜ @react-native-community/progress-bar-android and add RNCProgressBar.xcodeproj
3. In XCode, in the project navigator, select your project. Add to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project ()
Manually link the library - android
1. Open up android/app/src/main/java/[...]/MainActivity.java
- Add import com.reactnativecommunity.androidprogressbar.RNCProgressBarPackage; to the imports at the top of the filenew RNCProgressBarPackage()
- Add to the list returned by the getPackages() method
2. 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')
3. Insert the following lines inside the dependencies block in :`
implementation project(':@react-native-community_progress-bar-android')
1. Install dependencies
1. Install dependencies for example folder
1. Start the metro bundler
1. Build the application
`sh`
yarn install
yarn start
yarn android
`jsx
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 (
indeterminate={false}
progress={0.5}
/>
);
}
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 |
[build-badge]: https://img.shields.io/circleci/project/github/react-native-community/progress-bar-android/master.svg?style=flat-square
[build]: https://circleci.com/gh/react-native-community/progress-bar-android
[version-badge]: https://img.shields.io/npm/v/@react-native-community/progress-bar-android.svg?style=flat-square
[package]: https://www.npmjs.com/package/@react-native-community/progress-bar-android
[support-badge]: https://img.shields.io/badge/platforms-android-lightgrey.svg?style=flat-square
[license-badge]: https://img.shields.io/npm/l/@react-native-community/progress-bar-android.svg?style=flat-square
[license]: https://opensource.org/licenses/MIT
[lean-core-badge]: https://img.shields.io/badge/Lean%20Core-Extracted-brightgreen.svg?style=flat-square
[lean-core-issue]: https://github.com/facebook/react-native/issues/23313