React Native Animated Circular Progress Bar With Reanimated 3 and Skia
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- Hello, in this video i will show you how to create Animated Circular Progress Bar in React Native using Reanimated 3 and Skia
Full Code - github.com/Rakha112/react-nat...
Reanimated Docs - docs.swmansion.com/react-nati...
Skia Docs - shopify.github.io/react-nativ...
Hey if you found this video helpful and if you want to support me, you can buy me a coffee from this link ko-fi.com/rakhawibowo
Chapters:
0:00 - Demo
0:17 - Install Dependencies
3:33 - Create Screen
10:32 - Create Circular Progress Bar
22:14 - Thankyou
Music:
Balloon (Prod. by Lukrembo)
• lukrembo - balloon (ro...
Animal Friends (Prod. by Lukrembo)
• lukrembo - animal frie...
This Is For You (Prod. by Lukrembo)
• lukrembo - this is for... - วิทยาศาสตร์และเทคโนโลยี
Awaiting next video
Good one bro
Thankyou broo!!!
Cool bro
Thank you so much mas!!!
As always your video sir really helpful.
And i tried a tutorial that teach the skia from the start but i couldn't find anyone. Could u make it sir. Plz
Hey, thank you!!!
You can read this article about Getting Started with React Native Skia
shopify.engineering/getting-started-with-react-native-skia
Cool! The first time looking at somebody using Skia RN, I thought u gonna use SVG, I did the same thing with SVG.... after seeing this video Skia is much simpler right haha
I know right, animating Skia with Reanimated is so simple!!!
Thanks for the video can you tell which extensions you use ?
Hey, thanks for watching this video. What extension are you referring to ?
@@rakhawibowo hey 😅 i was asking you which extension you use in coding for me !!
Has measureText been discontinued?
Hey, sorry for the late reply. For the latest Skia version (v1.2.3), measureText can still be used and hasn't been deprecated yet
is any benefits of Skia?
Hey, Skia is a high performance 2D graphics engine, you can do a lot of things with this, for details you can read the documentation, and very easy to integrate with reanimated to create fluid animations
@@rakhawibowo i mane any benefits for creating simple progress bars )
@@gnom-om If the question is the benefits of create a simple circular progress bar, the answer is that circular progress bars can be used for many things, for example loaders, download indicators, goals indicators, IoT stuff such as temperature, humidity and so on.
@@gnom-om but if the question is why use Skia just to create a simple circular progress bars, the answer is the same as before because Skia can provide high performance for creating 2D graphics and is very easy to integrate with reanimated for animations.