/ Progress

A better way to show your animated progress in a circle

A better way to show your animated progress in a circle

react-native-progress-wheel

React Native component for creating natively animated, circular progress wheel.

react-native-progress-wheel

Why use this component

This implementation is 100% JS, meaning you do not need to use any additional libraries such as 'react-native-svg' and you don't need to do any linking. 😱
This component also sets useNativeDriver: true, meaning that all animation is done smoothly on the native side.💖

Installation

npm i --save react-native-progress-wheel

Usage

import AnimatedProgressWheel from 'react-native-progress-wheel';

<AnimatedProgressWheel 
    size={120} 
    width={20} 
    color={'yellow'}
    progress={45}
    backgroundColor={'orange'}
/>

You can define a progress value, and a value from which to animate when the component is mounted.
The following example will animate from 0% to 45% at a duration of 3 seconds.

<AnimatedProgressWheel
    progress={45}
    animateFromValue={0}
    duration={3000}
/>

If you want the color to change with the progress, you can use the fullColor prop.

<AnimatedProgressWheel
    progress={100}
    animateFromValue={0}
    duration={5000}
    color={'white'}
    fullColor={'red'}
/>

colorchange

The progress wheel can be updated using state variables.

<AnimatedProgressWheel
    progress={this.state.sliderProgress}
/>

state

You can also use a ref to call the components 'animateTo' method to update the progress wheel.

this.progressWheel.animateTo(100, 2000, Easing.quad); // Will fill the progress bar linearly in 2 seconds

Configuration

You can configure the component using these props:

Name Type Default value Description
size number 200 Width and height of circle
width number 25 Thickness of the progress line
color string white Color of the progress line
backgroundColor string gray Color of the background progress line
progress number (0, 100) 0 Angle from which the progress starts from
animateFromValue number (0, 100) -1 Starting value to animate to progres when component is mounted
duration number 600 Duration at which to animate the progress.
fullColor string null Color of the progress line when 100%

AnimatedProgressWheel exposes the following functions:

Name Arguments Description
animateTo (toVal: number, duration: number, ease: function) Animate the progress bar to a specific value

FAQ

Q: Does it work in Expo?
A: Yes it does.

Enjoy making smooth animated designs that use the native driver and DON'T require any additional dependencies.
If you like this library please give it a star on GitHub! ⭐️

GitHub