Skeleton Animation in React Native with Moti

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 ม.ค. 2025

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

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

    Muito bom o tutorial, gostei bastante dessa animação de loading, vou começar a usar em meus projetos!

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

    good to have you back!

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

    Thank you !. It's nice to see you again🎉❤im glad if u can make more video for animated api

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

    Great video helps a lot 🎉

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

    amazing video! look into react-native-dynamic-skeletons and with entering and exiting with reanimated

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

    Very nice Video :D What kind of VSCode extension are you using, that auto complete everything so nice? :=)

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

      That's GitHub Copilot!

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

    Super useful 💯

  • @Ehsan.5G
    @Ehsan.5G ปีที่แล้ว +2

    Thank you very much for the great tutorials ❤❤
    Can you please teach scroll select like date picker in React Native

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

    Please create shared element transition video

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

    sir can you make Animation like Slack when we drag the Home page it opens the Search bar

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

      Thanks for the suggestion

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

    thanks for sharing. Can i ask why we don't use memo for ContactListItem at 7:07. And secondly what best way we can do at time 20:20 ?

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

    which extension you are using its looking amazing....

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

    hi thanks for the video can you make video on react native cli and why your channel don't show when we search about react native courses or videos......

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

    which extension you are using to achieve the auto code suggestion?

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

      I'm using Github Copilot. It's very useful 🤓

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

    I don't understand the aspectRatio value. Need help to understand it.

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

      It’s same as adjusting width and height

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

      Yes, as pointed in the other comment is a different way to specify the width and the height.
      For instance height: 50, aspectRatio: 1 means that width = 50 * aspectRatio

  • @wisdomelue
    @wisdomelue 10 หลายเดือนก่อน +1

    moti dosent work in expo go right?

    • @Reactiive
      @Reactiive  10 หลายเดือนก่อน

      It does! This example is made with expo go

    • @wisdomelue
      @wisdomelue 10 หลายเดือนก่อน

      @@Reactiive thank you🥂

    • @wisdomelue
      @wisdomelue 10 หลายเดือนก่อน

      @@Reactiivemy skeleton initially shows a black gradient just before the normal skeleton gradient, is there anything i can do to fix this?

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

    is it worth it installing moti for only it's skeleton?
    I hardly find any need for the package and I fear it my cause unnecessary bloat in my bundle.
    WDYT?

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

      If you have already Reanimated installed I think it should be fine 😁

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

    what if i want to change the colorMode to my custom color

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

    Sir just a small question, please do reply. Why you use layout prop in animated view? My layout animation is not working on ios but it works fine on android. Is it because of the layout prop which I am not provided on my component?

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

    I was using React Native CLI and I faced some challanges with the Linear gradient.
    This should resolve the issue when using React Native CLI instead of Expo.
    Install react-native-linear-gradient:
    npm install react-native-linear-gradient
    Replace all instances of:
    import { LinearGradient } from 'expo-linear-gradient'
    with:
    import { LinearGradient } from 'react-native-linear-gradient'
    Files where the change is needed:
    node_modules/moti/src/skeleton/expo.tsx
    node_modules/moti/src/skeleton/skeleton.tsx
    node_modules/moti/src/skeleton/types.ts
    node_modules/moti/build/skeleton/expo.js

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

      I appreciate your comment but you shouldn't update the node_modules since they get overwritten on each yarn/npm/bun install. To use Moti skeletons with react-native-linear-gradient I strongly recommend to follow moti's docs: moti.fyi/skeleton#option-2-react-native-linear-gradient

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

    It is not used in a real react-native cli project. I'm asking you to leave this Expo. LARGE PROJECTS ARE NOT DEVELOPED WITH EXPO!

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

      Please define “LARGE” project.

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

      To be honest that's simply false. Of course you can't use Expo Go to build large projects, but you can easily use expo-prebuild in them (I do that in all of my real world projects). And just to be fully precise all of my demos work also of react-native-cli 👀