Bottom Sheet React Native | Expo Tutorial 2022

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

КОМЕНТАРІ • 49

  • @sdinan
    @sdinan 8 місяців тому +1

    Thank you for the tutorial! Couldn't get my layouts to work right & this instantly solved my problems :)

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

    This video and your explanation has helped me immensely in my project Beto. Thank you.

  • @Redstarcrew
    @Redstarcrew 2 роки тому +1

    thank you for the video man, i really appreciate these small react native projects. Hope you continue making these

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

      thanks! I will be uploading more content soon!

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

    Thanks man and your english is very clear.

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

    I just looking which video will be more helpful and easier to learn. I watched more videos for this Bottom Sheet on React Native. But this one is just awesome and brother please keep it up new contents every single days. Awesome bro take love from Bangladesh

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

    Hi Beto, great video, thanks for this tutorial. Your English is great no worries.

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

    What about you use the backdropComponent for adding opacity when the BottomSheet Opens.

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

    Awesome tutorial

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

    How to override navigation header with backdrop, can you make video on it?

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

    run
    expo start -c
    if you get cannot read toString() of undefined, it clears the cache before starting, it's a bug with react native reanimated

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

    good sheet! 🤗

  • @PauloIcaro-pg2xk
    @PauloIcaro-pg2xk 10 місяців тому

    Best! 👍🔥

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

    what did you use for the alert

  • @ShivamPanchal-b6q
    @ShivamPanchal-b6q Рік тому

    how can we make a one bottom sheet common for whole project and send inner contents using props

  • @nikkit.1079
    @nikkit.1079 Рік тому

    Are you able to change the border top left and border top right radius? I'm trying to use style and backgroundStyle but it doesn't work

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

    Hey, is there possible to open bottom sheet when it close and swipe up in any place to open it ?

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

    Top d+ Beto!

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

    does it work for cli project

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

    Thank you

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

    Nice video, thanks

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

    How to dismiss bottom sheet after click on outside??

  • @QuanNguyen-zi7yl
    @QuanNguyen-zi7yl Рік тому

    Is react native bottom sheet library available on React native CLI ?

  • @qwer-dn2wq
    @qwer-dn2wq 2 роки тому

    Can I use it in Javascript not typescript?

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

    Hello there. I get something odd which I cant seem to resolve. When I try to console log
    my sheetRef, it return a boolean. Is this normal?
    Thank you. Great Work :)

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

    how do you load this page with bottomsheet in a closed state?

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

      figured it out. index={-1}

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

    I noticed in your spanish channel that you created a chat application. Would be really appreciated if you could make the same app but in english

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

    how could I close the bottom tab when I press outside?

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

    is there a way this can work in js?

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

    How to show bottom sheet above bottom navigation ? Thanks Sir

    • @codewithbeto
      @codewithbeto  2 роки тому +1

      I think there is a property in the bottom tab that allows you to hide it. Maybe this can help you stackoverflow.com/questions/56745881/how-to-hide-bottom-navigation-bar-on-a-specific-screen-in-react-native

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

      in your _layout.tsx just wrap your stack in BottomSheetModalProvider, and then use bottom modal anywhere else

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

    Awesome video +++++++++++++ 😀

  • @armisael2k
    @armisael2k 2 роки тому +1

    Cómo puedo hacer que al abrir la app el bottom sheet no sea visible?

    • @electrodiux-pbh
      @electrodiux-pbh 2 роки тому +1

      Añade a BottomSheet la propiedad "index" a -1,

  • @lecongduong6056
    @lecongduong6056 2 роки тому +1

    i have an error : function component cannot have string refs. any solution

    • @rizanurfatrisyam1177
      @rizanurfatrisyam1177 2 роки тому +1

      make sure you use typescript , is not remove from hook useRef

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

      @@rizanurfatrisyam1177 i used js, can i use this

    • @zillahmwimali2857
      @zillahmwimali2857 2 роки тому +1

      if you are using Javascript simply decaler the useRef() function, which should look like this
      const bottomSheetRef = useRef();

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

    Why not use backdrop?

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

      This package has more features but for this specific functionally backdrop could be a better fit, I'll try to make a video on that

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

    do expo and pouchdb
    I dare you

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

    run
    expo start -c
    if you get cannot read toString() of undefined, it clears the cache before starting, it's a bug with react native reanimated