How to Make a Bottom Sheet with React Native Reanimated

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

КОМЕНТАРІ • 48

  • @sefyundercover327
    @sefyundercover327 Рік тому +9

    This is really useful to build UI patterns with reanimated without using another third party lib

  • @DippsoN
    @DippsoN Рік тому +7

    zajebista robota chłopaki, więcej bym prosił o taki content

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

    Reanimated 3 is great, it will be nice to have more videos like this❤❤

  • @TheDento123
    @TheDento123 Рік тому +6

    Cool! It'd be nice a tutorial on how to create a bottom sheet with scrollable content if it exceeds the screen height. That's a challenge that I'm facing at work right now

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

    Awesome animation, outstanding tutorial 🎉

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

      Good to see you here 😊; following your tutorials for these things

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

    High quality tutorial, very helpful, keep going guys 🙌

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

    Thank you for sharing!! Please keep adding more incredible tutorials :)

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

    This is amazing! Please keep doing ❤

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

    Just subed;
    Please upload more often and use typescript for a change 😊

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

    cool!, I'm waiting for more

  • @АлексейКудряшов-п8ц

    This is really cool tutorial, thanks!

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

    oh, you started to make video guides, it's cool

    • @SoftwareMansion
      @SoftwareMansion  Рік тому +5

      if you like it, we'll keep it up! Tell us what would you like to see next!

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

      ​@@SoftwareMansionkeep it up sir, maybe another tutorial like swiping a screen to left to go back previous screen

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

      ​@@SoftwareMansion i can propose to realise the drad and drop, once i was implementing it, but i had small problem with resizing. For example four images on the screen (two column and two row) and 4 blocks on the bottom in one row. When you tap and hold image, it become like small circle and move to bottom block, and onEnd event if image in block area it drops in the block, otherwise move to the initial position. I had a problem with the circle after press ad hold sometimes it resizes to incorrect position

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

    Looks promising and very simple, if done by an expert. I didn't understand most of it, although I have done some work with Animations in ReactNative, following the official docs and examples for Animated Views. I will have a deeper look into your tools, I guess.

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

    This is very good tutorial, thanks!

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

    More like this, please!

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

    très bien fait, merci

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

    great tutorial! keep them coming please :)

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

    awesome! This is exactly what i need

  • @collinsk8754
    @collinsk8754 5 місяців тому

    Excellent 👏👏

  • @jhonathanmaia386
    @jhonathanmaia386 6 місяців тому

    Nice and simple, but I have a question. When using react navigation the bottom sheet would not cover the tabs/headers. Do you guys have a tutorial on how to create one that lives "outside" the app?

    • @jhonathanmaia386
      @jhonathanmaia386 6 місяців тому

      Never mind, just figured haha Good tutorial though! Well done

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

    This is very interesting, 🤔🤔 how can we get only the charts that are on the screen; which API or magic methods can be used!? 7:22

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

    thank you for this tutorial

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

    Video idea to messure onLayout component then present it would be good ?

  • @ChungKang
    @ChungKang 9 місяців тому

    awesome

  • @sdsim1
    @sdsim1 11 місяців тому

    Thanks!!😊

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

    it looks like you use dracula theme, what Vscode theme you are using ?

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

    What about handling keyboard appearance

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

    Amazing, It Would be very helpful If u create a tutorial on how to create modal, Same like react native modal

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

      Because right now we can't show toast on top on react native modal🥲

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

    although i'm curious how could you find out and animate only those messages that are visible. if there are many messages, the animation would take a long while

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

    Awesome❤

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

    Thank you! It's great stuff. By the way, can someone help React Native Bottom Sheet to work on web?

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

    Cool. 🎉

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

    hi thanks for the video can you make a video on google and facebook login/signup integration or phone pay and gpay integration this type videos are not available on youtube as a beginner we need more videos on this type topics
    react native cli...

  • @hamzabenaddouidrissi6606
    @hamzabenaddouidrissi6606 8 місяців тому

    does it work in the web

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

    Wait wait wait. withTiming can do colors??? 😱

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

    Nice

  • @audunhilden
    @audunhilden 4 місяці тому +1

    really good video, but it would be better if you coded it with us instead of magically teleporting all the code througout the tutorial! :D

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

    Bottom sheet make

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

    Cancelled