How to Present a React Native Bottom Sheet

[@robinsonsimon5835]

Cool stuff. Exactly what I was looking for.

[@galaxies_dev]

Happy to help :)

[@Furiac.]

love your approach to tutorials, this is the second one that has helped me

[@danielfernandez5709]

Grate tutorial Simon!! Thanks for sharing this content!

[@penguinxed]

Thanks sir Simon for this tutorial, been looking for a clear and concise tutorial of this package. Cheers! :)

[@galaxies_dev]

You're very welcome!

[@galaxies_dev]

Become an Expert React Native Developer @ Galaxies.dev and join our space crew 🚀

[@godsonokezie5570]

Thanks for this Lovely tutorial. Would love to know if this package could be used without the snap points? what if i want the bottom sheet to take only height of its child and not a height based on snap points.

[@godsonokezie5570]

I have found the solution to this, incase anyone else has this same question. All you need to do is set "enableDynamicSizing" to true and ensure you are using a instead of a .

[@galaxies_dev]

Thanks for leaving your solution!

[@rafaelcustodio5496]

@@godsonokezie5570, your comment just save me

[@MarlonEnglemam]

dude, this lib is just amazing. I have to code the very exact component for the project I'm working on, thought it would be a lot of work, but it's actually quite simples, I'm amazed. Thansk for the vid.

[@iam0_o301]

thank you for this tutorial. It is helping a lot in my project. 😁 Thank you so much.

[@galaxies_dev]

You are welcome!

[@willdunertm5047]

I would love a tutorial of headers animation on scroll, like twitter or reddit, where tapping the header scrolls up to the begining. Great video

[@galaxies_dev]

Thanks for the idea, definitely something I will explore :)

[@SmitShah-sv7hc]

Very Good Explanation!!! Can you share the vscode extensions you use for developing react-native apps

[@muratyasar]

added to my gold list :)

[@4nt1g3n]

Awesome 🎉...Thank you for this tutorial

[@galaxies_dev]

My pleasure 😊

[@gulammustafa2865]

How can we add a semi-transparent backdrop in this bottom sheet because sometimes it feels bottom sheet is not open when the background is also white.

[@ntro-p]

Have you tried displaying the BottomSheetModal over an expo-router modal yet? Would be an important caveat to mention.

[@galaxies_dev]

Haven't tried, maybe you should settle on one type of modal in your app!

[@danbennatan2245]

Hi! Great video. I am getting struggled with backgroundComponent property of BottomSheetModal. I want to paint the background color with Linear Gradient component, and this property does not seem to work at all, even with simple "red" color. Any idea? That would be super helpful. Thanks!

[@mogorhom]

very well simplified tutorial

[@raymondmichael4987]

Yes this wa quick, 3 detailed use cases in under 30 minutes, nicely done ✅ buddy 😊. Please, do you have a tutorial to configure navigations, drawer, stacks and tabs; using typescript I find it hard to wrap my mind around it. Would like to know the type of routes present and other arguments needed per route by using editor suggestion. Please point to one good tutorial or create a tutorial about. Thanks buddy 😊

[@galaxies_dev]

We have a course on galaxies.dev about both React Navigation and Expo Router and we always use TS - But I will also try to work on something for this channel!

[@kshitijkhot1401]

Great Great !!! I was trying around this lib and messed up everything :( ... After watching your video everything solved ... Thanks man !!! :)

[@galaxies_dev]

So happy to hear!

[@tahaali9543]

I am not getting about dismiss where to use and how to hide bottom tabs. Can you please explain how it work to hide bottom tabs while opening bottom sheet modal

[@bhavishyapatel700]

Thanks.Great video

[@jadeskarlet]

i need help it seems you cannot scroll in the bottom sheet. you can't use scrollview or flatlist, scrolling just isn't possible in it can it be solved?

[@przemekdanysz53]

Cool, this is what I was looking for! :)

[@galaxies_dev]

Happy I could help!

[@ChungKang]

Great Tutorial, thank you!

[@galaxies_dev]

Glad it was helpful!

[@fgauna12]

