Chanel Scroll Animation - “Can it be done in React Native?”

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

КОМЕНТАРІ • 50

  • @danitk8888
    @danitk8888 3 роки тому +22

    I´m not even a RN dev I just love your accent lol

  • @eaglebirdiepar
    @eaglebirdiepar 3 роки тому +22

    Intro next level!

  • @LogansRun45
    @LogansRun45 2 роки тому

    Thank you! My design skills have always been weak. You have helped me "step my game up". Can't thank you enough. When I have some time to breathe, I'll enroll in your course.

  • @nmrtns
    @nmrtns 3 роки тому +2

    I came for the accent ♥ but stayed for the code. Superb William!

  • @midorekaz5023
    @midorekaz5023 3 роки тому +1

    You are ze savior of my life! Thank you for the incredible content! Greetings from ze beautiful Tunisia❤️

  • @CaspianZhao
    @CaspianZhao 3 роки тому

    How to calculate “input range/output range” whether a video tutorial can be published. you calculate very fast it is magic, I love your video

  • @Thikondrius
    @Thikondrius Рік тому

    Salut Willy, merci pour cette vidéo, j'aime beaucoup ton contenu, c'est vraiment utile :)
    I think there is a little "mistake " at 8:52, but we don't see it in the video due to the chosen values for the images sizes, which make it work ^^. It works well but only if the max height for the image is the size of screen divided by 2. And it's exactly what has been chosen here ^^
    So, t make it work no matter the images size that has be chosen, and to make sure that the last image is fully expanded and at the very top when we reach the end of the scroll view , we have to do an adjustment.
    The contentContainer height should be equal to the total of images ( in full size) + the remaining space at the bottom (which is the size of the screen minus the size of a fully expanded image)
    Which gives us :
    contentContainerStyle={{height: (MAX_HEIGHT* items.length) + (Dimensions.get("screen").height - MAX_HEIGHT) }}
    Thank you :)

  • @alfonsolasa2495
    @alfonsolasa2495 3 роки тому

    Thanks Williams! Nice video, I learn a lot !!!

  • @visakeswaran3620
    @visakeswaran3620 3 роки тому +1

    This is great. Thanks

  • @abhay8437
    @abhay8437 3 роки тому +2

    When did this intro drop in, damn

  • @RamKumar-nm5lr
    @RamKumar-nm5lr 3 роки тому

    I would like if you can show yelp snap to top/bottom/middle animation. Please add a video for that if possible. Thanks!!

  • @kashifwahaj
    @kashifwahaj 3 роки тому

    excessive number of pending callbacks ... this error comes when I use multiple nested reanimted components..
    please help

  • @fernandorojo6311
    @fernandorojo6311 3 роки тому +1

    Great video! My first thought on the contentContainerStyle height: shouldn't it be MIN_HEIGHT * (items.length - 1) + MAX_HEIGHT? I. might be missing something here; it's my understanding that all but one of the list items is collapsed.

    • @fernandorojo6311
      @fernandorojo6311 3 роки тому +2

      I guess the downside of this is that you can't bring the last item to the top.

    • @wcandillon
      @wcandillon  3 роки тому +1

      I confused myself as well with this and also got lucky because MAX_HEIGHT is height/2 I feel like

  • @MindPowerShahidSaleem
    @MindPowerShahidSaleem 3 роки тому

    Well explained

  • @KapustaTarasRuslan
    @KapustaTarasRuslan 3 роки тому

    Hello, William! Thanks for hight quality content! I have question. Can we use reanimated 2 on the production or this can make some problems? Thanks!

  • @zedaxer
    @zedaxer 3 роки тому +1

    What plugins do you use for react native?What do you use for autocomplete? Do you have a video about them? Loves from Turkey.

    • @wcandillon
      @wcandillon  3 роки тому +2

      This is the topic of today's video :) Should be available in two hours or so :)

    • @MerciBro
      @MerciBro 3 роки тому

      Also what gloves do you wear(if any, of course)

  • @marco114
    @marco114 3 роки тому +3

    Animation hurts my head.

  • @rajantandan9723
    @rajantandan9723 3 роки тому +1

    Sir please make more videos on react native

  • @overclockedlife7550
    @overclockedlife7550 3 роки тому +1

    I though Johnny Sins made an app at first glance. LMAO.

  • @lucdotdev
    @lucdotdev 3 роки тому +2

    Ton accent me tue 😂😂😂🙏🙏

  • @jfbaro2
    @jfbaro2 3 роки тому

    Thanks for sharing this great content! Would it be possible to do a video about REACT NATIVE *FOR WEB*? I wish you an amazing 2021!

  • @umaralfaruq1304
    @umaralfaruq1304 3 роки тому

    hi sir i waiting for hiding header and top tab like whatsapp can it be done in react native

  • @felipevieira9840
    @felipevieira9840 3 роки тому +1

    Why your iphone smiluatorhas white bezels?

    • @wcandillon
      @wcandillon  3 роки тому

      It's a montage made from recording the iphone screen.

  • @ajlamarc
    @ajlamarc 3 роки тому +1

    anyone get this to work on android? it looks good on iOS but on android it transitions to a black screen when you swipe.

    • @wcandillon
      @wcandillon  3 роки тому

      Sorry about that Anthony, fixed the example on GitHub

  • @jeremiesellam
    @jeremiesellam 3 роки тому +1

    Hey, good job ! I'm testing reanimated 2 on flatlist too and I have a lag due to useAnimatedStyle on each items. I have optimised it by calculating the style when the item is in the screen. It's better but it lag when you scroll many items. Have you a better idea ? Thx

    • @jeremiesellam
      @jeremiesellam 3 роки тому

      I have tested it but it lag on big flatlist :-( github.com/software-mansion/react-native-reanimated/issues/1516#issuecomment-742093945

    • @fernandorojo6311
      @fernandorojo6311 3 роки тому +2

      @@jeremiesellam Yeah, it seems like the solution is to return null derived value for items that are outside of the scrollview. That issue you linked to has some answers too 🤷‍♂️ In general you want to minimize the effort of each item in a React Native list. Try to keep data and styles as plain as possible, and be sure to use React.memo() for each item. It's a bit annoying, but long lists are still very primitive in React Native.

    • @jeremiesellam
      @jeremiesellam 3 роки тому

      @@fernandorojo6311 thx, it's better now, it stay at 55/60 fps on the UI thread and stay at 60 on JS thread with 1000 parallax images (not all scrolled by many)

  • @nicolaska1761
    @nicolaska1761 3 роки тому

    Alors toi tu es francais ! And btw love your channel :)

  • @mdsarfrazkhan3460
    @mdsarfrazkhan3460 3 роки тому

    In android using PanGestureHandler does't animate like ios

  • @glendonphilippbaculio1811
    @glendonphilippbaculio1811 3 роки тому +1

    i cannot seem to see where to download the boilerplate?

  • @avvjt
    @avvjt 3 роки тому +12

    I think you should rename your channel name to " can it be done in react native "😂

  • @MurkBhutto_
    @MurkBhutto_ 3 роки тому +1

    Why dont you work on React Cli? Why expo?

  • @zoaybk
    @zoaybk 3 роки тому +1

    German speaker, sounds like French, looks like American

    • @wcandillon
      @wcandillon  3 роки тому +2

      It's a frenchmen living in german-speaking Switzerland ☺️

    • @TechnicalDhruva
      @TechnicalDhruva 3 роки тому

      @@wcandillon wow

  • @SkillTrailMalefiahs
    @SkillTrailMalefiahs 3 роки тому

    Use Paypal at start-react-native please!