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