React Native Bottom Sheet Tutorial with Profile Screen

[Music] hey guys welcome to my youtube channel today in this tutorial I am going to show you how we can implement this profile screen and this edit profile screen in our react native app so as you can see over here this is the profile screen from the users point of view this is not the public profile screen this screen will be presented to the user and after clicking on this edit button they will be presented with this edit profile screen where the user can edit their profile information and if we click on this profile image then we will be presented with this bottom sheet and here we have some other information right now these things are not working as I haven't implemented the image picker functionality yet I will implement that thing in my next tutorial so stay tuned for that right now we can cancel it in this tutorial I will show you how to implement this bottom sheet and how we can create this edit profile screen and this user profile screen and also with that I will show you if we choose the top theme then our screens also support that okay tutorial guys this is what I am going to show you today so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bell icon so that you get notified whenever I post a new tutorial on this channel so without wasting any more time let's get started with the tutorial so this is our project and here we are at the profile screen and also I will create another screen which is our edit profile screen right so I will create that here we need to create that profile screen UI and for that here I will paste some slides to help create our UI so here I have pasted the styles so you can take note of these styles by pausing the video or else you can get the code from my github I will submit this code to my github repo so you can get the codes from there and now here we need to import few things from react native paper and we have already installed that when we have installed the react navigation so these are the thing we need from react native pepper now here we can create our layout for that first we need to create a view and for the style of this view we will use user info section then we will create another view and over there we will provide the user image so for the source of this image URI type will provide this URL and for the size of it I will use 80 pixels now save this okay text has been already declared so we can remove this text now save this now here we can see our profile image but it's going at the top of the screen so we need to wrap this with safe area of U and we can replace this view with safe area you now after saving this we can see it's now showing properly now after this image I will add another view and over there we will provide our title and this title will hold the username and then caption and it will hold the user ID and for this style of this title we have styles title and for the caption we have the Styles caption now save it after saving it we can see that these are present at the bottom of this image but I want to present these two beside this image so for that I need to provide some styling for this rapper view so here this style will be flex traction roll also I want to provide some margin at the top 15 pixel and then for this view which is holding the title and the caption here I will provide another style margin left 20 so it will provide a proper spacing right now we need to add some margin at the top of this title so we can add that margin to this view also we can add that margin to the title as well I am going to add this in your title and here I will provide merchants top 15 pixel and marching bottom 5 pixel so now it's positioned properly now after this section I will add another section where I will display some user information and that will also be user info section and there I will present the user location phone number email ID these informations so fast I will display the location of the user like this and before this location I want to display an item so for that I need to import icon from react native vector items and I will use material community icons so the icon name is map our core radius size of it will be 20 now let's have it our icon is present over there now I will change the colors of these things so for the color of it I will use this color and for the textile I will use same color and for the margin left I will use 20 pixel now save it it's looking like as I want it now I can copy these several times for other informations as well and let me quickly add those informations here now after saving this we can say that our data is present over here now we need to add another section where I will present our bullet amount and our total orders so for that after this section I will add another section and that will be this infobox wrapper and within this info box wrapper we will add to infobox so it will be Styles infobox and here we will have the bullet information so how much amount we have in our bullet and similarly we will have another info box where we have the information of our orders now save this now after saving this we can say that we have a line before and after this section right but I want another line in between these two info box so for that I will add some styles here to this info box and it will be border right color I will use this color and border right width will be 1 after saving this we can say that our border is present so now it's looking nice now we have another section left for this screen which will be our menu leper now in this menu offer I will add some menu items and for that menu item I will wrap those with this catchable Drupal and it will be menu item and for the menu item we will have our text and along with the text we will have an icon as well and for the corner of it I will use this color and for the size I will use 25 pixels now save it now our icon is present we need to style this text and it will be our menu item text so now it's looking good if we click over here then nothing happens because we haven't added this on press now I have added this black function to this on press now we can see we can click here and we have a click effect right so now we can copy this menu several times so now after saving this we can say all the menu items are present right now we are completed with the layout of this profile screen but we have a major thing left which is the navigation bar and that will be created through our navigator and that navigator is present in our main tab screen here if we see for the profile tab we have this profile screen right and that profile screen is coming from this profile screen JS file but I want to change that I want to change that with our stack screen as we have this data stack home stack I want to create another stack for profile so it will be profile stack then we need to create that stack navigator so after this detail stack screen I will create profile stack screen so I copy this thing and paste it here and it will be Profiles track screen now for this profile track background color I will use this background color and for the hint color I will use black color for the menu icon I will use black color now save this now we need to add this profiles track screen in this tab screen component now save this now after saving this we can say that our navigation header is present over here but I don't want this background color to be black so I need to change it to white for the color of it I will use black color so now it's looking good and we can access our drawer from here right and I don't want this profile title in this section so for that I will use this title so our title has been gone now after that in the right hand side I want a profile edit icon so I will create that here so it will be header right and there I will use another icon button and I will use a material community item over here so I need to import that and it will be account edit now our account edit icon is present here right now we can access this drawer from this but I've got to navigate to edit profile screen for that I need to add that to this stack navigator after this profile stack screen I will add another profile stack screen and it will be edit profile title of it will be edit profile and component of it will be edit profile screen which we need to import from this edit profile screen J's file right now we can navigate to this edit profile screen now say this so we have an error because we haven't created this edit profile screen yet so now I have created it now let's say so we are going to our edit profile screen right now we need to do some more customization here here you can see a thin line beneath this navigation header right so I don't want that line here it will look like that all these things are presented in same place so for that we need to add some more properties here here we need to add shadow color and the shadow color will be same as this background color right now save this after saving this we can see that line has been gone but this will only work for the iOS for the Android we need to add this elevation property and for the elevation we need to add this zero value so it will work for the Android and I don't want these to be bold so I will remove this now it's looking good now we need to create the edit profile screen ey to create this ey we need to import some API from react native so it will be these ABS from reactor news and then we need to import some icons from react netic vector icons as well so these are the icons I will use so make sure you install these icons for your project and refer to the official documentation for more guidance now here we will create a UI and for the UI I will paste some Styles here so you can get these codes from my tea table pause or else you can pause the video so within this container I will add another view and for the style of this view I will use margin 20 and then I will create another view and for this view style align items to Center and here I will provide the user profile image and I will give the ability to click on that image and that will open the bottom sheet so I will add this touchable opacity here and for unpress currently I am providing this black function now for this view style I will use these styles and within this view I will use this image background and for the image background source I will use this image of it I will use heightened with hundred pixel and for the image shrine I will use border-radius 15 pixels now save this so this is how our image is looking right now and top of this image I want to display our camera icon so for that I am creating another view here and within this view I will provide an icon size of it will be 35 collar of fate will be white color and for the style of it I will use these styles now after saving it I can see our camera icon has been present over here but it's not properly aligned so I need to align that properly for that I will add some styles in this view as well and these are these styles now after saving this we can see that it has been aligned properly at the middle of this image right and later I will add deep click functionality here when we will click here then our bottom sheet will be appeared from this bottom of this screen but before that I want to implement other sections as well so those things will be text input and some icons and after the States input at the bottom we will have our submit button so let me create those things and also after this image we will have the username and so here is the username and for these styles of it I will use these styles okay now after this view we need to clear those text input fields so for that create of view and provide our Styles here so it will be Styles action this style here we will have the text input for the text input placeholder it will be first name placeholder text color will be this color style of it will be Textron good though after selling this we can see in the text input field has been present here and we can start typing here right but we can see that whenever we are typing that time we have this seishun or autocorrect options right but I don't want that so for that I will use this autocorrect as false after that if we type then we can see that we don't have any science here and for the name we don't need any solution right now decide this text input I want to display an icon as well so for that I will use this font or some icon and the icon will be this icon and for the size of it I will use 20 pixel now save it after saving it I can see that it's showing properly and now here I want to implement some other thing as well as you may remember that I have told you at the starting of this tutorial that I want to consider this dark theme preference as well for our app right and right now I can say that our profile screen is taking consideration of that in some part but in the header area it's not considering that and for this section here we can see the similar thing the header is not considering that this text input is considering in some parts but I want to implement it properly so for that I will import use them from react native paper and we can access these colors from newsteam now for this icon color I can use color start text so now after saving this we can see this icon is considering the drop theme and similarly for this text input style we can provide that text color so for that here we can provide this text color as well now we can see that it's considering part of them and later I will implement this header part as well right now let's see this in our light theme now we can copy this view several times for our other text fields so I have operated these several times now after this first name I will have last name and it will be similar kind of thing then we will have phone number and I will use this feather icon here now after this phone we will have email and here I will use envelope now after this I will create a field for country it will be globe and then another one for city so our fills has been added properly now let's see our first name last name is working perfectly but for the phone I want to change the keyboard type so keyboard type will be number pad and this number pad will be supported for both Android and iOS platform now after saving this we can see that it has been changed now for the email I want to change the keyboard type to email as well so keyboard type will be email address now we have this address symbol present here now we have almost completed with the UI of this page now after this text field I will add our submit button so here it will be touchable of a city and for on press I will use a black function for the text of it I will use submit text and for this style of this touchable opacity will be in this command button and for this text style I will use panel button title said this not receiving this we can say that it's looking perfect now we need to add the bottom sheet to our react native app so for that I will use this react native reanimated bottom sheet package and here we have some beautiful looking examples and we have the information to install it so I am going to install it after installing this we can see how we can use it we have this bottom sheet we need to import it from reanimated bottom sheet and we have the render content render header and we have snap points we can have multiple snap points for our bottom sheet but minimum we need to have two snap points so you can definitely check this documentation I will provide the link in the description below also we have some great examples here and I have taken some quotes from these examples which I am going to implement here so first we need to import this bottom shift from reanimated bottom sheet package and then we need to import reanimated from react natively animated packaged so let's see if it is installed in our package or not so we can see it has been installed in our package already so we need these two packages then we need to create reference using clear traffic and another variable for animation now here after this container we need to add this bottom sheet and for this bottom sheet reference we will use this reference then we need to have some snap points as I told you that we need to have to snap points minimum to open the drawer when the bottom sheet will be invisible that time it will be at zero and when it will be visible that time it will be at this position from the bottom of this screen and then for the initial snap we need to provide our value which will be from this array so first one is zero position second one is one so if I want this bottom sheet to be open then I will use this zero position value if I want this photo shoot to be closed when we visit the screen so I need to use this position value so it will be one right for the callback node I will use this fall and for the inner will gesture interaction I will use true so that we can type it to the bottom if it is set to false then we cannot swipe it to bottom it can be done from the bottom click only I will show you this within a minute now these things are quite important but now we have the most important section which is the render content and render header the render header is optional but render content is the most important part it will define what we want to display within the bottom sheet so it will be rendered inert I will create this function and also I want to use this render header as well so I will create this render header functions as well first let me create this render dinner function and then render header function within this render header we will have few views only so for the few style I will use this header panel header and panel handle so we need to create three views so I have created this header and now let's create a simple text here now I want when we will click on this image that time our bottom sheet will be opened so for that here we need to add that functionality and we can do that with this reference variable with this current we can provide these snap points and that snap point will be zero position which means this one right now save this now after saving this let's say we have an error now we need to close this metro burglary way process and rebuild our project okay it will be slapped - now let's see nothing happens now let me check it a few moments later so now here I have made a mistake I have to read on this it will be this parenthesis Northy cardi braces and similar things for this as well now save it now let's see so we can see that a panel has been appearing from the bottom right so this is our bottom sheet and we can say that we can interact with it so this is what the gesture in a belt is doing if we set it to false then we cannot do this thing now we need to add some more components here so for that I will add of view and it will be panel and within this panel so we can provide our content so now you can see that it has a white background right so now I will start designing that so this is our title now we will align this to center and now here I will add some buttons now after serving this we can see our button has appeared over here I copy this two more times and here it will be choose from library and this one will be cancelled now I want this bottom sheet to disappear whenever I click on this cancel so for that I will add on press and for that function I will add this snap to property and it will snap to disposition so it will be one question right so I sent it now let's see if I click on this cancel then it's getting disappeared right so that's how it's working now it's working perfectly but I want to provide some more customization to it I want to blood these things for whenever it appears so for that I will use this animated so let's change this view to animated view for this animated view I will use opacity this one so it will animate to 0.1 to 1 now save this let's see see whenever it's appearing that time this contents becoming 0.1% opaque so we can control this if we want to make some changes then we can do this so from 1 2 it's coming to this opaque value but I think this 0.1 value is working perfectly for this scenario so that's how we have implemented this bottom sheet in our reactor div F now we need to do some more customization in this header section for ducting so let me change this to ducting now we need to do those customization for this header so here we have imported these colors from this use theme hook and this u stem is coming from this react native paper right so we need to use those things for our main tab screen well we can customize our header so for the profile stack we will use this and to use this we need to return it okay so you okay so we have returned it and here we can use this Ustream and now I need to import it now here I can use this so for the background color I will use colors background for shadow color I will use the same color for the header tint color I will use color store text so it will be the text color now for the background color of this icon I will use colors background and for the color of it I will use colors text and similar thing will be for this icon as well now save this now after saving this we can say that it has been changed properly right so that's how it's working for light theme and talk to you as well right and if you haven't seen my talk theme tutorial yet I would highly recommend that you see that tutorial then you will understand this much more clearly so this is the tutorial guys I hope you have learned something new from this tutorial and in my next tutorial I will implement image picker to our application so stay tuned for that I hope you have learnt something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this if you have any kind of solution for me then let me know in the comment section below and share this tutorial with your friends and colleagues so I will see you in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 104,822

Keywords: react native bottom sheet, react native bottom sheet tutorial with profile screen, react native bottom sheet behavior, react native tutorial, react native profile page, react native profile ui, react native profile page tutorial, react native profile screen, react native profile screen example, react native bottom sheet menu, react native reanimated bottom sheet, react native reanimated bottom sheet tutorial

Id: mjJzaiGkaQA

Length: 32min 3sec (1923 seconds)

Published: Tue Jun 30 2020