How to Present a React Native Bottom Sheet
HTML-код
- Опубликовано: 16 окт 2023
- In this tutorial, we explore how to seamlessly integrate a bottom sheet into your React Native app using the great bottom sheet package by Gorhom. I walk you through the installation process, and configuration, and show you how to present the sheet as a modal or shared component in your React Native app!
🔥 Build React Native apps FAST: galaxies.dev/
🪐 Read the tutorial: galaxies.dev/react-native-bot...
#############################
❤️ You can also find me on:
Twitter: / schlimmson
TikTok: / simongrimm_
Instagram: / simongrimm_
#############################
Chapters:
00:00 Intro
00:53 Bottom Sheet Basics
06:34 Customizing the Bottom Sheet
15:03 Bottom Sheet Components
17:47 Shared Bottom Sheet Modal
29:22 Outro
#reactnative
#bottomsheet
#codetutorial 
Наука
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.
Cool stuff. Exactly what I was looking for.
Happy to help :)
very well simplified tutorial
love your approach to tutorials, this is the second one that has helped me
Thanks.Great video
Awesome 🎉...Thank you for this tutorial
My pleasure 😊
thank you for this tutorial. It is helping a lot in my project. 😁 Thank you so much.
You are welcome!
Great Tutorial, thank you!
Glad it was helpful!
Cool, this is what I was looking for! :)
Happy I could help!
Cool stuff 😊❤ I love it 🥰
Thank you 🤗
Great video!!!
Glad you liked it - would be awesome if you could share it!
Thanks sir Simon for this tutorial, been looking for a clear and concise tutorial of this package. Cheers! :)
You're very welcome!
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
Thanks for the idea, definitely something I will explore :)
Very Good Explanation!!! Can you share the vscode extensions you use for developing react-native apps
24:21 "I really like this spread ... here " me too 😂😂😂 your little laugh made me laugh together too
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!
thanks for you so much 😊👍
Happy to hear - share the video if you enjoyed it ✌️
Good stuff!
Glad you enjoyed it
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 😊
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!
great video
Glad you enjoyed it!
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.
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 .
Thanks for leaving your solution!
Great Great !!! I was trying around this lib and messed up everything :( ... After watching your video everything solved ... Thanks man !!! :)
So happy to hear!
You are just awesome
Plz make a video how to create a sidebar in native
Thanks mate, will try!
Hi! How do you trigger the keyboard to open?
Hello, can you help me? after updating react-native to 73.0.1 I got this error cannot read property version of undefined
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
how do we make the statusbar inside the backdrop ?
Become an Expert React Native Developer @ Galaxies.dev and join our space crew 🚀
Hello
Mr. Simon
can you suggest an installation and setup video for react native from your channel or some other?
I'd follow the Expo docs!
@@galaxies_dev
I mean for windows any tutorial fro setup and installation
I know about the docs
backdropComponent doesn't overlap Navigation header, im facing this issue
Have you tried displaying the BottomSheetModal over an expo-router modal yet? Would be an important caveat to mention.
Haven't tried, maybe you should settle on one type of modal in your app!
I have error with it. This works with JavaScript or only TypeScript ?
Good video! Hey, What version of react-native, reanimated and gesture-handle use? I try install with different version and no successfull on android ((
Reanimated 3.3, gesture-handler 2.12, react-native 0.72
@@galaxies_dev thanks a lot!
I want bottom sheet to appear when background fcm notification comes any solution or suggestion?
Nice video! do u know if it works for expo web too?
I haven't tried yet :/
Hi, what tool do you use for drawing on your screen?
Think it's called Screenbrush on Mac app store
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?
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.
I think it should work fine on Android as well!
please can you help me the modal should not be open by default unless i call it to open please what can i add
In that case you are looking more for a modal - we cover that at the end of the video as well!
I made it work by setting index to -1. Like this: index={-1}
Customize reusable modal in react native
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 😭
same here it doesnt work
@@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.
PanGestureHandler error and cannot use the BottomSheet.
Same error, did you find a solution??
@@aakrisri525 no. I just let it for now
My BottomSheetModal is mounted before I called, Did you know why?
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.
how to dismiss BottomSheetModal, when user touches backdrop area?
need to set `pressBehavior` as `close` for `BottomSheetBackdrop`