React Native Progress Ring 🛟📈✅

A performant, simple, flexible circular progress ring component for React Native apps 🔥

Great for progress indicators, goals and countdown timers 📈🏆⏳

Works with Expo and bare React Native apps.

• Demos 📱
• Peer Dependencies 👶
• Installation 🚀
• Examples 😎
  • Progress Ring (Dark Mode) 🌚
  • Progress Ring (Light Mode) 🌞
• Props 💅
  • ProgressRing ⏲️
    • Custom Styles 👗
• Methods 🔄
• License 📝

Demos 📱

Peer Dependencies 👶

This component only requires one peer dependency to work in your React Native Project:

• react-native-reanimated

Installation 🚀

Supports React Native >= 0.59.0 and React >= 16.8.0.

Just run:

npm install react-native-progress-ring

or

yarn add react-native-progress-ring

Remember to follow the installation instructions for react-native-reanimated if you do not already have it installed.

Examples 😎

Progress Ring (Dark Mode) 🌚

Progress Ring (Light Mode) 🌞

Props 💅

ProgressRing ⏲️

Custom Styles 👗

The following custom styles can be supplied to re-style the component in any way. Various styles are applied by default - you can take a look at these here.

Methods 🔄

The library exposes a ProgressRingRef type, which can be used to type your ref to the picker:

const progressRingRef = useRef<ProgressRingRef>(null);

It has the following available methods:

reset - imperative method to reset the progress ring to its initial state. The startInPausedState option defines whether the animation will play when this is called. If that option is not defined, it will fall back to the startInPausedState prop (if defined).

progressRingRef.current.reset(options?: { startInPausedState?: boolean });

License 📝

This project is licensed under the MIT License.