/react-native-progress-circle-gradient

An animated circular progress chart using an angular gradient

Primary LanguageTypeScriptMIT LicenseMIT

react-native-progress-circle-gradient

license Version npm

An animated progress circle with an angular gradient using react-native-skia. The differentiator between this package and other React Native animated circular progress charts with a gradient is that the start color can be different than the stop color.

This package has only 2 dependencies (@shopify/react-native-skia and color-interpolate). It has 0 peer dependencies and so does not require react-native-reanimated or react-native-svg to also be installed, linked or configured for your project.

This project is inspired by this YouTube tutorial.

Installation

npm install react-native-progress-circle-gradient

or

yarn add react-native-progress-circle-gradient

Props

Prop Description Type Default Required
colors The color hex values array to be used for the angular gradient String[] N/A
backgroundColor The color hex value for the remaining progress String '#F0F8FF'
duration The duration of the animation in milliseconds Number 1250
easing The easing options for the animation: 'cubic', 'ease', 'linear', 'quad' String 'cubic'
granularity Smaller progress circle charts can use a smaller granularity to increase performance Number 200
onAnimationFinish Callback for when animation reaches 100% Function N/A
percentageComplete The percentage of progress completed ranging from 0-100 Number 0
radius The radius of the progress circle in points, measured from the center of the stroke Number 100
rotation The rotation of the progress circle in degrees Number 0
strokeWidth The thickness of the progress circle Number 30

Usage

import { CircularProgress } from 'react-native-progress-circle-gradient';

// ...

<CircularProgress
  backgroundColor={'#1F1B24'}
  radius={100}
  strokeWidth={20}
  percentageComplete={percentageComplete}
  colors={['#0000FF', '#00FF00']}
/>;

import { CircularProgress } from 'react-native-progress-circle-gradient';

// ...

<CircularProgress
  backgroundColor={'#1F1B24'}
  radius={128}
  strokeWidth={20}
  percentageComplete={progress}
  colors={['#0000FF', '#00FF00']}
  easing={'quad'}
  duration={3000}
  onAnimationFinish={() => {
    Alert.alert('Animation has finished!');
  }}
/>;

<CircularProgress
  backgroundColor={'#1F1B24'}
  radius={100}
  strokeWidth={20}
  percentageComplete={percentageComplete}
  colors={['#0000FF', '#00FF00', '#FF0000']}
/>

<CircularProgress
  backgroundColor={'#1F1B24'}
  radius={100}
  strokeWidth={20}
  percentageComplete={percentageComplete}
  colors={['#0000FF', '#00FF00', '#0000FF']}
  rotation={270}
/>

Roadmap

  • Add functions for animation pause, play and reset
  • Add support for text once default system fonts become available in this PR
  • Add support for children components

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Made with create-react-native-library