Reanimated progress donut

Description

A reusable and animated donut chart component for React Native designed to display progress with customizable formatting. It can function either as a progress indicator or as a timer, depending on your use case. Built with `react-native-reanimated` for smooth animations and `react-native-svg` for precise rendering, the component is fully typed with TypeScript and offers a flexible API: * `percentage`: Current progress value * `radius`: Size of the donut chart * `strokeWidth`: Thickness of the donut ring * `duration`: Duration of the animation * `color`: Color of the progress ring * `textColor`: Color of the inner formatted text * `max`: Maximum value of the progress * `formatter`: A `"worklet"` function that receives a `SharedValue` and returns a formatted string to display inside the chart * `timer`: Enables timer mode, animating from 0 to max over time This component is ideal for progress visualizations like countdowns, achievements, or data tracking, with full control over the display logic via the `formatter` prop.

Installation

bunx @animatereactnative/cli@latest add reanimated-progress-donut

npx @animatereactnative/cli@latest add reanimated-progress-donut

yarn @animatereactnative/cli@latest add reanimated-progress-donut

pnpm dlx @animatereactnative/cli@latest add reanimated-progress-donut

Preview

Dependencies

PackageVersion
react-native-gesture-handler~2.28.0
react-native-reanimated~4.1.0
react-native-svg15.12.1

To install these dependencies, you can use the following command:

bun add react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0" react-native-svg@"15.12.1"

npm install react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0" react-native-svg@"15.12.1"

yarn install react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0" react-native-svg@"15.12.1"

pnpm install react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0" react-native-svg@"15.12.1"

Source code