react-native-animated-progress-chz/README.md

Animated progressBar for react-native with custom modules

# React Native Animated Progress

Need a lightweight and easy-to-use Progress Bar? Here it is!

A cross-platform Progress Bar component with different customize options.

![](example.gif)


## Features

- Good fit for loading situations
- Good fit for progress display
- Smooth animations
- Highly customizable
- Very lightweight

## Installation

Open a Terminal in the project root and run:

```sh
npm install react-native-animated-progress-chz
or
yarn add react-native-animated-progress-chz
```

## Quick Start

```js
import React from "react";
import { View, Text } from "react-native";
import ProgressBar from "react-native-animated-progress-chz";

const App = () => {
  return (
    <View
      style={{ flex: 1, justifyContent: "space-evenly", paddingHorizontal: 16 }}
    >
      <View>
        <Text style={{ marginBottom: 20 }}>Default with indeterminate</Text>
        <ProgressBar indeterminate backgroundColor="#4a0072" />
      </View>
      <View>
        <Text style={{ marginBottom: 20 }}>
          Default with indeterminate and increased height
        </Text>
        <ProgressBar height={5} indeterminate backgroundColor="#4a0072" />
      </View>
      <View>
        <Text style={{ marginBottom: 20 }}>
          Progress with animation and increased height
        </Text>
        <ProgressBar progress={60} height={7} backgroundColor="#4a0072" />
      </View>
      <View>
        <Text style={{ marginBottom: 20 }}>Progress without animation</Text>
        <ProgressBar
          progress={30}
          value={50}
          height={7}
          backgroundColor="#4a0072"
          animated={false}
        />
      </View>
    </View>
  );
};
export default App;
```

### Props

##### `height` - integer (`Default - 2`)

Sets the height of the bar.

##### `backgroundColor` - string (`Default - none`)

Sets the color of the progress bar.

##### `animated` - boolean (`Default - true`)

Chooses wheter to animate the progress or not

##### `indeterminate` - boolean (`Default - false`)

Sets the bar to animate constantly as a loading progress.

##### `progress` - integer - From 0 to 100 (`Default - 0`)

Chooses the point where the progress should animate to, based on the progress bar width.

##### `value` - integer (`Default - 100`)

Sets the Max Item if you have 10,20,30...

##### `trackColor` - string (`Default - #A6A6A6`)

Sets the color of the progress bar track.