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:

1npm install react-native-progress-ring

or

1yarn 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) 🌚

1undefined

Progress Ring (Light Mode) 🌞

1undefined

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:

1const 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).

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

Contributing 🧑‍🤝‍🧑

Contributions to this project are more than welcome.

Dev Setup

To get this project running locally:

1. Clone the Git repo.
2. Run yarn to install the base dependencies
3. Run yarn setup from the project root (this installs the example's additional dependencies)
4. Run yarn start to start the example in Expo Go.
5. Start adding cool stuff! Your changes should be immediately reflected in the Expo Go app.

You can also run the library in bare React Native:

1. Clone the Git repo.
2. Run yarn to install the base dependencies
3. Run yarn setup-dev.
4. Run yarn start-bare:android or start-bare:ios to start the project on an emulator/device.

GitHub Guidelines

There are two permenant branches: main and develop. You should never work directly on either of these branches.

1. Create a new branch off develop for your work using the pattern feature/{DESCRIPTION}.
2. When you think your work is ready for review, submit a PR from your branch back to develop.
3. Once the PR is resolved, your work will be merged into develop, and will be included in the next major/minor release.

License 📝

This project is licensed under the MIT License.