react-native-background-progress
Let your background handle the progress report
![NPM Downloads](https://img.shields.io/npm/dm/react-native-background-progress.svg?style=flat)
Quick Access
Install the module with:
npm install react-native-background-progress --save
![](https://github.com/Johan-dutoit/react-native-background-progress/blob/master/preview.gif)
You can find the Expo snack here: https://snack.expo.io/@johan-dev/background-progress
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();
};
Prop | Description | Default |
---|
duration | The duration each view takes to load in | 300 |
staggerDelay | The delay between each animation | 200 |
useNativeDriver | Use the native drive for the animations | true |
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.