Animated Loader with React Native (Skia)

Поділитися
Вставка
  • Опубліковано 13 січ 2025

КОМЕНТАРІ • 27

  • @Reactiive
    @Reactiive  3 місяці тому +4

    Hello there 👋
    I hope you'll enjoy this tutorial 🎥
    If you want to dive deeper into Skia, Reanimated & Gesture Handler, check out my course with step-by-step tutorials starting from scratch reanimate.dev

  • @pierre-antoineduchateau923
    @pierre-antoineduchateau923 3 місяці тому +5

    Great tutorial that combines skia and reanimated ! Thank you !

  • @Endrit719
    @Endrit719 3 місяці тому +1

    it's crazy, I am new at react native but this Skia and Reanimated are revolutionary for react native animations otherwise it would be so hard to implement them and pretty sure not quite performant, it takes a lot of practice I guess to be good with these tools, thanks for this great tutorial

  • @ravindusha
    @ravindusha 3 місяці тому +2

    Great tutorial. Never tried Skia. This makes me want to try it

    • @Reactiive
      @Reactiive  3 місяці тому

      @@ravindusha thanks! I made this tutorial because I think it's a great way to get used to Skia 👀

  • @clevertomatoelefebvre3072
    @clevertomatoelefebvre3072 3 місяці тому +2

    Great video! Learning so much, every video!

    • @Reactiive
      @Reactiive  3 місяці тому

      Thanks a lot for the feedback!

  • @anders-alfjesus
    @anders-alfjesus 3 місяці тому +3

    Very good tutorial 👏

    • @Reactiive
      @Reactiive  3 місяці тому

      Thank you, really appreciated!

  • @ayberkceylan834
    @ayberkceylan834 3 місяці тому +1

    There isn't much skia tutorials pls go on with them. Thanx👌

  • @happychannel5720
    @happychannel5720 Місяць тому +1

    great tutorial! BTW, i want to learn the animated text of skia, like animate to write " skia ", right on the official website, but i cannot find the tutorial video.

  • @mahendra7310
    @mahendra7310 3 місяці тому +3

    Sir kindly bring drawing, panting, animation etc complete skia playlist like you've made RN Reanimated.

    • @Reactiive
      @Reactiive  3 місяці тому +1

      Thanks for the feedback! I will 👀

  • @JuriDiener
    @JuriDiener 3 місяці тому +2

    Why are you using by startAnimated useDerivedValue and not useSharedValue? What's the difference. And how to know when I should use useDerived or useShared?

    • @Reactiive
      @Reactiive  3 місяці тому +2

      That's a great question! I use 'useSharedValue' for independent shared values, such as progress. However, 'useDerivedValue' is better suited for values that depend on others. For example, since 'startAnimated' is dependent on 'progress', you're essentially 'deriving' it from the 'progress' value and applying additional computations.
      Hopefully this helps!

    • @juridiener5942
      @juridiener5942 3 місяці тому +1

      ​@@ReactiiveYes. Thanks. So when I got it right. When Values depending on something then useDerived is the choice. And in all other cases useShared

  • @HaiderAli-oi5fm
    @HaiderAli-oi5fm 3 місяці тому

    @4:50 what extension are you using for code suggestions like that.

    • @Reactiive
      @Reactiive  3 місяці тому

      @@HaiderAli-oi5fm I'm using Cursor! It's a fork from vscode cursor.com

    • @AlbertoVasquez1
      @AlbertoVasquez1 3 місяці тому

      he is using cursor ide

    • @HaiderAli-oi5fm
      @HaiderAli-oi5fm 3 місяці тому

      @@AlbertoVasquez1 Thanks

  • @happychannel5720
    @happychannel5720 Місяць тому

    Another question: what if the shape of loader is rectangle, how to animate it?

  • @wisdomelue
    @wisdomelue 3 місяці тому

    vscode theme please?

    • @Reactiive
      @Reactiive  3 місяці тому

      @@wisdomelue Tokyo Night

  • @hubesh716
    @hubesh716 3 місяці тому

    is this optimize or not?

    • @Reactiive
      @Reactiive  3 місяці тому

      What do you mean by optimize?

    • @hubesh716
      @hubesh716 3 місяці тому

      @@Reactiive sir means is it lag or not when we use it in production ready React Native apps
      and i have one request plz make more video on Animated bottom tabs animation with skia or svgs thanks

    • @Reactiive
      @Reactiive  3 місяці тому

      @@hubesh716 of course it won't lagg but this always depends on how many tasks are active in the background 🫠. Also thanks for your feedback and your idea - I'll plan something about a custom bottom tab bar