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

What's a Shared Value? 🐢

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.

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

[Reactiive]

What's up mobile devs?
Thank you all for the support you are giving me with the channel 🤓❤️

[budlio]

Github copilot literally autofills exact lines of code from your videos when I'm following along. Probably a good indicator for how many developers use you as a resource. Keep up the good work.

[salik]

Hands down the best resource out there on React Native animations

[raymondmichael]

From 400 to 3.34k subscribers in 9 months, dude you're doing such a wonderful work and people appreciate it, Keep'em coming.

Greetings from Tanzania 🇹🇿

[mennamagdy]

I couldn't thank you more! A simple, straight to the point, and perfect explanation. Keep going with the great tutorials!

[tranminhtuan]

Your instructions are very clear and simple. Thank you so much.

[derekquessenberry]

This is fantastic! Thank you for such a great tutorial. I am curious how to get the animated circle to begin at the top (12 o'clock position) instead of on the right side (3 o'clock position).

[azzaazization]

This is so nice ! Thank you !

Btw how can i make a rotation on my Circle progress bar so it started on the top (not on the right of the screen)

[matttrimner]

Thanks! This was super helpful. This channel is definitely the best reanimated 2 channel I have found. I hope you keep making tutorials for reanimated!

[macon]

good lesson with perfect detail explanation

[shivam-dua]

Thanks! Animated text helped me with something I was currently stuck on.

[bbrainttech]

Your projects and resources are sooo amazing, i really love this channel...

[drzaln]

This what i need. Definitely subscribed!

[mudandmoss]

This is perfect! exactly the channel I've been looking for! I'm a visual learner so having these videos are really helpful. Subscribed, and looking forward to the next ones!

[eduardokohn]

Hello everybody! How could I rotate the start of the animated circle so that it starts at 12 o'clock instead of 3 o'clock?

[talhaatiq]

Please keep making such tutorial. I have learned soo much from you.

[fabrizia]

Great content! I finally understood how to animate text on the ui thread😌 thanks bro!

[davidgentilli]

these videos are outstanding, thanks again.

[raymondmichael]

It’s Fascinating how you explain well; I keep coming back to you.

How to build a progressbar/ a line progress

[georgispeaking]

All your videos are really useful. Thank You