https://github.com/johan-dutoit/react-native-background-progress

https://github.com/johan-dutoit/react-native-background-progress

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/johan-dutoit/react-native-background-progress
• Owner: Johan-dutoit
• Created: 2018-02-06T16:24:30.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-12T11:27:19.000Z (almost 7 years ago)
• Last Synced: 2024-08-11T00:05:21.871Z (3 months ago)
• Language: JavaScript
• Size: 3.91 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-native-background-progress

Let your background handle the progress report

[![NPM Version](https://img.shields.io/npm/v/react-native-background-progress.svg?style=flat)](https://www.npmjs.com/package/react-native-background-progress)

[![NPM Downloads](https://img.shields.io/npm/dm/react-native-background-progress.svg?style=flat)](https://www.npmjs.com/package/react-native-background-progress)



## Quick Access

* Installation

* Preview

* Expo

* Usage

* Properties

* Contributing

## Installation

Install the module with:

```

npm install react-native-background-progress --save

```

## Preview

![](https://github.com/Johan-dutoit/react-native-background-progress/blob/master/preview.gif)

## Expo

You can find the Expo snack here: https://snack.expo.io/@johan-dev/background-progress

## Usage

Simply import the component 

```js

import BackgroundProgress from 'react-native-background-progress';

```

Then use as follows

```js

 this.bp = ref}

  total={5}

  backgroundColor="#A0D468"

  stepColor="#8CC152"

  friction={7}

  tension={140}

  onAnimationStart={this.onAnimationStart}

  onAnimationFinish={this.onAnimationFinish}>

    

        

            {this.renderCurrentStep(this.state.currnetStep)}

        

        

        

    

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