Signup, Login Screen in React Native || React Native Login & Signup Screen UI Design Tutorial

hey guys welcome to Z coder in this video we are going to create the login and the sign up screen in react native so you can see that this is the UI which we are going to build like this is the one uh login screen and the sign up screen which we're going to create okay so first what we're going to do we're going to create a new react native project using this command npx react native and it like with the project name the project name is like login sign up after creating a project you have to type CD and uh you know you have to go on that project directory so like this so you what about the project name you have to just type and after that uh what you have to do you have to type code or open in the vs code so you can see that I I had already opened this project in my vs code now after that what I have to type npm start to start the server okay so it is starting my server so so the first time it's going to took time okay so we have to also set up the react native stack Navigator okay so let me do install the react native stack Navigator so you have to type react native is stack Navigator okay so you have to pin this document and after that just click on this react navigation click on R docs after that we have to install react native navigation native so let me copy this command and I have to paste it it okay so let me paste it react navigation okay often it will install in some time so let's wait for that now meanwhile you can also see that our app is all up bundle now after installing the react navigation native what we have to install we have to also install this one react native screen react native save area context so again let me past it here so it will install now let's uh move further so we have installed this command npm install react navigation native after that we had install npm install react native screen react native save area context after that what we have to do we have to wrap the root app component with the navigation container okay now let's copy this code as well now after uh we have to wrap the our navigation container so let's uh do that as well so you can see that we are using TSX but let's replace with with the jsx like I'm going to use jsx so I'm going to make this function as a jsx and I'm going to remove this whole code I don't need this whole code to let me remove this code and what I have to type I have to type RN FES so I installed one extension called react native snippet like what you have to type react es7 so there's one extension es7 react native so if you install this ex extension okay after installing this extension uh my bad after installing that extension if you just type RN FES so it will create a one component okay now after that uh you can see that we have created one component now as you can see that we have to wrap our navigation Ru app component with the navigation container so let's do that as well so I'm just copying this code and going to replace this with this one okay let's the App G bundle and we can see the app text on while on the app so let's wait for some time uh we'll do it uh after the bundle you can see that we are able to see the app now let's uh wrap the navigation container here and we have to import the navigation container from the react navigation native now after that what we have to do uh let's see what we have to do next now click on this hello react navigation now we have to install this NP install navigation ATB stack let me copy this uh let me stop my server is so you can see that we have stop our server by typing the control C and let's paste this command so it will install the react navigation native is stack now after that you can see that what we have to do we have to do cons stack is equal to create native stack Navigator okay and we have to do like this so let me start the server again npm start okay uh let me close the second terminal which I don't need now we have to type a so it will you know install this app in our here now you can see that uh we have to do we have to do con stack is equal to create native stack Navigator uh so let's do that as well so I have to import create native is stack Navigator so I imported it okay now after that uh we have to do like this stack do Navigator and inside that we can pass as the component name okay so I'm going to remove this commented code and I'm just to paste that code now instead of having a home screen let's create a screen as well so I'm going to create one folder called source and inside that I'm going to create one folder again screen and inside this uh folder I'm going to haveen a login screen login screen. jsx and sign up screen. jsx and let me create one simple component by typing the RN FES command and same for the login screen as well okay now let's import the log log let's replace with the uh login screen and let's import the login screen as well login screen you can see that I got a suggestion and let me import this login screen from Source directory okay now let's also import add a component called sign up sign up and let's import the sign up screen as well so I imported the sign up screen as well now uh we can see that uh currently login screen on the UI so let's summarize this what we had done quickly so first uh I went to the react navigation native click on red docs okay now after that I install this command okay now after that I install this this command react native screen react native sa area context after that I just wrap my root component with the navigation container then I click on this then I just uh you know install this package as well and after that I just added the con stack is equal to create native stack Navigator and we up set of the stack Navigator okay so you can see that we are getting the login screen like this now instead of showing this header we can remove this header as well so there's one props called Skin options okay inside the skin option we can pass we have one variable called header Zone headone and we can make it false so if I make it false and let's see you can see that it's get removed from the UI awesome now what we have to do we have to design this login screen okay so let's go there and you can see that we have a text first we have one image on the on the top okay so let's import this image as well so I'm going to Define as a 4X and Export this Vector let me see how this Vector is looking so you can see this this is the vector so I'm going to name as a a top Vector okay top vector.png and I'm going to create one folder one folder called assets assets and inside this let me drop this there like this okay awesome now let's do this as well so I went to the login screen and we have to first import the image like this style okay so let's import the image and before that now let's style the container Styles dot container okay and let's style the container so background color is white if you can see there so let's make a background color is a white and you can see this is a white color the background color is white ff5 okay let me replace with that okay and currently you can see that the color is only reflect here so let make is let make is uh let make that as a flex one so it will take the whole width of this screen okay now you can see that uh Flex is a one and it's become white okay now let's import the image as well so I'm going to add one View and inside that we're going to have a image okay so I imported the image from the react native and let's uh pass a source and inside that Source we have to require the image so let me require the image assets and top Factor okay you can see that it's taken the whole withd which I don't want I want style will be styles do top top uh image container okay top image container and let's style this so top image container height will be uh 40 for now if I make the height as well so you can see that nothing reflect there the still image looking so uh you know so longer skin so what we have to do let's style that as well so I'm going to do Style okay and styles dot uh top image okay so I just copy this and let's add it as well so I'm going to Define as a flex as a one okay and you can see that it's not it's looking so weird right now so let's make the height as a 50 okay so I'm going to remove this Flex one property and I'm going to make the width as a 100% okay and I think height will be around uh uh what do you think height will be 50 oh 50 looks too weird let's make it 150 okay now it's looking well man so instead of hi having a so let's just remove this image container height and instead of having a height as a 150 let's make it much more smaller I thing so let's make it 130 for now I think it's looking well yeah uh what is the height they have given the height is one19 so let's make it 120 for now yeah it's looking too well but uh there's one catch which I feeling like you know this is cutting you know which I don't want that let's make a 130 oh awesome now it's looking well now after this you know we have design the image container so after that we have a text hello okay and the font size is 64 and it is font where is a b okay so let's do that as well so we're going to have a view and text and the text is like you know hello so let's copy that and replace that hello okay now you can see that there's one small text we can see now we have to write style is equal to style do hello container so we have Define one hello contain container okay and here let's also style this as well styles. hello uh hello text okay now we have defined a hello text and hello container so let's style this as well so first of all I'm going to Define hello container okay so for the hello content what I'm going to do I'm going to uh add one border border withd uh so I know what is the height and all the things for the understanding purpose so you can see that the border withd is looking like this okay so if I make text align Center so it does going to work or not let's see so I make text align Center nothing works so let's do here hello text here and let's give this text align Center here now it's it's went to the center awesome now the font size let's in keep the font size will be what is the font size uh the font size is almost 64 okay so let's make it 70 for now and let's see yeah it's looking well and after that font weight will be bold awesome it's not looking so well so let's make it 700 the font we will be 700 nothing change let's make it 500 okay now it's looking well and let's add a color as well uh color will be black okay now you can see that uh it's looking well let me just copy this style like you know I think it's this color code will look much more perfect yeah it's looking well and let's remove this water with as well okay so you can see that we have defined a hello okay now after that uh we going to have one text called sign in your to account so let's do that as well so uh now let's do that as well so we're going to have a one view another and inside that uh sign sign into to your account and and let's style the text as well Style will be styles do sign in text okay so let's go to the Style again and let's style this sign in text will be text align Center okay and let's see what is the font size the font size is 18 and the color is again the same so let's do that font size will be 18 color will be the same as the above one okay okay awesome so we have cre sign into a account and now after that we have to design a two field along with the icon username and like this okay so what we have to do we have to install the react native Vector icons to get these icons okay so let's install the reactnative vectors icon so let me T native vectors icons so we you go we got this Bas reactnative vectors icon npm so you have to open that and after that you have to just copy this command reactnative Vector icons and after that you have to just P this paste this command here okay so it will install the react Vector icon we have to do some extra set up as well so let's see the documentation as well let me reload the once more so we will get this article okay so what we have to do basically so we have to go inside the Android app build GD and we have to copy this uh code and paste we have to paste it that there Andro app build. gdle okay and let's paste this command here on the top okay now after that uh there's one more thing which we have to do if you scroll down so they have mentioned one thing edit and write app build. grle and we have to use this uh line of code as well so let's go it's called down down this file Android app build. crle and here we can see uh inside the dependency we have to paste that implementation as well and after that we are able to good to go so let me start my emulator again or server again and it will you know again uh install the app okay so it will install the app okay after that how do you use the react native vectors icons so use that there's one example like import icon react vectors icons slash whatever like we can use Font awesome or whatever so we will see take a look on this okay so you can see that our server is like you know restarted and let's go to the screen which we are working so we are working on this sign login scen okay uh now after that uh you can see that we can name as a font awesome okay let me show you quickly like how do we use icons so what whenever you search reative vectors icons directory you will get this page okay so you have to open this directory page and if you see some you can see lot of icons like font and design and design icon in typo fether font awesome and money mo so we have to use this icon like this so let's see where is that icon so let's see where is that uh it's going to look like this round round okay so round user look like fether one so you can use that as well okay let's use the font awesome icon font awesome user okay this is looking much more better so we are going to use Font awesome a user icon okay so how we use so we have to import the font awesome from react Vector ic/ font awesome okay and after that uh let's suppose I want to use this icon after this uh this component sign in your text so we have to type font awesome okay and we have to name as whatever name we want to give like whatever the name we have seen so name as a user you can see there user icon and we can give a size as well so size will be like almost 30 and we can give color as well whatever we want to give the color like for suppose I want to give color as a black so you can see that so this is how we have to use react this icons so let's see okay now after installing this what is next let's see on the figma so on the figma we can see uh input field along with the uh icon and the username so let's do that quickly so first of all what I'm going going to do I'm going to create a view inside this uh we going to name as a style is is equal to styles do input container okay and inside the input container we're going to have a two things the first thing is called when Vector icon okay and the second thing is called text input okay so this these two things we going to have and let's style this as well the style is equal to Styles dot text input okay now if you see the this icon color so the icon color is uh this 9A so we're going to give this icon color quick L okay so this is the icon color looks better and the size is like 24 so let's give the size is a 24 not uh 30 okay now let's style the input container quickly so let's go to the style and I'm going to name is a input container okay and background color will be white I think yeah it's a white f FF so let's replate with the this code okay you can see that there's one uh white color come up and flex direction will be Flex direction will be row okay and the you can see the flex direction is row and what else we have to do we have to give some border radius and some margin as well so let's give some border radius will be 20 now and margin horizontal will be 40 okay now let's give some elevation as well so we'll get that feel of that okay so we have given the elevation as well and we going to give a margin vertical will be 20 okay so we want some more space here and let's give some uh margin bottom to the signing text margin bottom will be 20 for now okay let's make it 30 okay now it looks better now after the input container you can see that uh it's looking like that and we have to make the icon in the center okay so let's call this icon as well Styles dot Styles dot uh input icon input icon okay and we have a text input as well so there's one thing which I had forgot like we have to add align item Center so it will went to the center okay now we have to give this icon some margin left okay let's give them icon uh input icon some margin left so margin left will be 10 okay let's give some more uh I think it should be 12 more I think think it's required more of 15 cool now it looks better now looks better and the height is like you know uh 50 as well this input so let's increase the height as well so height will I'm going to assign as a 50 okay so it will increase the ey and let's give some you know uh the in text input is styling as well so the text input styling will be like you know Flex is the one so rest of the height and WID will taken by the flex okay so you can see that this is a uh field we have designed okay now let's add a place holder text as well uh Place holder text uh here place place holder oh my gosh okay not here not on inside the font awesome we have to assign this placeholder here so placeholder uh will be uh email I think yeah looks good yeah now we have designed this email P email field and it's looking well I think okay now let's design this uh a next field that is called password as well so I'm I'm just going to copy paste again once more okay and you can see that we got the password fil filled as well so let's name is a password okay and let's change the icon as well so the the password icon looks like a locker so let's see the icon as well for that password lock okay so which icon is it lock something like this uh let's see which one looks better logged okay so we going to use uh like this icons so we going to use log simple line icons or something else let me check once more so I'm I'm I'm thinking let's use the this font ISO logged font ISO logged okay so let's import the font ISO icon quickly so we have to just P this uh like this and in the place of font awesome we have to replace with the font font stto icon and we can name as a font disto and name is not name as a user the name will be become logged okay we can see that password and I think we have to give some padding uh uh to the input field because it's not looking so well like so I'm going to give some uh margin uh right as well margin right will be five for now okay now looking well okay so we have created a uh uh this password fill as well and let's add one property called secure text entry as a true so if I write something you can see that looking like a password awesome now what next we have the next thing is that we have to create a foret password text the color is this okay so let's do that as well so after closing this we going to create a text okay uh the text will be forget your password uh style styles dot forget password text okay so let's write The Styling for that as well so forget password text color will be uh which we had copied this color okay and text align will be uh left not left it should be right and it's uh it should be like you know let's give some will be 70% not 70 let's give with the 80% uh 90 okay for password okay perfect and the font size is 15 and let's increase the font size as well font size will be 15 okay now I think it's looking well and uh after that we going to create this sign in button along with this you know this icon linear gradient icon as well so let's do that as well so now after this uh we have to create a view inside this I'm going to name as style is equal to Styles DOT sign uh sign sign in button container okay signin button container and I create a property S button container and inside that what we're going to have we going to have a text and the text value will be signning okay and we're going to have one uh linear gradient Button as well so let's quickly this style this uh style will be styles do sign in okay and let's go to the this uh after the container we're going to style this color as a let's copy the color quickly so the color is this okay and we copy the replace the color and the fonts size it will be what is the font size the font size is 25 and it should be bold the font size is 25 font WID will be bold and let's check it out so you can see that we had created this awesome now uh we have to add this uh icon as like you know a linear gradient button so how we can create a linear gradient button react native there's one package called react native linear gradient so we have to install that so let's install that package as well so I have to just copy this command and you can see that this type of linear G we can build it up so let me replace this like you know install this package so so it will it is installed and let me start my server Again by typing the uh e let's wait for some yeah so it will install the app okay now meanwhile installing my app uh let's see how we can use it you can see that there's one example of linear gradient which they have given so let me copy this example and try with that what we what we are getting the result okay so I'm just pasting it there okay and I have to import the linear gradient from react L gradient so I've imported the ReliOn gradient and you can see that something you know signing with Facebook is looking uh in a gradient format so let's uh replace this text with an icon we have to import replace with icon so let's uh so we want this icon you know a right arrow icon so let's see right arrow so I'm going to use uh and design uh and design Arrow right okay and is an arrow right so let's use that so to get the and design icon what and design icon so we have to replace this my bad we have to at the place of fono we have to replace with the end design okay so we get the end design icon now uh let me copy this sample and paste it here at the place of font awesome we have to write end design okay the icon name is Arrow so let's replace with the replace with arrow and the color is now a white okay so we have assign a white color okay so you can see that okay now let's change the background color as well so what is the background color of this linear gent button so if I click on you know this uh icon so we have two color the first color is this one something red similar to Red not red and the next one is color is like something purple so let's copy that color as well and replace that and I'm going to remove the third color which I don't need okay and we going to name is a styles. line gradient for now and let's go to sign in button container so inside the button container what I'm going to do Flex Direction as a row okay and we got it okay now we can see that we have linear gradient and let's give some height and width what is the height and WID they have given 34 5670 okay so height will be 34 34 and width will be uh width will be 56 okay and the let's give some border radius as well border radius is is I think 17 you can see the height is uh 34 WID 56 and B is uh 70 34 56 and Border radius is 70 okay now let's check yeah it's looking well well well now you can see that we have to move this icon in the center so to move the icon in the center we have property called align items Center so it will uh move the item uh horizontally you know vertically Center let's move from the horizontally Center using the justify content Center okay now we had created this button and if you see this button we have some space we have given some space so let's give some margin horizontal as well uh will be 10 okay now uh if you see the sign in buttons would be we had given some margin top and some you know like this on the center so let's do that as well so so margin top will be 804 sale for now okay let's keep uh 100 and the justify content will be Center so it went to the center as well but we want uh you know uh let's give something like this weight will be let's make the weight as a 80% and justify contain will be uh Flex uh justify content will be Flex uh flex and okay uh I'm going to make the hybrid as a 90% okay now I think it's looking better and the margin top will be let's make is 120 okay so we have signing Button as well now uh we have to create this don't have an account create okay so let's do that as well quickly I'm just copying this and replacing this text here after the signning button okay so let's do that as well so I'm just after this text uh replacing with uh this don't have account create okay uh style talk don't uh footer text basically footer footer text and let's style this as well so footer text we have to style so again it's going to be in the center and the color is this and the font SI is 15 so color is black so let's do that color will be black text align is text text align will be Center okay and the font size is uh 15 okay and we have to give some margin top as well margin top margin top will be 40 no let's make it 60 I think it's to is to top let's make it 120 yeah now it's better so we have this don't have an account create and on the create you can see there is one underline so let's do that as well uh quickly so let's add one another text inside it so we're going to have a text okay and we're going to sty this here in uh you know uh text decoration uh line will be black so if I see the suggestion so underline my bad and you can see that we got the underline in below the text okay uh now if I reload This Server so we got the underline okay uh now let's I think let's increase the font size as well as well some more size the font size will be 18 looks much more better cool awesome I think looking better now there's one thing which we have to do once more so this thing like you know the footer uh side like you know on the right side on the left side we have to add this image as well Vector so I've already what add we have to export the vector so let export the vector as a Forex and Export Vector 2 so let's see in the directory so I'm going to name as a uh left vector.png and inside the source we have a one folder called assets and let me replace that as well here okay so we got the left Vector my bad left vectorpng okay so we have to you know add it here so let's add it quickly so so how we going to do we're going to do with the positioning uh uh with the positioning so I'm going to name is position relative okay and after this I'm going to create a view okay and style will be styles do uh left vector vector container okay and inside this I'm going to uh image background and I'm going to give the PA path will be Source require require and let's add the path as well assets and inside that we have called Left vector.png okay and I'm going to name style as well Styles dot uh left vector image okay so we have two things like left Vector container so let's style the left Vector container so I'm going to name his left Vector container Position will be absolute okay Position will be absolute uh bottom will be zero okay and the left will be zero okay so we can't see anything right now so Let's uh add some you know left vector image some height height will be 2 uh height will be 100 uh no let's make 250 height will be and width will be 100 100 so this is how we had done let's increase some height you know height will be 350 and let's make it 150 looks better I think yeah so and let's decrease the font size will be 16 okay so we can see that this is the awesome looking uh login page which we had designed right now now when user click on sign in we have to uh like let's suppose if us a click on don't have an account create so we have to uh design the register pH uh register uh page as well so let's style the register page quickly okay so let's add the navigation on the create basically so you can see that we have a text okay so I'm going to add a touchable opacity my bad touchable touchable so touchable opacity I have to import the touchable opacity and wrap it inside this and onpress handle uh handle uh regist handle register basically I'm going to name is a handle register uh and let's create a function quickly const handle register when when user click on this uh when user click on this I'm going to navigate to the uh register P con navigation and I have to import the use navigation Hook from the react native navigation native you can see that and after after that let's navigate to the usern navigation. na navigate and the name is what name is sign up so let's see so if I click the user click on create so it will went to the sign up screen okay so again we have to InStyle this as well so let's InStyle the create account code page as well so I'm just going to just copy this whole code and paste the sign up screen okay because most of the component are same so let's name is a instead of login inad of Let's Make a sign up sign up screen okay and let's click on create so we went to the uh you know again sign up page now at the place of uh we going to have a create account text and the font size is 30 so we have to remove the hello code quickly hello text from the here so I remove this uh text and we're going to have only one text uh that is called uh MyPad that is uh we have called create account uh create the place of signing text let's make is uh create account account text okay the font size will be going to be 30 okay and we going to have to give some font weight uh will be bold oh it's too bold which I don't like let's keep it a 400 uh the font fit is like you know bold so let's give a fold I think okay so we have create account Button as well now after that uh we have to create multiple field So currently we have uh inside the create account we have just email username so we going to have a at the place of you email we're going to have a username okay now the second fi is called password so we have already password filled then email and mobile so let's add a email in mobile field as well so let me copy this this container username container code and let's add it so we're going to have a email password username and we're going to have a email so let's name is email as they have mentioned okay now next thing is called mobile so let's add a mobile as well so we're going to have name is a mobile mobile okay so now we have to add the icon as well so let's search the email icon uh here on this directory mail okay so we got this uh feather icon is looking uh let's use the and design icon as the name is mail so I think we can use this font I some uh icon as well so let's see mail if I type mail so we are not getting anything and let's use the end design okay so we got the mail icon now we want mobile icon as well so let's use the mobile one quickly uh at the place of font awesome we have to use and design at the place of user we have to use mobile one and we got the all the fields okay and it's looking too good like you know much um good now instead of signing okay so we're going to remove this forget your password text so we going to get rid of this okay so we have sign in button container we don't want to give uh uh basically margin top as a 20 for now yeah so we have given the margin top is a 40 not 20 so we have margin top is a 20 and we going to have to this create using social media so let's copy this text and don't have account text will be get uh uh don't have account text this one the margin top is too high so we have to decrease the uh you know the height and let's do like this the text will be going to change with the new text so let me replace with this new text or create using a social media and uh we're going to create one container for this all so View and inside the view of I'm going to name is a foter container style styles dot footer container okay and something is weird happened so the thing is this one okay so we going to name as a footer container and inside this we going to have a three button okay Facebook Twitter Google Okay so let's do that as well so we're going to create a I'm going to name as a class okay and name is a style and styles. social media container okay and inside social media content we're going to have a three icons and let's do that as well quickly so we're going to have a Facebook Twitter Google so let's search for the Facebook quickly Facebook uh Facebook with circle so which icon it's in typo icon so let's name is Facebook with circle okay and it's going to be from the in typo so let's import the inpo icon as well so I'm going to name is inpo for now and we have to import the in typo icon quickly let's import like this okay now uh you can see the color will be for the Facebook icon it should be a blue red and we can't see anything still on the UI okay because we on the sign in page so I went to the this page uh uh sign up page and instead of abing a white we have to make the color as a blue okay we get the Facebook icon awesome I'm going to get rid of this and we're going to name is uh let's add add one class name like you know one style as well styles do social icon okay now let's copy we're going to have a Twitter Twitter icon as well so Twitter with circle from the in typo let me quickly paste is that Twitter with circle and let's get rid of this space okay now uh we going to have one more icon that is called Google and I'm going to use Google with circle let's use the and design icon which I prefer and design icon Google so let me copy paste this again quickly and this going to be her and design and instead of Twitter with clone it's going to name will be Google and let's click on create okay so we can see all the icons okay so you know whenever I reloading this so it will come back to the signin page let's make like this you know initial router name so Qui let's name the uh initial router name will be sign up page so it will initially open this sign up page so it will become easier for the development so we on the this sign up page uh now uh what we have to do first of all we have to give some footer container styling and let's do so let's keep some margin top to the footer container footer container will be margin top as a 25 now after the to what I have to do uh we have a photo text uh photo text have some styling as well or not uh 15 and font we is legal okay so let's see pH text as well for sh yeah it's looking well nothing we have to change we have to change on this Google Facebook icons so we have created one uh style called social icon so let's style that so so background color will be white we have to give some elevation will be 10 okay and before that if I show you social icon we have to a social media container okay so let's uh do that as well styling display as a flex Flex direction will be row okay and justify content uh Center justify content Center okay so we get into the center and let's give some margin uh margin will be 10 padding as well uh 20 okay and let's keep some border radius as well uh border radius uh will be 10 No it should be 20 to make it Circle it's it should be 50 yeah now it's looking better so we had given some you know 50 as well now uh let's increase the font size of social icon as well so the size will be instead of 20 24 my gosh oh my gosh so let's increase the size so it's 24 24 in the place of 24 we're going to replace with 30 and yeah it's looking better and let's decrease the padding will be 10 okay so this is how we had created this you know social media icon and yeah uh let's remove this initial router name property and if I reload this quickly so we can see that signin page and when user click on don't have accounts create so it will went to the create account page and we have designed this man so uh this is all about this code and we going to I will post this code inside my grub so you can check it out and that's all in this video guys thank you you bye

Channel: Zero Degree Coder

Views: 7,841

Keywords: react native, react native tutorial, react native login screen, react native ui design, react native ui, react native login signup and navigation example, react native login screen ui, react native tutorial for beginners, react native expo, react native login ui, react native login, sign in react native, login screen react native, learn react native, react native for beginners, react native signup and login, login and signup screen in react native, react native project

Id: RZWX5krJHRI

Length: 54min 2sec (3242 seconds)

Published: Tue Mar 12 2024