npm package: @kimche/react-native-progress-bar
Description: Easy and customizable progress bar for react native projects.
Author: Hugo Navarrete
Latest version: 1.0.5

# react-native-progress-bar

[![npm version](https://badge.fury.io/js/%40kimche%2Freact-native-progress-bar.svg)](https://badge.fury.io/js/%40kimche%2Freact-native-progress-bar)
[![npm version](https://badge.fury.io/js/react-native.svg)](https://badge.fury.io/js/react-native)

Easy and customizable progress bar for react native projects.

## Setup

`yarn add @kimche/react-native-progress-bar`

## Usage

```javascript
import React from "react";
import { StyleSheet, View, Button } from "react-native";
import ProgressBar from "@kimche/react-native-progress-bar";

export default class App extends React.Component {
  state = {
    progress: 50
  };
  onPressButton = () => {
    const { progress } = this.state;
    this.setState({ progress: progress + 10 });
  };

  render() {
    const { progress } = this.state;
    return (
      <View style={styles.container}>
        <ProgressBar
          hasAutoProgress={true}
          max={100}
          progress={progress}
          width={200}
          height={20}
          fontSize={15}
          title="example 1: "
          onCompleteColor="green"
        />

        <ProgressBar
          max={120}
          progress={progress}
          width={150}
          height={20}
          fontSize={12}
          progressColor="red"
          title="example 2: "
          style={{ marginTop: "10%" }}
        />

        <Button
          onPress={this.onPressButton}
          title="More!"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});
```

## Available props

| Name            | Type   | Default   | Description                                           |
| --------------- | ------ | --------- | ----------------------------------------------------- |
| progress        | number | REQUIRED  | Progress value                                        |
| max             | number | REQUIRED  | Max progress                                          |
| progressColor   | string | '#0097ff' | Color of the bar progress                             |
| backgroundColor | string | '#e0e0e0' | Color of the bar background                           |
| onCompleteColor | string | ''        | Color of the bar when the max is reached              |
| initialDelay    | number | 500       | Duration in ms of bar initial animation               |
| width           | number | REQUIRED  | Width of bar                                          |
| height          | number | 7         | Height of bar                                         |
| title           | string | ""        | Progress bar text                                     |
| fontSize        | number | 7         | Progress bar title font size                          |
| hasAutoProgress | bool   | false     | Bool that enables the auto percentage of the progress |
| style           | obj    | {}        | aditional styling of the bar                          |