How to Present a React Native Bottom Sheet

let me show you the easiest way to display a bottom sheet with react [Music] native hey everyone what's up this is Simon from galaxy. Dev back with a tutorial on how to integrate a bottom sheet in your react native application because yes you can do it manually you can use reanimated you can use gestures but there's actually a package that you should use instead and that is the gorom bottom sheet it is an epic package that includes everything you need to create a fancy bottom sheet so we're going to go through how to set up a basic bottom sheet then we're going to control it from code we're going to see how to create a custom component that we can reuse and finally we're going to also talk about how to use it as a model above the rest of our application so that should hopefully cover all your bottom sheet or bottom model whatever it might be needs link to the tutorial as always right below the video so now let's dive right into it all right so let's see how we can integrate create a bottom sheet in our react native application I started with the tabs template using the Expo file based routing right now it's actually not too important you could also use the template for typescript um but most importantly we have to install the gor home bottom sheet so this is the library we want to use an epic library with 5K Stars so definitely something and probably the best react native bottom sheet library that we can use with a lot of options um so we're going to explore a few of them and start with the basics but before that make sure you also install react native reanimated and the gesture Handler and to use that we're going to have to go to our Babel config So within the Babel config we need to include the reanimated plugin and it has to be the last element here in oops uh in the array of plugins and once you addit that you also have to uh clear your cache because usually that results in some problems so you can do npx Expo start- C or in my case I actually used bun today to install this so I'm running bunx Expo start- C so then I can follow this up with I to open the iOS simulator and then I should have my application here on the side where we got our bottom sheet and hopefully also a file based routing with the file based routing in place let's quickly add a new page so I'm going to add a third tab I'm going to call this three react Nat functional export as always in place and then we immediately have our new page down here I will also simplify this layout a bit so uh I updated this before so it's using the color theme and all the cool things from Expo I just want to make this a bit easier for us to see what's going on so we just have a tap we have three tabs all use the same icon and just a different name so now we got our Tap bar and we can Implement three cool cases of the bottom sheet let's begin in page number one which in this case I think is the index page right index then we got two and then we got three so that's the plan for today um maybe we just going to check it out here so for the usage here is the pretty much most basic example actually there's even something we can make uh easier uh let's start by bringing in some Styles and I will get rid of The Styling here so I'm going to use use my own Styles I'm going to make this view a bit clearer and probably let's do it manually I think that's cooler right um I just want to strip all of the stuff from Expo away so we can really focus on our own application here we go this is a blank view now I want to display a bottom sheet in this view so I go ahead with the bottom sheet and I have to be careful here because Visual Studio really wants me to use the wrong types it's not this it's it's not even giving me the right option anywhere close so I don't know why uh but this is certainly not the import so make sure you just import from bottom sheet within the bottom sheet we can Now display our content so let's just put anything inside that one uh a view this is awesome I'm going to close that view and then I'm going to close the bottom sheet now let's see this by default will give an error because we have no snap points the snap points are where in your page or in your your view here the model will snap so usually you define like you can scroll until here or you can slide it up here or here and you're going to give those snap points as an array of uh percentages so we're going to memorize these using use memo and I'm going to Define it's going to snap at 25% of the view 50 and 70 so I'm going to pass this now to the bottom sheet so snap points go here and then let's see text strings must be rendered with a text that's true I made the most basic uh issue here today h I love it okay hit save and voila we got the bottom sheet in place and you see it is stuck here this should be 25% so I got a really nice handwriting I can then drag this up and release it it's going to be at 50 if I go higher it's going to be at 70 we can't go any higher because 70 is currently our maximum I could now of course add something like 95% up here could I add 100 I wonder let's see yep we can have 100 as well uh so that would of course be the maximum of uh snap point value whatever you want to call this okay cool um also we can Define on which snap point this thing starts so let's say I want to start at the index one instead you see it's starting up here that's a different story so now it's using index number one and because you're developers you know this is index number one right this is zero here and this is one and this is two and three just for reference okay cool um that was pretty easy wasn't it and this is the the basic way of using um the bottom sheet now let's make this a bit cooler by giving these text and the view elements some styling and voila you have an awesome bottom sheet with a nice headline included now right now I can't really close this so it kind of stays open all the time that might be the right fit for you or it might not and we're going to see different options now how we can use this bottom sheet in a real world application but just wanted to show you this is really the bare minimum of using a bottom sheet and I think that's really like really easy I've seen a lot more complicated use case for libraries to include them so kudos to the creator of the bottom sheet um just getting started is really really easy and we're going to see also the features additionally on top are really powerful so uh let's see how we can control this Beast um for that we definitely want to have a reference and I want to have my ts caps log on so I'm going to call this bottom sheet reference and of course I use use rev for that uh with a bom sheet and initialize it with null and of course I'm going to set my ref here oh thanks Visual Studio code you're so helpful today you're so helpful uh not I'm also I want to can I Can I toggle uh copilot off yeah disable globally not today copal not today okay so let's add a few functions and buttons um let's say we want to handle close press so we want to close the uh bottom sheet and we can do this by using our ref now so the bottom sheet ref current and we're going to use close so there's actually not a whole lot we can do on the bottom sheet there's close collapse expand force close snap to index and there are pretty much self-explanatory so close we'll close it collapse will I think go to the closest uh snap Point expand will go to the topmost snap point and then you can also snap to a specific uh snap index okay this could be handle close press and just like that we could have um something called handle Open Press and that would use expand okay so to use both of them we could just introduce two buttons in our view button from react native and then let's see um I actually don't want to have justifi content Center anymore I want to have them at the top thank you so open whoops going to put it totally to the top close oops is completely closing it down actually to zero uh but I can still bring it up if I want to um so these are the first few options we can use then uh as I said we could also have collapse so let's see how coll uh collapse looks in action it goes to the like the closest uh to the minimum of the snap points that would be collapse in action now additionally we might want to also snap to an index so snap to index would take a number and I would call Snap to index with that index so we have a few uh index elements we could probably I think we have one 0 one 2 three we have three right so let's add a third one here and then we can snap to zero snap to One Snap to two oops and snap to three so all of this works really really great there is also a hook you can can use but you can only use the hook from the bottom sheet once you're in the bottom sheet so that's bit complicated or a bit more complicated then it can work if you have like your own custom component and we're going to see that in action as well pretty soon if you have tips and tutorials just like this you will love what I've created inside galaxies. def on Galaxies you will find all the code more tutorials and specific courses about learning react native fast so go check it out at galaxies. and use the code warp speed at the check out to get 10% off your first 3 months of Galaxy's Pro also don't forget to hit the like And subscribe button below so you get updated about the new videos live streams and everything coming to this channel now a few more options that we can Define on the bottom sheet to give you an example of how powerful it is and how you can make it really yours let's start by enabling pen down to close so if you enable pen down to close right now you see I can pen this down but it will always stick to my um snap point uh Z which is 25% if I enable pend down close oops it's away it's gone so um you also notice how this is using the gesture Handler under the hood which is pretty cool because I actually did not wrap my hand with the my app with the gesture Handler that was kind of confusing to me I don't know exactly why this works because usually I should have to put like in my top uh root layout have the gesture Handler from the package but I haven't so I don't know magic all right um what else can we do we can style this so this thing up here is called the indicator in in most bottom sheets and you can usually style either the indicator you can also style this area up here where you see a tiny little Shadow and also here a round border radius so if you want to style that there is the handle indicator style and let's say I give it this white color then you won't see it anymore but if I now give the whole bottom sheet a nice dark background color we see that ooh this comes nicely let's just make my color down here into white then ooh I got a fancy bottom sheet look at that ah I love to play around with that okay so we can style pretty much everything we want you can of course also style your inside content container but if you give a background styling to the whole bottom sheet you're going to Target the whole thing including the area up here and by the way if you don't want that indicator just pass display nonone uh so that you can get rid of that what we don't have right now is a backdrop so sometimes you want to also have a backdrop component which is also more important once we talk about the model but I want to show it right here already because there's actually a handy function to render a backdrop uh I think I found this right in the documentation of the package so we're going to going to use callback here as we want to uh also kind of memorize this function oh did I yeah I did the right import so we render a backdrop with this function um and this will return a bottom sheet backdrop which is actually a component from the package so this is pretty nice you don't have to do it yourself but you can Define when it appears and when it disappears so uh in my case I say it should appear right on index zero and disappear at index minus one which means the sheet is not uh visible so in order to render this now we just have to pass this as the backdrop component to my bottom sheet so I'm going ahead with back drop component oh there was actually a background component as well that's interesting uh and I'm going to pass render backdrop and we see now we got that nice backdrop and as far as I know and I click the backdrop right so that's the default behavior of the bottom sheet backdrop once you click it it will close the modal again could I now also say this only appears on index one let's see uh let's see yeah no um well yeah and no it kind of yeah it I I would play around with that value probably so yes it appears only on index 2 but actually it appears before already as we can see so if I snap to zero we already see it but it only comes fully becomes fully visible at that appears on index so yeah I could probably change this to be zero so in that case yeah then it would be gone here yeah so I think I can think yeah if we make it like this that would mean no backdrop yet but if I then open it more if I go to one or two or something else then we're going to have the backdrop so um cool little customization and great that we have this custom component and speaking of components there are some cool components included here look at this list the bottom sheet view scroll view flat list and all these are wrappers around the usual components you're used to like a flat list a section list or whatnot uh and they make it easier to work with those components in the bottom sheet because there are sometimes um a few specific cases I just want show you one because I found that one to be particularly interesting and that is the bottom sheet text input so uh let me add a bit of styling down here for an input field nothing fancy I think this actually comes straight from the documentation of the bottom sheet as well and I'm going to place this here I think here so then I add the bottom sheet uh text input from gorom bottom sheet I'm going to pass my my own Styles so styles do input um unexpected token yeah Simon messed up the syntax no problem no problem uh let's see do I have to refresh to get that uh oh yeah that display is now at the bottom right down here so I'm going to change the flex of the content container so now it's up here okay this is my input field nothing too fancy but uh let's make let's make a a test here I'm adding a text input from react native using the same Styles um just for reference I'm going to command this out Okay cool so now let's refresh this and if I go into this and type and toggle the hardware keyboard you see what happens that's a bummer that's really something you don't want to have and that's a common problem with react native applications uh and text input Fields you kind of want it like this this right you want your users to still see that input field so you can manually control the keyboard and yada yada yada or you could just use the bottom sheet text input which exactly handles this scenario so let's do this again I'm here and it s slides right up um actually it slides always completely to the top but I guess we could control that with some uh some styling as well so you see I go in into this and it slides right up so that's the beauty of these components that you can use so highly recommend you also um check out the component list here in the documentation if you want to use a certain scroll view if you want to use a flat list or um specific footer or text input element now let's continue um in many cases you don't only want to have a a component or a bottom sheet here in one page you want to actually something that you can reuse across different pages so let's see how we can set this up and include this in our application because I found this to be quite uh important let's say quite important so I'm going to add a new file here I will call this custom bottom sheet. TSX not the perfect name but for now it should work um what I want in here is re native function con custom bottom sheet now to that bottom sheet are going to have to pass a few things so we will have the snap points defined in here that's not a problem we can just do what we did before and I can pretty much copy what I had for the bottom sheet as well so I'm going to return that um add the import now where do we get the reference for that bottom sheet that's the question and that is where we have to get a bit more into react World um let me remove this and let me quickly add some styling so we can fix the other problems that we might have yeah stylesheet needs to be added as well from react native and render backdrop yeah let's let's say we don't render a backdrop for now so the only problem that remains is the actual ref and we can pass ref to our custom bottom sheet so we could say we have props and we have a ref um we could type this as any and I would probably would this work like this um I could say props any and rev any but I really don't want to show you bad typescript practice like yes this could work uh but you don't really want to do it like this uh also this is one too many what you want to do is we want to use a forward ref so pretty soon you would otherwise encounter a problem because it's not allowed to pass a ref to your component um and the arrow will say something did you forgot to use forward ref and yes we can use forward ref here now and then we can have our props and the ref passed through now if you're also cool and you want to use typescript correctly you can simply Define an interface for uh the props let's say I'm going to pass a string here and then I will also add a type ref which is a bottom sheet cool and with that in place I can type this correctly now I can use use ref and props and then I don't have to use any in here anymore anymore uh okay let's get rid of this and now if you hover over it you're going to see that props uh should have a title so let's replace the text we have in here and then we see this in action props do titles so we got the typings working in our application okay and also the ref that pass is now strongly typed and we see this is a forward ref of a bottom sheet cool so let's see this in action um let's probably go to page two and on page two I'm going to remove this and I'm going to add my custom bottom sheet I really want to use this in the most easiest way can we add all missing Imports yeah why don't you add all missing Imports just add the text you know some days it's like why Visual Studio why okay here is my custom bottom sheet I can now also pass a title so cool much sheet to this t uh bottom sheet and let's see if I now go to t two voila it immediately opens so I have now a reusable bottom sheet component that I can integrate pretty much everywhere in my application where I need it and I can also feed in some data so if you wanted to um you can now also of course control it um that means I can create my reference again uh using bottom sheet and yeah let's try at all missing Imports and I can have a title so I can feed that title in here and then I will add a little input field let's see oh yeah we need some styles again um okay so this is not essential for the case so I'm rushing through this a bit but now I could actually update the data here you see and it's passed right to the component and of course I could also with my reference to the bottom sheet control the component I can pass it to it with the ref because we're now using the forward ref and I could have two buttons to expand or close this so let's put them up here oh no those are the functions so those are the functions just like we had on the previous page and now let's add two buttons from react native uh this was our first case this was the second so open and close and we're able to completely control our custom component from this page this gives us a lot more flexibility and we can reuse the code uh that we've probably written on our index page and we can put all of this into its custom component which makes I think a lot more uh sense in most cases as you really uh I I don't think you're going to have a bottom sheet that you will only use once or even if you do uh it's it's a better style to just have it in a custom component you can still control it as you see uh with everything else from the outside so there's not really anything you lose now there's one more thing that I want to show you and that's what we Implement on T three and that is the handling of the bottom sheet but now look down here that's kind of hidden the bottom sheet model actually this was the first thing I was looking for so the bottom sheet model idea is that it's above your application if you look closely everything that we've done so far we have the T bar but it only shows up here so it's not above our application also here we have the backdrop but it's not really above the header bar so the model will actually cover this case and it's pretty much using I I really like this spread here um so it's using all of the bottom sheet features plus some addition features uh like navigation inside and so so let's see how we can do this uh with another custom component because I really think we should always put these into their own files let's do a custom bottom sheet bottom sheet model. tsix file in my components folder I will just bring in some code for this so it looks pretty much exactly like we had before we have our ref uh we have the type up here so the type bottom sheet model this time so not bottom sheet uh we have the same snap points like before we have pretty much the same setup but we're using a bottom sheet model in this case uh styling and everything else is the same now the important part in using this is that we need to wrap our application in a specific provider like putting a context around your application and if you use the Expo file based router you're going to have to do it in the top most layout file so here not inside the TS folder don't do it in there you're going to have to do it at the topmost layout file which is always called all right so what I want to do in here is down here I want to put in the bottom sheet modal provider and of course the import is completely messed up yeah it's it's completely messed up but I will fix that in a second I want to wrap this around what Expo created here and then I will fix the import up here so that should be the bottom sheet model Provider from gorom bottom sheet actually this should be like this yep okay so now we got this and now we're allowed to call our custom bottom sheet model so therefore let's get one last time back to tab number three the one that has no real content yet and let's add some styling this is pretty much exactly the same styling uh we had before on the index page and in my view I now want to render this bottom sheet model component uh so here we go let's add some buttons for that and of course a reference so we can control it this time the reference will use let's try can you do this yeah in that case it's figuring it out in this case it's the B bottom sheet model of course as the ref type and not just the bottom sheet now let's integrate it um custom bottom sheet model and passing every time I can't remember when I ever use the the code completion you gave me but whatever so here's the bottom sheet model and you already notice this is not coming up automatically so I really want to control this from my page and I only want to open the model when uh I command the open command so handle present model uh press and this is going to be call function and it's using the bottom sheet ref current and now we should see there's a new function there is present so before we already had close collapse but now we also have thism so that is for dismissing uh it and present I think those two are actually the two new functions and of course I want to present this model and by the way we can also now use since we're in the context of the bottom sheet model use the hook so I can call this Miz um or I can get dismiss from use bottom sheet mod okay so nice hook and now I just need to add two more buttons to my page to wrap this up please add the import so going back to tab three I can now present my model and see no more Tap bar this is now above the Tap bar the interface and everything else from it is pretty much the same like the bottom sheet model and the properties that you can pass to it so uh play around with the indicator with the background color and whatnot but I can now fully control this and I can also use the hook to dismiss it actually I'm not sure why there's no no like like why is there no present hook um I mean there should be a present hook uh maybe I'm I'm just not intelligent enough to figure it out but as far as I've seen um yeah it's using the bottom sheet but then there's only dismiss and dismiss all the additional uh modal hooks that we can use H I don't know but still this is really great so you can Now cover both cases and we've seen the basic case with backdrop and all the properties in place the second case which has some data passing to it um and we can use it as a shared component and a third case which presents the model even as an overlay above our application which can also be helpful in many cases all right and that's it for today's tutorial I hope you enjoyed this quick overview of how you can use the gorom bottom sheet there's a lot more to it so just give it a try TR check out the documentation and see how you can integrate it in your react native applications and if there are any problems let me know below this video If you enjoyed it of course make sure you hit the like button and stay subscribed so you get more videos about building epic stuff with react native and don't forget to check out galaxies. Dev I'll catch you in the next video and until then Happy coding [Music] Simon

Channel: Simon Grimm

Views: 9,435

Keywords: react native, react native tutorial, react native app, react native for beginners, react native project, react native ui, react native tutorial for beginners, react native full course, dev skills, react native animation, react native 2023 tutorial, complete react-native, react, typescript

Id: oIEykI5oagI

Length: 30min 28sec (1828 seconds)

Published: Tue Oct 17 2023