Circular Progress Bar Animation in React Native (Reanimated 2)
In this tutorial, we’ll learn how to create a Circular Progress Bar Animation in React Native.
We'll use these packages:
react-native-reanimated v2
react-native-svg
react-native-redash
My React Native animations course: https://reanimate.dev
Shared 100+ Animations on Demos: https://reactiive.io/demos
Twitter: / reactiive_
Written article: https://reactiive.io/articles/circula...
Source code: https://github.com/enzomanuelmangano/...
What's a Shared Value? 🐢
Here's the answer: • Introduction to React Native Reanimated 2
The main concepts we'll explore are:
How to animate props with useAnimatedProps
How to animate a text on the UI Thread with ReText component
ReText vs AnimateableText?
If you already use redash in your project and using ReText doesn't feel limited, then I recommend using ReText.
If you necessarily need to push the performance of the animation, then I absolutely recommend AnimateableText.
More info here: https://github.com/axelra-ag/react-na...
Chapters:
00:00 Introduction
00:56 Setup
04:10 Dasharray and dashoffset trick
07:40 The useAnimatedProps hook
10:30 Text vs ReText
15:18 The "Run" Button