I've used this library but it has some bad bugs like the one in 17:23. And on small devices the bottom sheet collapses with text inputs and keyboard showing. Also, it might be due to the fact that it supports Reanimated 1 and 2 but not 3. The maintainer doesn't seem very active anymore and some open issues on GitHub are just sitting there. :-(

[@urxxxxxx]

hi, thank you for your videos. But i tried on the new expo router tabs, the bottom sheet seems doesn't work. It won't display.

[@Flamebamboo]

Hey same how did u do fix it?

[@tttadmin7508]

I want bottom sheet to appear when background fcm notification comes any solution or suggestion?

[@yashrajysjdsnvxje-lv5ez]

I am having issue while creating a custom component for bottomsheetmodal, I am following the same step but in js file and getting error as present is not a function, please help how to fix it

[@DariaBrinza-w7u]

Hi! How do you trigger the keyboard to open?

[@mfaizhussain7]

Hello Mr. Simon can you suggest an installation and setup video for react native from your channel or some other?

[@galaxies_dev]

I'd follow the Expo docs!

[@mfaizhussain7]

@@galaxies_dev I mean for windows any tutorial fro setup and installation I know about the docs

[@spnzchTV]

I have error with it. This works with JavaScript or only TypeScript ?

[@ImGamerGuy]

backdropComponent doesn't overlap Navigation header, im facing this issue

[@ma15jiachi]

Hello, can you help me? after updating react-native to 73.0.1 I got this error cannot read property version of undefined

[@raymondmichael4987]

Cool stuff 😊❤ I love it 🥰

[@galaxies_dev]

Thank you 🤗

[@Amitkumar-ps1dt]

You are just awesome Plz make a video how to create a sidebar in native

[@galaxies_dev]

Thanks mate, will try!

[@exoticcoder5365]

24:21 "I really like this spread ... here " me too 😂😂😂 your little laugh made me laugh together too

[@DebasmitaPradhan-r3b]

This usefull ❤

[@chabelbossa]

I'm having an issue in my app where the bottom sheet only takes up the available space, which prevents me from placing other components on the page. How can I fix this?

[@bereketg5609]

remove the outer view which is found outer of

[@hugopinho9534]

Great video!!!

[@galaxies_dev]

Glad you liked it - would be awesome if you could share it!

[@kingnothingfpv2303]

The problem with the BottomSheet is, you can not have it initially closed... if you set index = -1 it comes initially closed... but when you try to open it, it does not expand anyway... can you please show how to do that...

[@kingnothingfpv2303]

If you set index on BottomSheet to -1 to close it initially... If you only have 1 snapPoint (lets say 50%) it won't work... it does not open the bottomsheet whenever you trigger ref.current.expand

[@emanuelmejia4525]

My BottomSheetModal is mounted before I called, Did you know why?

[@Lee-r1w1s]

Hi, what tool do you use for drawing on your screen?

[@galaxies_dev]

Think it's called Screenbrush on Mac app store

[@AssakurA1]

Good video! Hey, What version of react-native, reanimated and gesture-handle use? I try install with different version and no successfull on android ((

[@galaxies_dev]

Reanimated 3.3, gesture-handler 2.12, react-native 0.72

[@AssakurA1]

@@galaxies_dev thanks a lot!

[@sweetnovember75]

Good stuff!

[@galaxies_dev]

Glad you enjoyed it

[@shabastech]

thanks for you so much 😊👍

[@galaxies_dev]

Happy to hear - share the video if you enjoyed it ✌️

[@Akbar-b1b]

great video

[@galaxies_dev]

Glad you enjoyed it!

[@woorix]

how to dismiss BottomSheetModal, when user touches backdrop area?

[@woorix]

need to set `pressBehavior` as `close` for `BottomSheetBackdrop`

[@HashirQureshi-i8p]

how would i close it by tapping outside the bottom sheet

[@jadeskarlet]

i think you will have to use tochablewithoutfeedback on that area and set the onPress to close the bottomsheet. haven't tried it but try and see

[@aslamiliyas7703]

please can you help me the modal should not be open by default unless i call it to open please what can i add

[@galaxies_dev]

In that case you are looking more for a modal - we cover that at the end of the video as well!

[@mariamaspoli]

I made it work by setting index to -1. Like this: index={-1}

[@chriscranston6117]

hey simon, is this working with android do you know? the repo says "seemless keyboard for IOS and android" but modals are different on android.

[@galaxies_dev]

I think it should work fine on Android as well!

[@bread_winner]

I've been trying to use this package for the last week on a fresh expo app, and it just does not work. It keeps erroring on launch, saying '_measureFabric' is not defined. I've tried everything but no luck, and I couldn't find any help online either. If you or anyone knows how to fix it, please help 😭

[@alwazkazi1916]

same here it doesnt work

[@bread_winner]

@@alwazkazi1916 If you’re using bun, make sure you are using the latest version. My error happened because my version of bun had a bug with installing packages, upgrading bun to the latest version fixed all my issues.

[@amarnathnani3950]

Customize reusable modal in react native

[@cornkobcob]

Vielen vielen dank!

[@mechwar]

PanGestureHandler error and cannot use the BottomSheet.

[@aakrisri525]

Same error, did you find a solution??

[@mechwar]

@@aakrisri525 no. I just let it for now

[@bereketg5609]

wrap your entire app/the layout file found in your app folder with this {your component}

[@mjeevansai9011]

Any solution

[@mechwar]

@@mjeevansai9011 No. gave up. now creating PWAs that are amazing.

[@PiyushKhade-q9c]

hey, while following the code i was trying, const handleClosePress=bottomSheetRef.current but the 'current' is not showing and so its throwing error please help. by the way nice work.