Animated 3D Card in React Native (Reanimated and Skia)

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ก.ย. 2024

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

  • @wcandillon
    @wcandillon 2 ปีที่แล้ว +4

    Woah 😯 awesome 🙌🏼

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว +1

      Woooah, you're package is awesome 👏👀

  • @Howleyy13
    @Howleyy13 2 ปีที่แล้ว +3

    Great to see a new video from you! Your reanimated tutorials have taught me so much!

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      Glad you've liked it! 🎥

  • @ddikodroid
    @ddikodroid 2 ปีที่แล้ว +2

    Finally, a new video. Thank you!

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว +1

      Hi Diko, thank you for your continuous feedback. Super appreciated 😁🎥

  • @sogandt3037
    @sogandt3037 2 ปีที่แล้ว +2

    🎉💪 Excellent, please post more videos

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

    Great Tutorial, Animation is becoming an easier topic in RN day by day just because of you guys and William.

  • @raffaelescala646
    @raffaelescala646 2 ปีที่แล้ว +2

    Hard work pays off 🎉💪 Keep Going !

  • @waiyanpaing3724
    @waiyanpaing3724 2 ปีที่แล้ว +1

    I am waiting more videos. Thanks you so much.

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      🎥🎥🎥

  • @Baconbrix
    @Baconbrix 2 ปีที่แล้ว +6

    Great video, looking forward to more! We’re working with William to get Skia in Expo Go, it should still be possible to use today in dev clients though.

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      Thank you very much for your feedback (and for the contribution in the React Native environment) 🥳

    • @Norfeldt
      @Norfeldt 2 ปีที่แล้ว +1

      Can confirm that SKIA works in the expo dev client on a physical device. Tried to do a build for the simulator but that didn't seem to be a snapshot and not able to run developer mode. But could be that I did something wrong.

    • @official_smp2017
      @official_smp2017 2 ปีที่แล้ว

      @@Norfeldt For some odd reason I can't the package to run on my device. I get "Native RnSkia Module cannot be found" not sure what to do due to the fact that there's not a lot of information about it.

  • @nucleartux
    @nucleartux 2 ปีที่แล้ว +2

    Amazing, can't believe it's done in react native

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      Well, I can't believe too 😁

  • @jodp
    @jodp 2 ปีที่แล้ว

    Surprised you don’t have a lot more subscribers! Great tutorials! Fantastic video quality! Thank you so much for your work!

  • @gaetanandrianjafy7713
    @gaetanandrianjafy7713 2 ปีที่แล้ว +1

    Your tutorials are always great and the most remarkable thing is that you're using recent technologies and techniques, I would love to see how you implement the scrolling uber eats header

  • @abdelwahedelmajouli3764
    @abdelwahedelmajouli3764 2 ปีที่แล้ว +2

    simple and clear thank you for the video keep going 🚀

  • @alexinsaev
    @alexinsaev 2 ปีที่แล้ว +1

    It's amazing work!!!

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      Thank you very much!

  • @dilipsuthar2817
    @dilipsuthar2817 2 ปีที่แล้ว +1

    love it, wonderful

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      Hi Dilip, thank you very much!

  • @sandwidimohamed4914
    @sandwidimohamed4914 ปีที่แล้ว

    Best explaination that I never see about skia,

  • @manhtung1510
    @manhtung1510 2 ปีที่แล้ว +1

    Amazing. Thanks for sharing

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว +1

      Thanks for your feedback 👏

  • @ujjwalmanandhar1439
    @ujjwalmanandhar1439 2 ปีที่แล้ว +2

    Great video:)

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      Thank you for your support!

  • @ramielwan48
    @ramielwan48 2 ปีที่แล้ว +1

    The king is back

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว +1

      Hi Rami, thank you for your continuous support 🤓

  • @xdrap1
    @xdrap1 2 ปีที่แล้ว +4

    Nice work, as always, man. Next video you definitely need to recreate the boomerang card effect (of the same author, Davis) using Reanimated/Skia.

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว +1

      Thank you very much! Good point by the way I'll definitely consider it for future videos 🤓

  • @remixedOne
    @remixedOne 2 ปีที่แล้ว +1

    I love ur videos please keep them coming

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      Actually I love making these videos, but It requires a lot (a loooooot) of time, that's why it's hard to be consistent. By the way I won't stop at all!

  • @fabriziadicristo5777
    @fabriziadicristo5777 2 ปีที่แล้ว +1

    Wonderful 🐢

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      Thank you 🐢

  • @fernandorojo6311
    @fernandorojo6311 2 ปีที่แล้ว +2

    Great video. Keep it up.

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      Hi Fernando, thank you very much! 👀🥳

  • @HarelTussi
    @HarelTussi 2 ปีที่แล้ว +1

    Amazing work man!

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      Hi Harel, thank you! 🚀

  • @王然-e7k
    @王然-e7k 3 หลายเดือนก่อน

    jesus this is awesome

  • @muhammadfarhan5648
    @muhammadfarhan5648 ปีที่แล้ว

    Amazing work of art in React Native🥰

  • @xyunsx
    @xyunsx 2 ปีที่แล้ว +2

    thanks , can you do more videos about rn skia and reanimated ....

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      Hi Yuns, thank you very much for your feedback. I'll definitely upload more content ❤

  • @real7876
    @real7876 2 ปีที่แล้ว

    thanks! your example inspired me to created something else :)

  • @glaze4629
    @glaze4629 2 ปีที่แล้ว +2

    You could have wrapped App in gestureHandlerRootHOC function to enable gestures, like this "export default gestureHandlerRootHOC(App)"

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      Super useful, thanks for your feedback! 👀

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

    Hi sir, I have one question, whenever I check tutorials on react native animations there are always being used fixed sizes for widths and heights, what if you have a component where you show dynamic content and you don't know the height how much it needs to be, how could such components be animated?

  • @JIraya128
    @JIraya128 ปีที่แล้ว

    Skia is now in expo Bundle :)

  • @alirezahadjar
    @alirezahadjar 2 ปีที่แล้ว +1

    It is wonderful. Where did you get these ideas for building these kinds of designs?

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว +1

      Hi Alireza, thank you very much for your feedback! To be honest I'm really bad at design. As mentioned at the beginning of the video, the design comes from a similar implementation made by Philip Davis in SwiftUI twitter.com/i/status/1509200015587041281

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

    bro in babl(RootComponent), js engine: hermes
    ERROR TypeError: 0, _$$_REQUIRE(_dependencyMap[2](...)tive-skia").useSharedValueEffect is not a function (it is undefined)

  • @nurantarlan
    @nurantarlan 2 ปีที่แล้ว

    I'm using MacBook Pro M1, and I added the package @shopify/react-native-skia to my project (everything is okay). Even pod install inside ios/ folder is okay. But when I run yarn ios in the build phase the problem occurred related witch this package. Is it specific for me? Or anyone else was facing the same issue before? Do you have any idea or solution for this?

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

    Your videos are very beginner friendly.

  • @logna3731
    @logna3731 2 ปีที่แล้ว

    can we get the source code ???

    • @Reactiive
      @Reactiive  2 ปีที่แล้ว

      Hi log na, it is in the video description 👀

  • @arupde6320
    @arupde6320 2 ปีที่แล้ว

    plz be regular man . try to upload every weak