react-native-background-progress

1.0.2 • Public • Published

react-native-background-progress

Let your background handle the progress report

NPM Version NPM Downloads

Quick Access

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

Package Sidebar

Install

npm i react-native-background-progress

Weekly Downloads

2

Version

1.0.2

License

MIT

Unpacked Size

5.65 kB

Total Files

5

Last publish

Collaborators

  • johandutoit