Socket
Socket
Sign inDemoInstall

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

Package Overview
Dependencies
513
Maintainers
31
Versions
9
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Progress Bar component for React Native


Version published
Maintainers
31
Weekly downloads
19,464
decreased by-8.64%

Weekly downloads

Readme

Source

@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).

TypeRequired
boolNo

color

Color of the progress bar.

TypeRequired
colorNo

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.

TypeRequired
indeterminateTypeNo

progress

The progress value (between 0 and 1).

TypeRequired
numberNo

styleAttr

Style of the ProgressBar. One of:

  • Horizontal
  • Normal (default)
  • Small
  • Large
  • Inverse
  • SmallInverse
  • LargeInverse
TypeRequired
enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse')No

testID

Used to locate this view in end-to-end tests.

TypeRequired
stringNo

Keywords

FAQs

Last updated on 07 Nov 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc