React-native-background-progress NPM

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

npm.io

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

react native background progress

@infinitebrahmanuniverse/nolb-react-native-b @everything-registry/sub-chunk-2572

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago