Building Twitter Bottom Sheet with React Native | Tutorial Expo 2023

hello everybody and welcome to code with veto in this video I'm going to teach you how to create this beautiful bottom sheet model and this bottom sheet has this style has Twitter and if you go to Twitter right now you can see that we have they have this very similar bottom shade and that's why I decided to bring it to the channel and as you can see we we have three main states that this bottom sheet can have we have this one the first one has the 20 of the screen then we can scroll up to the 50 or 45 I don't remember at the moment and then of course the settings that we have here doesn't work just it's just the UI for the demo but you can easily integrate whatever you need in here we are going to focus mainly on creating this bottom and how to create the beautiful design right if we go again and press this button press the model we can we're gonna have that um beautiful animation presentation presenting the bottom model and well that's pretty much all what we are going to be building in this video guys so if you like this video please give it a like And subscribe and if you have any comments please let me know down down here and as you know if you have seen my videos this project is going to be in my platform called with Beto so you can go to codewebet.dev projects and you're gonna find this bottom sheet uh project and you can go here and basically just copy the dependencies that we are gonna use and we're gonna be using expo Expo as you can see Expo go and the gore home package for the bottom sheet all right if you scroll all the way down you're gonna find the links for YouTube GitHub or if you just want to download directly the code you can just hit download and you're gonna download the project all right so now that you are here let me invite you to join my react native course of course uh one important thing is that at the moment the videos are in Spanish because it's my first language but I'm I'm planning to translate them to English uh because I have been requested for many English speakers that they want to take the course I have been getting a lot of good feedback so I'm gonna be working on that and as soon as and as soon as I have it in English I'm gonna let it let you know guys of course but if you want to just take it at the moment you you can just follow the videos and I have many people that have taken it without speaking Spanish and they have been telling me that they can follow the video and the lesson of course um but yeah please go check it out if you are interested I'm sure that it's gonna help you and especially for beginners and medium level developers I'm sure you're going to learn a lot now without further Ado let's start with this tutorial alright guys so the first thing that I'm gonna do is bring here code with Beto in this project and I'm gonna go ahead and copy the gore home package you can just go here and copy it or just pause the video and copy it all right we're gonna create a new export app so I'm going to run the command npx uh create Expo app in this video we are using Expo SDK 46 at the moment and the name for my application is going to be born free tutorial right so we hit enter and now we wait until the dependencies are installed once it's done as you can see there we are going to access to the bottom sheet tutorial card folder and then once we are in this folder we can start installing the dependencies but first i'm going to open it on Visual Studio code all right so I'm gonna run the command code Dot now that we have Visual Studio open we can start installing the dependencies and here I made a mistake I didn't install a core home bottom sheet the first package I went ahead and installed the second package that is react native gesture Handler and react native reanimated we need these dependencies because I mean we need them in order to have bottom sheet working without any issue you can see there that if you are using the CLI you can install install the dependency using yarn as well and because we are using Expo we need to make a change in the bubble config so we are I'm gonna just copy this code and gonna and I'm gonna go to my Bible config.js and I'm going to replace whatever we had there for this uh thing which is basically the same we just added the the line that says plugins after we did that now we need to import react native gesture Handler inside our app.js in order to have a gesture Handler working properly okay so I'm just gonna copy this go to my app and paste this all the way to the top all right import react native gesture Hunter now that we have that I'm going to just move this to the left and we are going to have our device into the right now we can run the application running MPX export start and by pressing I we can open it on iPhone or on iOS I'm just gonna reload this thing because I already know that is running on this server or this port and now we can start working guys the first thing that I'm gonna do is go to my app.js file and here we can start by changing these text maybe that says open up app.js to start working on your app but uh let me move this to the to the right because I just remember that I didn't installed the first or the main package that we need to make this application so run yarn at core home bottom sheet and once that's done that's all the dependencies that we need for this video all right so I'm gonna move this terminal down here and put this uh to the left again let's start by importing uh Gorham bottom sheet and we can import many things but the things that I mean the bottom sheet that we are gonna use in this video it's gonna be bottom sheet model and then we're gonna need as well bottom sheet model provider and you're gonna see why in a moment okay so now we can hit save and now we can start and basically integrating this bottom sheet we're gonna need a button in order to activate our bottom sheet so for this button I'm gonna put a title title that says press modal I mean percent model and I'm going to add a function on press on press the function is going to be called handle present model present model and I'm going to create this function up here inside my app component all right so we can say function handle percent model and inside this function we can have the functionality but first we need to create some variables to hold the state of the bottom sheet the first thing that we need it's a reference to the bottom sheet model so I'm going to use the hook use ref from react and we are going to initialize it to be no all right once that we have that we need another um variable to hold the state or the the amount of screen that we want the temporom sheet to have and those are going to be an array of strings and I'm going to call them snap points these snap points um we can have as many as we want for this tutorial I'm just gonna put 48 at the moment because I want the bottom sheet to take 48 of the screen and of course if you want more you can put a comma and then add more whatever you want right and I'm gonna and we're gonna see that in a in in a moment okay so now handle person model we can say bottom sheet model ref using the ref.current we put this uh question mark because in the case that that's null we don't have an error and just put dot present that is a method to open the bottom sheet all right before that it's able to function we need to wrap the component inside the bottom sheet model provider like this now we can hit save and we can put inside our model right so calling bottom sheet model we can have a view inside the model and here at the moment I'm just gonna put a text just to see what happens and I'm going to say hello inside this text the Border shift it's gonna take a lot of properties the first one is going to be the reference of the of the bottom sheet model and the reference is the first thing that we did so I'm gonna assign the bottom sheet model ref to the ref and index index is the snap points that we have up here as you can see we only have one 48 and I'm gonna put that inside this Index right because all right so I didn't explain that right index 0 because at the index 0 we have 48 of the screen rate that's our run rate remember now snap points and we pass the snap points just like that and if we hit present model as you can see we have the model in there but we can barely see it because the the background is white as well so if I change it to be gray you can see that we have the model right now we can start personalizing our model and making it look good right so the first thing that I'm gonna do now is add another property in this bottom sheet model and you can check the documentation if you want to learn more about the specific things that we can do with the bottom Machine model but one cool thing that we can change it's a background Style I'm going to change it and I'm going to add a border radius of 50 so so we can have this nice rounded like Twitter right and snap points I'm going to add another one so at this point we are going to have 25 percent and 48 and we can add more if we want I'm going to put 75 and because we put the index to v0 we're going to start 25 of the screen but we can change this index to be for example one if we want the model to start at 48 of the screen and of course as you can see if we drag and drop or finger in the model we are going to play between those snap points okay so I'm going to say index one to start at the 48 of the screen this is 48 and now that we have that we can start adding more stuff inside this view inside our bottom sheet model right so the first thing that I'm going to do is that I'm going to add a style in this view I'm going to say styles.container uh but this content container is going to be another class and I'm gonna put it down here the first thing that I need to do is add a flex of one then I'm going to align items I'll send to the center then what I want to do is um add a padding so we have that that space between the end of the screen so I'm gonna say padding horizontal of 15 pixels now we can add a style for our title so I'm going to say title open curly braces and inside this class I'm going to say font weight to be 900 because I want this text to be heavy to be very very bold there is letter spacing of uh Point um what did I did I put 0.5 I think now I'm going to add this style to my title I'm gonna say it's title titles and as you can see we have that nice font looking good perfect guys so now I'm gonna say you want to change these text to be dark mode and down here I'm gonna add another view and this view is going to contain our first um switch and this switch is gonna say is gonna have a taste that says that dark mouth and using a react native switch a simple react native switch I'm just gonna put it just like that right so we want these items to be from left to right so I'm gonna create a class called row and I'm gonna go down here create this class and add a comma here Flex Direction row and align items to the center like this now we want these items to take a hundred percent of the screen so I'm going to say with 100 percent and hit save now we can say um justify content space between just you have one to the left and one to the right and at this point you can see the padding horizontal that that we added in the con content container class now I'm gonna go up here and I'm gonna put this style subtitle inside brackets because I want to add another style this style is going to be a margin button of 20 because I want to have that not nice spacing between the options and the title that is dark mode okay now I'm gonna go down here and I'm going to create another class called subtitle it's basically the same to the title with a different slightly different color and font size and fun weight as well right so now we can just simply add this style to be subtitle and now we have that beautiful font once we have that we can just add some variables just to have some functionality in our switches so I'm going to create these two variables one for dark mode and one for device and I'm gonna initialize them to be false using the react hook use state all right so now we can add these variables to this switch I'm going to say value equal to dark mode and on change we are going to change that same variable so we can say we can put an R function and then Set Dark mode to be equal to whatever dark mode was but the opposite on the right now I'm going to of course import use state so we don't have that error and now as you can see we can play with this dark mode although it doesn't have an and although it doesn't have it any functionality we can just play for now and we can see how it looks all right so now we can just duplicate this basically and we have our use device settings just like that perfect so now we need some space between these um between these two so I'm going to add this margin vertical of 10 and now we have that nice spacing between those row classes now I'm going to add another class for another text that is going to be a description basically same thing just font size it's going to be 13 this time and font weight is going to be normal right so we wanted this text to take 100 of the width of the screen and now we can add this text with the description clasp and it's going to look just like that perfect now that we have that we can see that it's looking pretty good now we need um to create another kind of switch but we're gonna use some icons for that it's gonna be a little bit more custom so for that I'm going to create a separator and this separator is going to be just a simple view but for this view I'm going to add a style and I'm going to add a width of a hundred percent because I wanted to take 100 of the screen and uh just to see where is this view I'm going to add a margin margin I mean a border bottom border bottom width of style sheet dot hairline width and this is just a basically a line but super thin now we can say bottom bottom color it's going to be Gray all right now we can add some spacing just just to have that nice vertical spacing so I'm going to say margin vertical of 30 and now we have that beautiful separator we can change the color if you want but I want to leave it uh gray for now or I can just leave it red for now just just for you to see um now I'm gonna go up here and I'm going to create another variables to hold the state of these switch and of course I'm gonna need the width of the screen so because I don't want this line This separator to have this padding that has everything else instead of putting 100 I'm just gonna say width and this width is the total amount of pixels that has the screen of the current device that is running this application in this case we're going to have exact same um with and it's gonna look like this now I'm gonna change this to be Gray perfect now uh I'm gonna basically have the same thing that we have here I'm gonna copy the title and I'm gonna put theme right now that we have the theme with 100 so it goes to the left like that I'm gonna add a pressable and this principle is gonna have a text that is gonna say theme right the style for this beam it's going to be equal to subtitle just like that and inside this Principle as well we're gonna have um an icon right but this icon is going to change depending if this um this switch is active or not so the first thing that I want to do is add the style those row to have these items from left to right and now I'm gonna import from Expo icons and design an n-typo like this right now that you have the icons that you want or or import the classes that you need we need to add another variable to hold the theme right this theme is going to be dim so I'm going to initialize it to be beam and here I can just check if the theme is equal to them we want to render an icon otherwise we want to render another icon and the icon that we want to render if it's dim it's check circle with a color blue and the n-typo it's going to be the simple circle with the color gray all right now if I press this it's not a nothing is going to happen because we haven't add anything but if I change this this to be done as you can see we're using the other icon so I'm going to initialize it with the and we can present the model and that is going to help us to render the other option right so now I'm going to say on press set theme equal to dim now we can basically just duplicate this and change this to be done uh lights out sorry lights out and theme it's going to be equal to like this out if that's true we're gonna render same strike Circle otherwise we're going to render the same Circle just like that and as you can see we have that new Switch just like that it's working perfectly and once we have that we are basically done with this tutorial guys as you can see everything it's working just normal of course um this bottom sheet it's super useful for many things just for settings like user like Twitter uses and we can have another variable of course for whenever we have opened this uh this bottom sheet so we can change for example the background of the screen and what I'm going to do now is that I'm going to change the background so I'm going to add an array of styles in this main container and I'm gonna simply change the background color depending on the is open variable like that so when we handle press model we're going to change the set is open equal to true but note that when whenever we close the bottom sheet our background is still Gray so we need to switch this set is open variable to be false whenever we close the the bottom sheet and we we have another method here in this bottom sheet model we we can add this property called on dismiss and on this Maze We can say set is open equal to false which is gonna trigger that the re-render which is gonna trigger that our background is going to change to White just like that now if we present the model it's going to be gray and if we um close the model it's going to be white all right of course this is just an example guys you can you can do whatever you want whatever functionality you need even you can have a timeout for example I found that this worked uh better with this timeout I don't know why but it's working better with the timeout and as you can see I just have a hundred milliseconds but you can play with those uh those numbers as well all right and basically that's all I wanted to show you today guys uh please if you like this video give it a like And subscribe and I have another tutorial in this channel for another bottom sheet tutorial but this is uh this is like more recently um and we are using Expo 46 in this tutorial so without further Ado guys that's pretty much all I wanted to show you I hope you liked this video I hope you learned something don't forget to go to Kobe Beto if you want to download this project and to check my react native course right thank you so much for watching and I'll see you in the next one bye

Channel: Code with Beto

Views: 26,979

Keywords: react native, expo, tutorial, bottom sheet, modal, react native bottom sheet, javascript, front end, beginners, twitter bottom sheet

Id: P32k01XzqB8

Length: 24min 22sec (1462 seconds)

Published: Mon Oct 31 2022