TypeScript icon, indicating that this package has built-in type declarations

1.0.7Β β€’Β PublicΒ β€’Β Published

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 πŸ‘Ά

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

Installation πŸš€

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

Just run:

npm install react-native-progress-ring


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.

Package Sidebar


npm i react-native-progress-ring

Weekly Downloads






Unpacked Size

33.4 kB

Total Files


Last publish


  • troberts-28