A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.npmjs.com/package/@react-native-community/progress-bar-android below:

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

@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

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

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.

Type Required indeterminateType No progress

The progress value (between 0 and 1).

styleAttr

Style of the ProgressBar. One of:

Type Required enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') No 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