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.


- Checkout the example/ folder for use example.

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
`

Quick Start

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

const App = () => {
return (
style={{ flex: 1, justifyContent: "space-evenly", paddingHorizontal: 16 }}
>

Default with indeterminate




Default with indeterminate and increased height





Progress with animation and increased height




Progress without animation
progress={30}
height={7}
backgroundColor="#4a0072"
animated={false}
/>


);
};
export default App;
`

$3

##### 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.

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

Sets the color of the progress bar track.