react-native-custom-animated-progressbar

React Native simple Custom Animated Progress Bar

This is a simple animated progressbar component.

Installation

Supported version: react-native >= 0.59.0

npm install react-native-custom-animated-progressbar

or

yarn add react-native-custom-animated-progressbar

Example

import AnimatedProgressBar from 'react-native-custom-animated-progressbar';

....

 <AnimatedProgressBar progress={progress} />
        <AnimatedProgressBar
          size={20}
          progress={progress}
          rootStyle={{
            marginTop: 35,
          }}
        />
        <AnimatedProgressBar
          size={20}
          isRtl={false}
          progress={progress}
          rootStyle={{
            marginTop: 35,
          }}
        />

Screenshot

Gif

props

name	type	default	description
size	number	4	progress bar height
isRtl	boolean	true	by this prop you can select progress bar style rtl or ltr
bgColor	string	'#c8e6c9'	progress bar background color
barColor	string	'#43a047'	progress bar color
duration	number	500	animation duration in progress changing
progress	number	none	number between 0 - 1
barStyle	object or array	none	if you want override progress bar style use this prop
rootStyle	object or array	none	if you want override progress bar root style use this prop
barWidth	number	screen width	if you want change progress bar width use this prop