Login + Registration layout / Authentication Flows - React Navigation v5 for React Native with Hooks

hello everyone this is no freaking and yeah with the new series and today we are gonna see how we can create an authentication system for react native using react navigation 5 and talks and they have nothing like specific in mind like a clear idea what we are gonna do but probably what we are gonna do is create a login screen create a registration screen and create a home screen that will be accessible only when user is authenticated to access this page so I created this repo you can find it in here if you want for the backend we will use this same back-end which we use in react native Apolo you can like clone this project call inside server and start the server and basically this one is using a tool called stroppy which is like headless a mess does provide us with authentication out-of-the-box registration on to the box and it returns the data as form of API that we can consume depending on the model that we are creating right and for 200 I will just call with this card like this we don't have to recreate it again good let's go to code we have in here my IDE and also this is the startup project that gets shipped with react native what we can do let's create some layout in this video for the login screen and the registration screen yeah probably this will be enough so it gets rid of this save and you see in here that I have this ugly error screen that is really in react native developer hates but because we are good the developers we will get rid of it so let's not so I will call it creating real native screen this is just a snippet that we have and it's not important next exporting that adding some text say welcome to our app with no styling and because index that yes is expecting app which is exported as default all we have to do is default and even the name in here is not is functional because it is a default function right and you seen help that we have on new screen right let's go to in here and all that I already started by creating this is a folder seen here that I create config that will contain genetic conflict there is navigators and I will create other folders so I'll say screens that will contain some screens and component that will contain our components right and probably a good idea would be to move other app inside SRC right and in here this will get broken because I need to come inside SSE app and yep it is working again and the first frame screen we are gonna create is the login screen so I can just come in here to login screen and copy this paste it in here and they say we'll come to the login screen and for me I prefer to export a non-default faction so in here on login screen good and then side app instead of using all of this I can just use my logging scheme let's format prettify remove remove unwanted side and remove unwanted import and ratify okay good and you see anyhow that we have welcome to the login screen let's go inside login screen for me what I think I have a design in mind but I don't think how it looked at it how it will looks like but try my idea is to have a title in here all of the screen I have to input right and input will be email password have a login button and have a registration button and the error right so it starts by building this and what we can do I will coincide my components our extended text components while react native with this heading right and literally needs between I would import text and what I'm planning to do I'm planning to propagate all the props in here so let's say I have text right I will extract children from here and crops and our under the children and all and propagate all the props to the text so let's text import here go back in here and this kind of having this I need to have the heading right and this should be working as text but the differences we need to pass some styling to it so we will have blow me yeah we will have style but extract style from here here tissue pin like this in here we will receive some start from the outside and we will be able to add our own style and I will call it text good and in here I will change the font weight of the text bold totally and add font size to something like this mm-hmm-hmm thank probably how not I will change this to inhale we will to name it login right and the false probably old code with 32 good it looks good and I will say the color is black because probably also we will add a theme in to it using the the theme provided Patrick navigation that I guess a lot of people are not aware of it so it is a good idea probably to edit so let's go back to the login screen and info on everyone align my items vertically so I will do this and I will add some padding top and then we say from the 100 and then top that probably it looks great I don't know he needs on with this yeah and the next month will be to add an input so like we did with the hidden I will create my own input component inside the components folder and we'll call it important that this input will extend the the props of the text input by reading some our important text input on a veneer text input this is an self-closing component and what what I expect is I don't expect children I expect style and the props so I will propagate all the props in here and I will have my own style and the name will be input right and I will go inside my login I will create input and yeah and let's add some styling to our input so in here I would have input in your input and I render we say diagram probably I will go with some gray color yeah I see in here there is no input address at the width of 100% good yeah that's it and let's see that let's add some padding in here some some very 20 and the parachute comes in here and my idea I'm always trying to keep the input not related to the screen so I will not came in here and had to marching vertical of 20 because if I did this and in another screen I have an input that has a marching vertical of something else I will be in trouble so all all the style related to the screen in particular should be passed from the screen itself right so I will remove this from here I can came in here add some styling styles input gets an input in here and do my change your taken off 20 good now I guess you can do something in here also let's add a placeholder so place holder and you have email good we can make a Nazi placeholder you know you can you can see you take us and yeah let's put the color bit lighter good and I would add internal adding of 20 good and Porter radius of 8 and because the input looks good right and yeah that's it so I will create another input and then you see in here too much in vertically is so big so what I can do I can put it to 8 and add style into my heading styles title right and they came in here and I'm saying tie itself and I will say my chain 2:16 almost same theater yeah I guess it's ok probably more let's go with 48 good good and the placeholder for this will be password good and yeah that's it so I have my email probably the keyboard keyboard type let's dig into the input text input and see what keyboard type is a basic give or take good so in here in here I'll pass the keyboard type which is email address good and you see in here that I have this keyboard which add this is like enhance the user experience and for the password I need the text to be encrypted right so I guess there is property called secure text or secure entry texting nope secure text entry yep and you see in her that I have my text which is encrypted good the next component will be a button but also I will call this button fill button I will have the same period in your painter screen and what we need I need touchable audacity and they need the text so I will get rid of this I will rename it this Help button and I will have an opacity and inside the touchable capacity I'm gonna have my text and the text will be passed from props so I will have title and in here under my title and I will do through other case and let's see how it looks like so I have my input I have my filled button with title which is login yeah you see in here that they have this button so it's it will not receive style course and one place so the styling for the styling I will came in here to style does the style probably a better idea will be fastest time in here and that we have which is this and then as style forms outside like test the outside can overwrite what we have in here so in here I would have container and we say background color and ultimate purple good good looks good right and what I can do I can do it with 100% good and you can align items Center and just TFI content center and then inside the text I will add style style text and then you can do text like I say the color is white good and in here go to the same target same package 20 good and Porter it is 8 good and for the font weight probably I will cope with something like this and font size 18 so much I guess 16 okay 16 is good right so we have this I put a format and a little song to impress in here and one place in here and the same for other components so for the Hadean I guess what makes sense is as Stein as the second style like this we can overwrite it from the outside and yep the same a guess from the field but now it's already ok and the input yeah the same in here so I will have my style as second and I will get it to fit in here and they can format making put right now inside looking we will do the same we have tie it down on the up style we have stride with those times button or blocking button and we have compress and we will - just an empty function good so I have my login button I came in here login button change vertical and that will call with 20 or more commonly yeah I guess it's ok and the last component we have is another button as form of text so I will call it text button so I will copy this came in here came in here Collins text button degeus paste and I will rename this text button and it will have the same so and here takes button title you know you just you count create one and today scallop style styles probably have not pessimistic for now and has impressed and you need and we have something like this which is ugly I guess so what we can do we can go inside text button get rid of the background color and then change the text to purple I guess it looks good probably the Sunny's it's smaller and I'm sure when you come to create one okay now it looks I guess good right now let the user can go to the registration screen can log-in from here and yeah that's it and also I guess a better idea to keep that this ready because if we didn't keep the pairing the press of earlier will be small like this and there is a theory in mobile application called a fat finger and probably sometimes have like fat fingers and probably they have problems with ice troubles so probably making this ireia principle as big as we can we'll help them like this nifty press in here see that they can navigate okay and the last component I will create will be the error so screen the parable contain just a text and and we need a few around probably just text text text and only rename it error and this will receive the error message and get rendered in here and I will add some staining to its tide starts text and yeah the text will be probably we need a view this weekend Center the text in the screen and 2004 rates and stuff so I will have test your style stance dinner and then in here now that my container and my text good and now if I go back in here I will have my hair not component with error and a good you see the error what we can do we can change the color to red and we can go from right to port good and we can in here at some firstly called pad into it yeah it looks good good so yeah so now I guess we have all the components we need so if the error is empty we will have an empty error message good now that we create our login screen and I want able to and we'll just copy this and create another screen called registration so registration screen and in here I'll just relate this logging with English creation screen probably the pattern should be register good and and this login should have a question but uppercase good we don't need test button and if we go back to the app and find out my registration screen I will have something like this which is decent right and yeah for that registration screen I will add and a close button probably leads to it as a bottom let's do it as a screen person see probably we will do it as a model so now let's go to the navigation part so in here out go connect an application and we will do some instance some talks we need to install the very act navigation native dependencies because in version 5 or probably even in version 4 I don't remember they extract the packages two separate packages like this you ship only the things you need but the native is and is a zone like a mandatory take two so I would open my terminal I will come to this its expanded a bit and over to the are okay I copy you take us come on no I cannot copy copy please come on I don't know what is wrong with my paste anyways probably I have a shortcut say any other shortcuts but no big deal so and if you are using export you copy this we are using react created it means project see its box again and I will copy those dependencies and also we need this tag dependencies and the stack is when the screen cause one above another and this is what we have when the user presses the login we will open the registration above it so this is a stack so came back in here crappy days came back paste yep and I will call inside us and through an approved instant because there is some native dependencies on on those dependencies that's a linear good and he said cutting I need to put this and the top of the index or index gso and it's common sight in the extra GS and the first import repeat this one good need to complete let's open the terminal go back out and libyan because we did some installation on the native side now that the rebuilding is done what we can do and I would close all the other screens right and inheritable all start important things and the first thing I'm gonna import is an app container from the navigation nature which will be the parent of all the screen which is called navigator container good and also from the stack I will import utility called create navigation creates like navigation or something like this softly Vietnam react nullification stark creates navigator good and yep yep and in here I will create my Road stack which is the stack that will contain all the skin know something same repeat stack and applicator and all the rock on my screen inside the Navigator container and the Navigator container is responsible for controlling the theme in for control in the state from restoring the state for deep links for a lot of useful stuff so going to my root stack navigator and inside my road stack I will have another stack called both stacks so we have work stack and creates like navigator and in here I will have my tack screen because we will have two stacks we don't have a stack and a homestead both stack is the authentication process stack and the home stack continued application when the user is authenticated right so inside here I will join a college route stack and it will take component and the component will be the of stuck yeah let's call it off stack I don't know what got that navigator okay and let's move this to navigators and create a component called tag navigator it will be almost the same as this one I would have my oath stuck in here and instead of having this I will have both stack navigator and inside this I will have my logon screen which is the login screen and I will have the registration screen so English creation screen good and I will export this as static munafiqeen good and for the screen I will just gonna import the correct screen and in here I have typos and let's go back in here and as a component we will import the earth stack navigator and like you can see in here the our application is just an help to help and what we are connec what I will try to explain what we did we create a route stack which is the step that will contain all our application and inside the fruit stack we create a screen called both stack navigator right and probably the name will be both good and when we have home and we'll create another stack in here called home stack and we will import this thing and inside of the stack navigator we created another stack and inner stack that will contain the login and the registration screen yeah and now let's get rid of this and you see in here that we have this for off stack so I can come in here and pass sample screen options and see hey they're shown truth false this will hide the header of this one and the same for two off the stack good and like you see in here they say that we have no hitter now let's go and decide our login screen and try to navigate when we press on this button so we have an aggregation perhaps injected into our screens right and when this login button displays to our intern application navigate to the name of the screen that we created in here which is illustration good so i refresh again you see but I can go back to my registration and in registration because we don't have the navigation bar probably and it's add button in here like this we can hide it and to do so I will use there is a plan your choices what we can use the own let's go with iron Pickens good and gets installed I guess the I'll try it and a couple of your taste I was working on another project and they found this library gets broken and the RC release so let's go with the previous the written the release number four number four so yeah- yep this one but this one requires a link because I guess it is an old version so we need to connect later and link to library good and this of course probably I don't know if we need to do or install but just to make sure lead to it just in case there is some native dependencies but weakest link will take care of that good and I will - we are and rerun my project and in her react alkanes those icons are for my unique edges and this is the package and in here there is a version number four and what we need we need a close I can so let's pick up this one and let's see the project is running it works good and what we will do inside the registration screen I will have a component I will have a component in ear cold I can put them right and this icon button will contains all the icons for this song taken button genius this icon button I'll just copy this paste in here and mainly I can button and I can will take for sure the name the style and on press and in here I will just can I use can I use this good and I will use this icon component and for the styling I don't know what styling committed but just keep it like this for now and before here not just pass me good fixed in port and they have this component I can button that contains this has a style and husband present and name good so inside registration I would place a name and the name that we will pass is this closed circle now if we go back to another Arab open this see that we have this glove circle right so don't do some styling to it style hi let's call it scoops taken and because we needed to came in here some somewhat some dope position from good right and don't say top 40 for me probably more 60 and I will write to be the same padding you know how much padding we have and then we have 20 so thanks for 60 in here and six senior good and inside I can put the icon button components I will color and the color will be our primary color which is the purple and we will change that we will make it like configurable but for now it is okay so now when we press on this button we need to navigate back this shoot goes inside the icon so I put icon as first and in here I have no place and I'm doing this one is pressed and were able to decide I will extract the navigation from the props and to top like this we will go to the previous screen in the stack so i refresh i go inside login i closed and it is working correctly okay good and one last thing probably notice that the color the background color is not white probably needs me check because if i go to the login screen out of container we didn't specify I cannot comment so you can see playground color and - right and you see that our application turn into white but if we - so in each application if we didn't specify the color it will get a default color and this default color is the color tatak is coming from the react navigation library and if we call incited themes you will see that we have this thing so let's copy this will come in here I will create a theme themes folder probably and let's create seams and inside I will create unlight and probably will have a TAC team in the future that we will connect with dark mode yeah it's good idea yeah okay so I have this I have this my theme but I can import from from my vacation native which is called my never know not meet him but default theme yeah so inheritable export right and i will do the same as the default theme in here and the color that I want to change just background color for now and if I see this to white in here spread all the properties and our export this so now inside app I can pass a theme that we will use is the light if I call back to mine okay and I you see that my pattern turns into white and if I caught a lot registration it is white as well good and I guess that's it for this video for the next one we will probably handle and the logic of to login and the registration using hooks like you state we will try to use all the hooks probably your state use effect yours let us reducer and use context and it will be fun okay until then see you guys bye

Channel: bithoven

Views: 41,829

Keywords: ReactNavigation, ReactNative, React, Navigation, Authentication, flows, Login, LoginScreen, Registration, RegistrationsScreen, Tutorial, Master, Stack, Stack navigator, Login screen, React navigation v5, react native, registration screen, hooks, strapi, backend, themes, dark mode, react-native-ionicons, react-native-dark-mode, switch themes

Id: rHJTv3KlZW8

Length: 35min 58sec (2158 seconds)

Published: Mon Apr 13 2020

Reddit Comments

[u/JuriJurka]

Thanks!!!!!

Remindme! 1 day

[u/marius4896]

very nice!