React Native Tutorial : Login and Signup Screens with Formik and Yup

[Music] hello guys this is Christian and you're welcome back to your don't have channel so in our last videos we're able to set up our login and sign up screens right and in this video we are going to add our formic component to our form okay when we say form make what's formic it's basically a small react native components for building forms in react native and reacts okay so when you're coming from a web development background you already know what the form is so that is what in react native with them as phonic and together with some books okay so let's go to any documentation I'll leave the link down below you can come and read some stuffs here okay so what I'm going to do is I'm quickly going to install it okay so I'm going to copy and then go back to our project let me open a new terminal here all right so I'm going to paste it and then install it right so pause is installing let's click go to the documentation and read what we are supposed to do okay so it is code okay so you have to first import it so let me quickly do that copy I'm going to paste it here okay and then what next so we are going to call the component and then we are going to pass in initial values we are also going to validate it but we are going to do that with yup we'll come back to you up later okay so for now let me go back to our project and then right here oops then right at the top here I'm going to use our formic here okay so I'm going to pass our formic and inside our formic oops we are going to pass in the props okay so you see props good and then you're going to move all these stuffs all the inputs and then the button into our format okay and then this supposed to return a components not components okay so I'm going to cut this and put it down here all right so I think it's it's cool now so once I save it nothing happens don't worry now let me now what you are going to do is we are going to add some uh elements okay we are going to add some features to our inputs okay so what we are going to add for now is going to be our on chain test okay so we're going to add on chain text and going chain text is basically whenever we type in our input text okay whenever we type in let's say okay whenever we type in here it triggers the on chain test okay so let's just log so that you know what I'm talking about let's pass in the parameter C value and let me call the value here okay let's save it and ice on the console see once I type it gets you see whenever I type it gets updated or it lost the value here right so that is basically what the unchain test is doing so I'm just going to pass in a props here which is props dots handle change okay so that is what and then we are going to pass the perimeter of the name of the field okay so before we continue let's add some names here okay we're going to add the initial values which is going to be username so let me just copy it let me give it an empty string let me change this one to small oops so this one too small let me wrap them in another calibrances good and then we are going to add a password okay so a password that one two is going to be an empty string we are going to add a confirm password so that one is going to be an empty string okay whatever you put in here is going to show at the initial stage okay so let me see when I type in boy here let me see Let me refresh and let's see what happens okay I don't know why it's not coming but then you let's finish with what you are doing I'm sure by the time you are done it will okay so let's pass in there username here all right and then we are going to add a couple of things we are going to add an ombre function okay which is also going to contain the props what is happening props dot we are going to pass in there and the blade okay you're going to also passing a username as a parameter and then you're also going to pass in the value okay and here we are going to pass in the props then we are going to pass in value dot username okay so that is going to be the value and then we are going to pass in detached okay and this touch is going to contain the props okay good and then you're going to pass in the name yes don't worry I'll explain everything to you okay and then the next thing you're going to pass in is arrows then we are going to pass in the props dot error dots username okay we've already passed in the placeholder okay so let me refresh the screen and see what happens so now what you're going to do is you're just going to copy all the steps and then we are going to pass them to the next ones okay so you're just going to change the name to password all right so let me copy it and then you're going to pass it here and then there let's change it to password and then now let's copy it once again let's pass it here too okay again that one the name is going to change to C password so I'm going to select all of them change it to C password now I'm going to save it okay so let's move to the up button okay so what you're going to do here is you're going to pass in and on press the function you are going to call sorry we are going to pass in the props props.handle submit okay so this handle submit function is actually going to call the on submit function okay so now let's save it let's move to the unsubmit function so on submit function and then here we are going to pass in value okay and then action outside here I'm just going to pass in I'm going to just lock the values okay and let me just pass in the values oops good so now let's save it let's try hands on it let's type in something here so let's type in the username let's see a Christian oops then let's see password one two three four confirm one two three four okay yes anyway and then let's type in let's press on submit okay so now come here as you can see here we are receiving our values right so that is basically what we are trying to do here I don't know why only only passing a value here is supposed to appear at the initial stage let me try and reload it let me save it before I really don't know let me let me try and let's see what's happening here supposed to change test okay so I'm mistakenly didn't add the value okay so let's add the value and see if it's going to solve the problem for us okay then let's pass the value as appropriate so let me say value let me pass it here and save it all right so you can see on our screen now the initial value is coming okay so when we change it to Christian let's save it and let's try and refresh it to at the initial stage the value we're expecting in our username is supposed to be just Christian right all right so as you can see yes we are getting Christian okay but we can also change it to a different value right so we've been able to wrap our form with our phonic component right so what you're going to do next is you're going to add the yeah yeah okay the app is basically going to help us to validate our form before we make a post Okay so this is how it looks so form is actually yup sorry let's try and install yup so I'm just going to copy this let's go back to our project and then I'm going to paste it here to house is installing let's go back and see how we can use it okay so this is how it is you can import it and then you create an object okay so it will contain all the fields you have in your phone and then you can require it so as you can see the string means it's supposed to be a string but required means it's supposed to be it's not it can be now okay that field can be left empty and then as you can see here H so it means this flow is supposed to be an integer a number sorry supposed to be required a positive okay and then email so it's a lot you can come here and read through all of them so you just go to our project now we already have a copy of it so I'm just going to paste it right below here okay so here I'm just importing a app function I'm importing everything and then I'm creating an object okay so I have a username sorry oops username and then I have a password the password is supposed to be two so password and see password so what I'm trying to say here is this username okay and it's supposed to be a string the string we also want it to be required okay and then in the password side I'm saying oh that one two is supposed to be a string but then that one the minimum character we can take is six okay so below six is going to throw an arrow all right and then it's supposed to be required same as the C password okay oops what is happening okay so yeah I'm supposed to give it a comma here and then let's come down here let me remove this one from here okay so I think we are good to go let me try and then give you some space here okay good so once it's done installing we are going to add it to our initial values okay so as you can see here you can pass another which is the validation scheme okay okay oops where is it so we are going to validate it with that was the name we gave it to it review schema okay oops so I'm just going to pass the review schema yeah okay so it's going to validate our form before it will send or to move to the next stage which we are going to handle it in a couple of minutes okay all right so once we are done installing let's try our form again okay so I think you have to go and then let's reload the app okay so we have to start this again all right so now let's try our hands on the phone and see if we've been able to achieve what we wanted it to so let's say I'm going to give it Christian oops there is an arrow let's see what the arrow sees the Earth is box dot validate okay let's go back let me check I think this is supposed to be validation schema I think yeah actually that's what to do the arrow so let's reload okay so now let's try it again Christian okay create an empire so let's just try and type in one two three let's move to the next one okay so you can see you're getting password must be at least six characters okay so this is actually job at work okay it's trying to validate our schema or let's see our form for us okay so let me try it again by saying great see now it's gone let me try again with this one okay you see now that one two is also validated Okay so until that we can never submit it when one of them is not validated okay so let's check Noah console you see I've click on sign up it's not actually posting anything okay but once you are done with the validation you can now click on submit and here we go you can see our object is being logged in the console okay so that is basically what the formic and yup combined together do okay so we are just going to do a copy of this for our login page okay so let's quickly move to the login screen and I'll go to my log here so I'm just going to copy the app and then the formic okay now paste it here and I'm going to copy my validation schema okay and I'm going to paste it here now I'll come back later so here less below this so now let's call for me components oops let's wrap them on let's see if it's oops okay so now let's wrap them inside this receive okay so we are we can now change or copy this components and replace them here okay let's see if it's oops so let's try and then pass in our prop okay let me try and do it exactly what we did here copy foreign let me move this one down okay I think I have to move this one up save it something is happening here prop username so you have to add the initial values and then our schema here okay we're just going to copy it you're going to paste it here let's save it all right so our login screen is also right okay oops supposed to be signed in or login okay good let's save it thanks let's try and then stay something here yes okay and the validation is working as well so we've been able to achieve what we wanted to Okay so we've been able to add our formic components around our home okay and then we validated it with your okay so in the next video we are actually going to start creating the back end side and then link it with the fountain so that we can actually sign in a user or register a user to the chats up okay for decimal click on the Subscribe button if you haven't enjoying this community see you in the next video foreign

Channel: The Don Hub

Views: 352

Keywords: formik, yup, react form validation, react, formik tutorial, react formik, ProgrammingTutorial, ReactNative, ChatApp, Formik, Yup, Firebase, Authentication, AppDevelopment, react forms

Id: wVmLG9K9S00

Length: 20min 12sec (1212 seconds)

Published: Fri May 05 2023