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...
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 19

  • @yashjadhav6838
    @yashjadhav6838 8 หลายเดือนก่อน

    Awaiting next video

  • @raymondmichael4987
    @raymondmichael4987 7 หลายเดือนก่อน

    Good one bro

    • @rakhawibowo
      @rakhawibowo  7 หลายเดือนก่อน

      Thankyou broo!!!

  • @imam_robani
    @imam_robani 8 หลายเดือนก่อน

    Cool bro

    • @rakhawibowo
      @rakhawibowo  8 หลายเดือนก่อน

      Thank you so much mas!!!

  • @lakhanpurohit6969
    @lakhanpurohit6969 8 หลายเดือนก่อน

    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

    • @rakhawibowo
      @rakhawibowo  7 หลายเดือนก่อน

      Hey, thank you!!!
      You can read this article about Getting Started with React Native Skia
      shopify.engineering/getting-started-with-react-native-skia

  • @ryzs_
    @ryzs_ 5 หลายเดือนก่อน

    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

    • @rakhawibowo
      @rakhawibowo  5 หลายเดือนก่อน

      I know right, animating Skia with Reanimated is so simple!!!

  • @Lucifer-yo8ts
    @Lucifer-yo8ts 7 หลายเดือนก่อน +1

    Thanks for the video can you tell which extensions you use ?

    • @rakhawibowo
      @rakhawibowo  7 หลายเดือนก่อน

      Hey, thanks for watching this video. What extension are you referring to ?

    • @Lucifer-yo8ts
      @Lucifer-yo8ts 7 หลายเดือนก่อน

      @@rakhawibowo hey 😅 i was asking you which extension you use in coding for me !!

  • @KaitoAoki
    @KaitoAoki 3 หลายเดือนก่อน

    Has measureText been discontinued?

    • @rakhawibowo
      @rakhawibowo  3 หลายเดือนก่อน

      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

  • @gnom-om
    @gnom-om 8 หลายเดือนก่อน

    is any benefits of Skia?

    • @rakhawibowo
      @rakhawibowo  8 หลายเดือนก่อน

      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

    • @gnom-om
      @gnom-om 8 หลายเดือนก่อน

      @@rakhawibowo i mane any benefits for creating simple progress bars )

    • @rakhawibowo
      @rakhawibowo  8 หลายเดือนก่อน

      @@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.

    • @rakhawibowo
      @rakhawibowo  8 หลายเดือนก่อน

      @@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.