Progress Bar Component for Android Devices
Getting startednpm install @react-native-community/progress-bar-android --save
# or
yarn add @react-native-community/progress-bar-android
Linking
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
Libraries
â Add Files to [your project's name]
node_modules
â @react-native-community/progress-bar-android
and add RNCProgressBar.xcodeproj
libRNCProgressBar.a
to your project's Build Phases
â Link Binary With Libraries
Cmd+R
)android/app/src/main/java/[...]/MainActivity.java
import com.reactnativecommunity.androidprogressbar.RNCProgressBarPackage;
to the imports at the top of the filenew RNCProgressBarPackage()
to the list returned by the getPackages()
methodandroid/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')
android/app/build.gradle
:
implementation project(':@react-native-community_progress-bar-android')
example
Android
yarn install yarn start yarn androidExample
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).
color
Color of the progress bar.
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.
progress
The progress value (between 0 and 1).
styleAttr
Style of the ProgressBar. One of:
testID
Used to locate this view in end-to-end tests.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4