react-native-progress-wheel

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

Example app

Installation

yarn add 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}
/>

The progress wheel can display progess as titles in the center of the circle.

<AnimatedProgressWheel
        max={40}
        showProgressLabel={true}
        rotation={'-90deg'}
        labelStyle={styles.progressLabel}
        subtitle={'Questions out of 40'}
        subtitleStyle={styles.subtitle}
        {...{color, backgroundColor, size, width, duration, progress, rounded}}
      />

The progress wheel can be updated using state variables.

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

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	Angle from which the progress starts from
max	number	100	Max value for the progress wheel
rotation	string	0deg	Set starting angle of progress
duration	number	600	Duration at which to animate the progress
rounded	boolean	false	Rounds edges
animateFromValue	number	-1	Starting value to animate to progres when component is mounted
containerColor	string	null	Container color
delay	number	0	Delay for animation
easing	EasingFunction	null	Easing for animation
showProgressLabel	boolean	false	Show the progress as text in the circle
labelStyle	TextStyle	{}	Style object for progress label
subtitle	string	null	Text displayed directly below progress label
subtitleStyle	TextStyle	{}	Style object for subtitle
showPercentageSymbol	boolean	false	Show the progress as a percentage
onAnimationComplete	function	null	Called when animation finishes

Why use this component

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

This package is also SUPER-LIGHTWEIGHT.

Let's compare:

react-native-progress-wheel: Unpacked size: 8.74 kB (this library)

react-native-circular-progress: Unpacked size: 3.38 MB (other popular library)

FAQ

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

Q: Does it support Typescript? A: From version 2.0.0 onwards, Typescript is fully supported.

Q: How can I get round edges? A: Pass rounded={true} in the components props. (v2 and up.)

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! ⭐️