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:

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.

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

Sets the color of the progress bar track.

License

kcotias/react-native-animated-progress

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 2

Packages 0

Used by 260

Contributors 4

Uh oh!

Languages

Packages