@react-native-community/progress-bar-android
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    @react-native-community/progress-bar-android

    Build Status Version Supports Android MIT License Lean Core Badge

    Progress Bar Component for Android Devices

    Screenshot

    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

    Manually linking the library - iOS
    1. In XCode, in the project navigator, right click LibrariesAdd 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 PhasesLink 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
    1. 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')
      
    2. 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

    1. Install dependencies
    2. Install dependencies for example folder
    3. Start the metro bundler
    4. 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

    Install

    npm i @react-native-community/progress-bar-android

    DownloadsWeekly Downloads

    44,819

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    429 kB

    Total Files

    51

    Last publish

    Collaborators

    • bartoszklonowski
    • titozzz
    • empyrical
    • react-native-community-bot
    • grabbou
    • cpojer
    • mattoakes
    • ferrannp
    • mike866
    • krizzu
    • mike.nedosekin
    • rafaellpa
    • trensik
    • dmtr.kovalenko
    • thymikee
    • esemesek
    • nicholaslee119
    • bartolkaruza
    • mmazzarolo
    • rewieer
    • ansal_ali
    • charpeni
    • janicduplessis
    • satya164
    • msand
    • swaagie
    • kelset
    • scott.beca
    • johandutoit
    • vonovak
    • wojteg1337
    • naturalclar
    • safaiyeh
    • connectdotz
    • luancurti
    • pvinis
    • brentvatne
    • evanbacon
    • trozee
    • eliwhite
    • alloy