How to Make a Bottom Sheet with React Native Reanimated

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

КОМЕНТАРІ • 49

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

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

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

    This is amazing! Please keep doing ❤

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

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

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

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

    This is really cool tutorial, thanks!

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

    cool!, I'm waiting for more

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

    More like this, please!

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

    This is very good tutorial, thanks!

  • @Ro_dolfoSilva
    @Ro_dolfoSilva 11 днів тому

    Awesome!

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

    très bien fait, merci

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

    Excellent 👏👏

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

    great tutorial! keep them coming please :)

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

    awesome! This is exactly what i need

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

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

    thank you for this tutorial

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

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

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

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

    Thanks!!😊

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

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

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

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

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

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

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

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

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

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

    Awesome❤

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

    What about handling keyboard appearance

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

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

    awesome

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

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

    Cool. 🎉

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

    does it work in the web

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

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

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

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

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

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

    Nice

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

    Bottom sheet make

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

    Cancelled