react-native-progress-ring
v1.0.7
Published
A performant, simple, flexible circular progress ring component for all React Native apps (Expo and Bare) π₯
Downloads
34
Maintainers
Keywords
Readme
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
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.