Build Status Version Supports Android MIT License Lean Core Badge

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


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 1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]` 2. Go to `node_modules` ➜ `@react-native-community/progress-bar-android` and add `RNCProgressBar.xcodeproj` 3. In XCode, in the project navigator, select your project. Add `libRNCProgressBar.a` to your project's `Build Phases` ➜ `Link Binary With Libraries` 4. Run your project (`Cmd+R`)
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 file - Add `new RNCProgressBarPackage()` 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 `android/app/build.gradle`: ``` implementation project(':@react-native-community_progress-bar-android') ```

Trying out this package in example


  1. Install dependencies
  2. Install dependencies for example folder
  3. Start the metro bundler
  4. Build the application
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 style={styles.example}>
        <Text>Horizontal Progress Indicator</Text>
        <ProgressBar styleAttr="Horizontal" />
      <View style={styles.example}>
        <Text>Colored Progress Indicator</Text>
        <ProgressBar styleAttr="Horizontal" color="#2196F3" />
      <View style={styles.example}>
        <Text>Fixed Progress Value</Text>

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:

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