react-native-oh-library / progress-bar-android

ProgressBar Component for react-native Android

@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

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

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

progress-bar-android's Issues

ProgressBar设置styleAttr为"Normal"时位置需居中

Feature Request

ProgressBar设置styleAttr为"Normal"时位置需居中

Why it is needed

与Android侧保持一致

Possible implementation

styleAttr为Horizontal 时无法铺满全屏

styleAttr为Horizontal 时无法铺满全屏，如下图右侧有留白部分

代码为：
<View style={{width:'100%',height:'100%',paddingTop:50}}> <ProgressBar styleAttr="Horizontal" indeterminate={false} animating={false} /> <ProgressBar styleAttr="Horizontal" indeterminate={false} animating={true} /> <ProgressBar styleAttr="Horizontal" indeterminate={false} animating={true} progress={0.5} /> <ProgressBar styleAttr="Horizontal" indeterminate={true} animating={true} /> <ProgressBar styleAttr="Horizontal" color="black" /> <ProgressBar styleAttr="Horizontal" indeterminate={true} color="blue" /> </View>