Skeleton Animation in React Native with Moti

Поділитися
Вставка
  • Опубліковано 9 лис 2024

КОМЕНТАРІ • 34

  • @psychoder3638
    @psychoder3638 Рік тому +1

    good to have you back!

  • @lucasveloz2028
    @lucasveloz2028 Рік тому +3

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

  • @TalesIagoBatista
    @TalesIagoBatista 11 місяців тому +2

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

  • @dananjayachathuranga7113
    @dananjayachathuranga7113 10 місяців тому

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

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

  • @inamulhasans9461
    @inamulhasans9461 Рік тому +1

    Great video helps a lot 🎉

  • @dr34m94m3r
    @dr34m94m3r Рік тому +2

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

  • @fabrizia5777
    @fabrizia5777 Рік тому +1

    Super useful 💯

  • @umarmughal5554
    @umarmughal5554 11 місяців тому +1

    Please create shared element transition video

  • @s_5526
    @s_5526 10 місяців тому

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

  • @vinhandev
    @vinhandev 10 місяців тому

    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 10 місяців тому

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

  • @nehat786
    @nehat786 10 місяців тому

    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?

  • @hubesh716
    @hubesh716 Рік тому +2

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

  • @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 😁

  • @SRRAIN
    @SRRAIN 10 місяців тому

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

    • @Reactiive
      @Reactiive  10 місяців тому

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

  • @paysnug4470
    @paysnug4470 10 місяців тому

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

  • @wisdomelue
    @wisdomelue 7 місяців тому +1

    moti dosent work in expo go right?

    • @Reactiive
      @Reactiive  7 місяців тому

      It does! This example is made with expo go

    • @wisdomelue
      @wisdomelue 7 місяців тому

      @@Reactiive thank you🥂

    • @wisdomelue
      @wisdomelue 7 місяців тому

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

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

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

    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  Місяць тому

      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 11 місяців тому

    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 11 місяців тому

      Please define “LARGE” project.

    • @Reactiive
      @Reactiive  11 місяців тому +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 👀