victorcosta/react-native-animated-progress

A easy-to-use and customizable animated Progress Bar!

React Native Animated Progress

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

A cross-platform Progress Bar component which supports gestures.

• 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:

npm install react-native-animated-progress

Quick Start

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

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