Package Exports

react-native-background-progress

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-background-progress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-background-progress

Let your background handle the progress report

Installation

Install the module with:

npm install react-native-background-progress --save

Preview

Expo

You can find the Expo snack here: https://snack.expo.io/@johan-dev/background-progress

Usage

Simply import the component

import BackgroundProgress from 'react-native-background-progress';

Then use as follows

<BackgroundProgress
  ref={(ref) => this.bp = ref}
  total={5}
  backgroundColor="#A0D468"
  stepColor="#8CC152"
  friction={7}
  tension={140}
  onAnimationStart={this.onAnimationStart}
  onAnimationFinish={this.onAnimationFinish}>
    <View style={styles.container}>
        <Text style={styles.paragraph}>
            {this.renderCurrentStep(this.state.currnetStep)}
        </Text>
        <Button title="next step" onPress={this.nextStep} />
        <Button title="prev step" onPress={this.prevStep} />
    </View>
</BackgroundProgress>

nextStep = () => {
    this.bp.nextStep();
};

prevStep = () => {
    this.bp.previousStep();
};

Top

Properties

Prop	Description	Required	Default
`backgroundColor`	The main color for the background	`true`	`N/A`
`stepColor`	The color indicating progress	`true`	`N/A`
`containerStyle`	Override the container styles	`false`	`N/A`
`friction`	Controls the friction applied to the animation when a step occurs	`false`	`15`
`tension`	Controls the tensions applied to the animation when a step occurs	`false`	`140`

Top

Contributing

Feel free to do pull requests if a certain feature you want is missing. We accept all PR's that are enhancements to the project.