Login & Signup Screen UI Design Tutorial in React Native

hey guys welcome back to my youtube channel today in this tutorial I am going to show you how we can create the login screen ey signup screen UI and this screen UI this is the landing screen or getting started screen this is the first screen when our user will open our app you can say it has a splash screen so let me show you what we are building today so I have refreshed the page so you have seen there is a beautiful animation for these screen elements and after clicking on getting started we are presented with our login screen and over here we can type our email id so you can say as we have started typing over here we have presented with this icon right and we can type our password and we can we can see that letters over here by toggling this icon we can go to our signup screen over here we have similar features and we can go back to our signer screen 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 mail icon so that you get notified whenever I post a new tutorial so without wasting any more time let's get started with the tutorial okay so we are in our existing project over here I have already shown you how we can implement different parts of the reactivation version 5 so as you can see this is the bottom tab navigator this is the Tron navigator so we have already implemented all of these things in our previous tutorials and this tutorial is also a part of this tutorial series where I'm showing you different parts of the reactor vacation and if you haven't seen those tutorials yet then I would highly recommend that you go ahead and see those tutorials first then come here and see this tutorial it will be helpful to you because the idea is that first the user will be prompted with the sign in and sign up screen the user sign into our app and then they will be presented with this screen so that is what we are going to implement so let me tell you what changes I have made to my existing project so I have created few extra screens over here as you can see this is the enroute strike screen this is the main screen well our splash screen sign in and sign up screen is located this is a stack navigated screen and I have already shown you how to implement the stack navigator in my previous tutorial so I'm not going to explain those things over here so as you can see we have implemented three screens over here and those three screens are present in all in stack screen and we have created these three screen as well design in its flash and sign up screen these are some basic screen with the X and a button like this nothing fancy as of now and this is our main app dot J's file and over here I am going to import the rootstock and as of now I'm going to comment this drawn navigator and I will use this routes track screen so now we are presented with our splash screen because that is the first component in our route step right so within the splash screen now we can start designing our sprint before doing anything I want to paste styles over here so that our tutorial doesn't get lengthy and I will explain those styles whenever it's needed so I have pasted over here and you can pause the video and take note of codes and also I will be uploading these codes to my github repo from there you can also get those codes and you can find the link in the description below now let me explain we have used the height for our skin and we have created a constant for our no-go height and width and it is calculated based upon our device height and it will be 28% of our device height so we need to import the dimensions now I have saved it now we can see that our screen is present over here so now we can start designing or a first element of our splash screen is our Nova so I have also added a logo in my assets directory from that we can use the image over here so this is our main header part and another one will be the footer so this is our header part and this is our footer part so you can see the header has the Flex too so it's getting 2/3 of our screen and footer is getting 1/3 of our screen then footer is having the white colored background and it has some border radius as well now over here I am going to use the image for style of it I am going to use logo style precise mode of it will be stretch and we need to import the image now saved it now we can see our logo is present over here now we are going to add some text stay connected with everyone and the another text will be sign-in with account now after that we are going to use a button over here but we will not use this button API from react native we will create our custom button to create the custom button we are going to use some gradient color over there on the bottom so for that I am going to use this react native linear gradient package now I need to install that so I am copying this code and paste it over here ok it has been installed now let's see what else we need to do so for the react native greater than zero point six zero we need to do this for iOS so we did our part file now we need to add this code now close this channel get back to our main file now we can use that linear gradient for our button and to use that first we need to import that and also with this we are going to use some ankle in order so I am going to import that from react native vector icons which I have already installed in our project I'm going to use material icons now for this text I am going to use style title and for this text I am going to use style text so now it's looking good now start designing art button so for button we will also require touchable obesity now for this linear gradient I will use the colors I am going to use these colors and for the style of it I am going to use the style sign in and for this textile I will use tech sign we are having some error over here okay so for the linear gradient it is showing some error let me cross this metro wondering why and rebuild our project so now we are presented with our button now we need to wrap this button within another view the style of this view will be button now our button is located in correct position now we need to use an icon over here so the name of the icon is never yet next color of it will be white color and size of it will be 20 okay so now it's looking good now we are almost completed with our design for this splash screen but we want to implement the animation effect so for that animation we are going to use another third-party package which is react native animator will so now I am going to install this as well so for this I need to copy this command and paste it over here and hit enter so that package has been added as well now we can use those things over here so it will be animatable dot image and over here we can use the animation and the duration so let me go to the bottom of this for the logo I am going to use bouncing and duration of it will be fifteen hundred millisecond okay I haven't imported the animatable yet so let me import that so now you can see a beautiful bounce effect over here right so for the bottom section of our app we need to use another animation so I am going to use animated view and for the closing view as well and for this bottom section I am going to use this fair enough fake animation and you make table okay now accept it now we can see our animation is working properly so we have completed our splash screen white design now we need to use the navigation over here so for that I'm going to use navigation prop in our splash screen and over here it will be navigation dot navigate and we will never get to our sign-in screen so now after clicking we are in this sign-in screen now start designing our sign-in screen over here also I am going to copy/paste my Styles over here so I have pasted the Styles you can pause the video and take note of these codes okay now after this we need to get similar kind of things from here so we need to import these things also we need to get the Statue velocity dimension over here and for the icons I am going to use two icons one is the feather and other one is font awesome also you can see over here we have used the platform API so we need to import that as well so now our first section will be for our header and next one will be our footer so over here we can see that one-fourth of our screen is our header and 3/4 of our screen for our footer so within header we are going to use a simple text over here which is welcome and for this text we are going to use this text header and now within the footer section we will have our main page content such as email field password field and the sign-in sign up button now the text will be email and for the style of it we will use text footer and then we will create another view and for this view we will use the style action and within this view we are going to use first our item then the text input field and then another icon so first I am going to use font awesome icon color of it will be this color and the size of it will be 20 you okay we need to recompile our project again now we can say our icon over here now we need to use the text input so for that import the text input from react native then we can use it over here for this style of it we can use these styles text input so now we can see our text input field over here but it's not looking good so let me check okay here is the mystic we need to use this text input so it is this so now we can see it's looking good so another thing I want to do Auto capitalize will be none and then I am going to use another icon which is the feather icon name of it will be check circle color of it will be green size of it will be 20 and it will be presented over here when we start typing anything over here and if the field is empty then this icon will not be this way to implement that we have to introduce state over here but before that I want to copy this code for another thing which is the password field and the icon of it will be I off and the color of it will be great and over here I also want to use the text so the text will be the password and for the style of it I will use merchants of 35 so now there is a proper gap between these two fields and I will use the feather icon block so it is similar to this and now we can type our password over here but letters are visible so we need to use secure text entry to truth now it is not visible right now we need to implement whenever we tap into this eye icon then these letters will be visible and when they are visible then we can tap into this eye icon then it will be again in non visible mode so now it's high time we need to introduce the step in our application so for that I need to use Const data react you state and for this state we will use an object over here so first we will use email then password and then security sentry at school so these things will be required to do these functionalities so now for the first email let me do on change text text input change and we will pass the value and that value will be passed to our function so let me create that function over here if the length of it is not equal to 0 then we will update our state so we will use set data to update our state and we will use added destructuring operator to get existing state and then we will assign our changes so our email will be the value we pass and the check text input change will be true and if this condition is not satisfied then we will also set our data but this check text input will be false now we need to check those data who present our icon over here so data check text input if it's true then we will be presented with this set of otherwise we will render null served it now let me start typing this okay so here is the problem remove this so now we can see that our icon is being presented whenever we have some letters over here right so it's working as expected now I want to implement our simple animation over here so for that I will use the animatable I need to wrap this with inner view and over here I will do this bounce in animation now served it now let's type anything over here in this email field so now we can see that the icon is being presented with an animation right so now we need to implement this password feasibility feature with this icon right so for that I will use similar kind of function for this text input it will be handle password change and over here we will update our state similarly we will use the ID structuring and for the password we will use the value presented over here and now we need to create another function for the mobile functionality so the name of it will be update secured text entry and we will update our state over here so the same thing first we get our existing state then we will change the value which we want to change so the secured text entry will be set to false if we click over here actually not false let me change it to changing to its opposite value if that is true then it will be false if it is false then it will be true okay now we can present the data over here sub data seek your text entry if it is true then it will be true otherwise the secure text entry will be false and for this icon I need to wrap it with touchable opacity so that we can click on this or tap into this icon and for the on press of it I will use this update secure text entry function okay so I have typed something now we can see that it is toggling the visibility of the password right but we also want to change this icon so let me do that so if data secured text entry is set to true then it will be this icon other voice we will display this icon okay so now we can see that there is top of visual queue to this icon as well right now it has been done now we need to just add two more buttons over here so it will be Kyle's button and over here the button will be sign in and sign up for the signing button I believe the linear gradient style and that xed of it will be signing and for the colors of it I will use these colors and for the style of it I will use the styles signing and for the text of it I will use this style sign in but it's not looking good also I need to change the color of the text so let me add white color and for this we need to use this text sign so now it's looking good now let me grab my charger a few moments later now for the signup screen we will use the touchable opacity and we will use the text sign-up so far on place we will navigate to our signup screen so it will be our navigation dot navigate to sign-up screen and we need to pass the navigation over here now for the style of it I will use the styles for sign-in and then I will add some more styles over here so the border color will be this color order with will be won and marching talk will be 15 and now for the text sign we need to use text sign it's looking good but I need to add some color for it and the color for it I will use this color so now let me refresh this okay now we need to add the animations over here so for this white section we will use the animatable not move and for this animation view we will use use this animation and over here we will use the status bar background-color feet will be this color and bar style of it will be light content so now our status bar is looking good and it will change the status bar for our Android device as well now we can copy this code for our signup screen as well because it will be similar to our signup screen over there we will have another extra field which will be the confirm password right so I have copied all of these and paste it over here and now for this password I will copy this thing and paste it over here it will be confirm password so now we are presented with the confirm password the heading title of it will be register now and the buttons will be signed up and sign in and when we are clicking on the Sign In screen then we will go back to our sign-in screen so we can use this navigation dot navigate or else we can use go back okay so we will be back on our previous screen now we need to just add some other thing for our confirm password secure text entry as well so let me just copy this thing and it will be confirm secure text entry and it will be similar to this so update confirm secure text entry and it will be confirm secure text entry and similarly this thing it will be handle confirm password change and I'll confirm password change and it will be confirmed password so confirm okay so now let me start typing something so we can see that our icon animation is working properly and for the password let me start typing a password so it's working properly and for this so it's working properly and they are not conflicting with each other so it's looking good so that's it guys this is the tutorial and in my next tutorial I will implement the authentication over here so our these screens actually do something after logging in we will be presented with our drawer now we get a tab navigator screen which I have shown you previously in this tutorial right so that's it guys I hope you have not something new from this tutorial if you do so then hit like button subscribe to my channel for more tutorials like this and let me know by commenting down below if you have any kind of solution for me then also let me know and I will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 179,438

Keywords: react native, react native tutorial, react native login signup and navigation example, react native login screen, react native splash screen animation, react native splash screen, react native animated splash screen, react native animatable, react native linear gradient, react native linear gradient tutorial, login & signup UI in react native, login and signup screen in react native, splash login and signup screen for android

Id: Rs72pRwXIzA

Length: 26min 47sec (1607 seconds)

Published: Fri Apr 17 2020