Tutorial React Native Form Sheet with React Navigation

hello everyone welcome back to code with Betto in this video we are going to learn how to use a form sheet to present forms or information in a bottom sheet style let's see the demo so that you know what I'm talking about I'm going to press the plus button and as you can see we have this bottom sheet but this is actually not a bottom sheet it's it's known as form sheet which means if I focus on the text input and enable my keyword the this will uh expand to the maximum size so if I click on top of this this will shrink down and we also have this really nice animations so at this point I have this configure only for 50% on of the screen um and I'm not able to drag at the top but we can actually enable that if we want to now if I tap outside the sheet will be closed and yeah so if I click on the input here now we are we we should be able to start writing here and the cool thing about this is that if we are using inputs inside this form um we are preventing the keyboard from covering these inputs so if I press here now we can see the back and also I can change to dark mode and we can maybe see the behind the sheet before we push this information um and yeah so we're going to learn how to use this U form sheet it's actually very easy using react navigation stack we're going to be using the only chats application and if you want to learn how to build this app you can just go to Cod with. and check out the react native course because this application is the final project um so we're going to be using this one previously uh we only had a modal in here which means this was open fully here uh but I I think you know this is better for forms and also lets the user know okay if you press this button you need to create a new post but they can just swipe down to dism if they don't want to uh instead of just opening this to the maximum height of the screen so yeah if you want to learn how to create this app go to go. check out the course as well if you want to get the code for this project you can just go to the project section and you'll find all the projects that we do in this YouTube channel available to you for free just go to cod. d/ projects once you find the project that you are interested in you can just click on it and then scroll down uh and you'll find these links for GitHub or download as zip all righty guys now one of the requirements in order to integrate this form sheet as we are seeing here in the demo it's going to be that you have a react native version 7 okay now if you don't know I'm I'm actually going to show you how you can check the version of react navigation that you're using in your your application but if you don't know you can um just go and check out this video actually in this video we are learning about the new features of react navigation and you are going to learn a lot but as well if uh we are going to see here in this video how to install the latest version now it might happen that at the time that you are watching this video the react native um navigation 7 it's already released currently it's um on the version release candidate so it's not published yet so that's why we need to use this at next when installing this um Native stack basically because we're going to be using the native stack to present this screen so just keep that in mind um you need to use it at next now uh I would encourage you to check this video to see how to install um how how this you know this command will work um otherwise if you already have react navigation 7 you should be good to go um and yeah so let's start with this video all right so the first thing that I'll do guys is actually just show you that this is my application I'll reload here and I already have you know this is the only chats project that we built in the course so you may notice that we have some things but this is the home stack um by the way you need to be a little bit familiar with navigation in order to understand this but the home stack um will contain some screens that will be accessible in the home t here in the app right and one of these screens it's the new post screen okay and normally when we are accessing this kind of um screens I like to use the modal because it looks really nice on iOS um and if I press the plus this is the current default um you know this is the current default modal that we are seeing on iOS okay um and this is how it looks but um just just keep in mind that you need to have a stack screen and one more thing is that you need to be using native stack uh so if I search for Native um yeah so I'm using this react navigation native stack now the the second thing that you need to check is that you are using uh so if I go to my package Json you need to check that you are using native stack version seven at least okay so as I was mentioning before this is a relas is candidate for so it's highly um you know it it could be that at the time that you're watching this video a couple days from now this is going to be the default latest version of react navigation just make sure that you're using the latest one okay so once you make sure that you're using direct navigation version 7 we can go ahead and close this and go back to um our screen okay so I'll close the Explorer for now if you again guys if you want to learn more about this project um um and how we build it step by step we actually do that in the react native course at c.f we also have more courses for nextjs projects um so for front end using nextjs as well as git and GitHub all right so the first thing that we need to do is actually change the presentation of this screen this is going to be very easy actually to be form shet now if I hit save and go back to the plus icon here you notice that nothing has changed yet and this is because when we are using the form sheet the custom I mean the default behavior is going to be to use the full height and it's going to look very similar to the modal okay so what we can do here is actually just type sheet and this will bring all the things that we can customize when we are dealing with the form sheet now as you can see here we have a allow dettin and we have a really nice description so in this case allow detent describes Heights where a sheet can rest at this point you know we we only have one which is 100% and works only when presentation is set to form sheet so keep that in mind defaults to large so let's go ahead and modify this one and if I open uh double quotes here you'll notice that we have these options large medium so let's go ahead and select all because I want to allow the user to move um in all the tents and I'll show you how how this works basically when I show you the demo this was medium only but if I come back here and press plus just like that with this simple line of code we are able to have this really nice uh new screen and we can drag and drop and scroll down to close um and yeah I mean this works really nice and if we have it in 50% and press the input because this is a form sheet it will um you know go up to take 100% of the space okay now also notice guys that the background it's being dimmed a little bit and if I change to dark it also dim a little bit which means if I type outside the form sheet will be closed which is really cool okay cool now we can actually customize this form sheet a lot more for example we can say and let's see what else we have we also have Corner radius so we can change this I'll use 30 for now and if I hit save you can see that we have now this really nice radius on the and you can increase this so up to a 50 50 let's say 50 or even 100 but this will break you know my heer at this point okay just just to show you guys this is how you can customize this I've seen some really nice um shets that have a you know like a high corner radius and looks really nice so at this point I'll just use 30 um because I'm using this publish button that comes inside the header of this screen uh so I don't want to cut the button so I'll just use 30 for now all right now we also have uh I wanted to mention guys here we can set this to medium which is the one that I had when I was showing you the demo and if I you know open this this now we prevent the user from swe swipe up unless they press the input this will be the default uh Behavior but yeah I think all you know gives more freedom to the user so let's keep all uh then we also have this um so if I said sheet we also have this largest oned detent okay so largest on dettin let's let's read the explanation here this is going to be for um for which a view underneath I mean underneath the sheet won't be deemed Works only when presentation is set to form sh okay so if I say here all and hit save and open the post again now you can see that we have the unemed so let's change this to be uh let's say medium now on medium the tent you you notice that the background is not darker anymore and if I press outside nothing will happen okay and this is actually useful when you want to show you know some maybe some tools about the content that you are seeing here and when you want to present these tools or these settings you can open this with an unemed the tent and you should be able to interact with the background screen and still still have this um this really nice screen and if you scroll up you will have you know all the things you need and maybe you can play around with the tools and once you are done uh you can just swipe down to close so this is really cool I will leave this uh at all just so that we have the dimed right now because I think it's appropriate for what we're trying to do we want to dimed the background and because you know this is going to be like a new input and that this also lets the user know that if they press outside um they are going to close the shet all right so this is a really nice one let's move on to the next one which is one of my favorite ones this is going to be the Grabber visible My Now by default this is false so I'll set this to true and if I hit save and go to the plus now we have this really nice um Grabber thing and we can you know drag up and down and actually it it will animate and when you press it it will move between the detent that we Define in here so if I only only have the large for example it sa when I press this it will go okay it will close because we only have one but uh if we let's say that we use just medium let's see what happens in this case I think it will close because we only have two yeah but I think this will work only for all so we need to have the all the T now at the moment we only have 50 and and 100 so we can just play between 50 and 100 right now okay and this is how it looks so I really like this one now I think I would use this one without showing a header for this one so you can hide the header by saying header shown equal to false and hit save I think this would look better but right now all my logic to publishing the post is inside the header so I'll just go ahead and leave the header there for now okay so this is a really cool one let's move on to the next one uh we also have a sheet expands when scroll to H okay now by default I believe this one is going to be true yeah it's true and this one determines whether the sheet should expand to large the tent when scrolling okay Works only when presentation is set to form sheet so let's use this one and I'll say true let me change this to false so I believe as you can see here so if I scroll up nothing I mean the sheet won't expand but if I set this to true and hit say and scroll up on the sheet you can see that um it expands right so you can also customize that I think you know scrolling up in this case it's nice so I'll leave this to true but you can also set it to false and if you have a scroll view in here like I do right now the user can actually scroll between these items and we can prevent expanding the sheet now in this case I really want this to be true because I want to expand if the user swipes up okay cool that's the other one then uh let's type again and at this point we have used all the sheet um properties that we can use with the form form sheet and this is basically all we can do at the moment with the sheet of course you can expand this with other properties like the header title and and you know animations and things like that so yeah guys basically this is what I wanted to show this is really nice we didn't have to install any third body dependency just using react navigation native uh now keep in mind that this will come with some limitations and to show you some of the limitations I will bring here the Android device um and for the Android device because the form sheet is using under the hood native code for iOS this won't work in Android which means it's going to default to the presentation of a simple modal screen so if I press the plus we will have the same functionality that we had before when it was a modal okay but I would say you know we have some um really cool fun functionality for iOS devices and we didn't have to do much just come here and TW the presentation um but just keeping mind that this this you know this screen won't work for Android now by the way this reminds me if you want to check out as well the project uh in which we create this bottom sheet uh blur bottom sheet actually with react navigation as well um and this one will work for Android and iOS so if you are curious about how you can how you can integrate a bottom sheet as well with some limitations but I would say it would be good for you to check out this video um you can learn as well how to do the bottom sheet for Android not only for iOS but for iOS I'm super happy right now with this functionality and this is how you can do it guys now of course this is going to be um compatible with dark light mode and we have all the gestures working really nicely on iOS okay so I guess that's it for me in this video guys I hope I hope you like it I hope you learn something new remember that you can go to cod. check out the projects to get the source code dependencies that we're using and all that and if you want to become a master in react native you can check out the courses here we also have a course for react with typescript um and also master gate and GitHub with that thanks for watching leave me a comment don't forget to give it a like And subscribe and I'll see you in the next one

Channel: Code with Beto

Views: 896

Keywords: react navigation, react native, reactjs, react, expo, form sheet, form, sheet, bottom sheet, tutorial, begineers, navigation, modal

Id: atwMj2U24Nw

Length: 16min 53sec (1013 seconds)

Published: Fri Jul 05 2024