react-native-background-progress

Let your background handle the progress report

Quick Access

• Installation
• Preview
• Expo
• Usage
• Properties
• Contributing

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.

Top