Formik React Native Crash Course

hey there everyone they share back again with another video and welcome to day two when you produce this high quality of videos in 4k you need absolute support from machine and this Mac Studio is giving up easily just finished recording one hour of video and it crashed and I think you can hit a subscribe and keep my model up so that I can finish this up so in this video we're going to have a much more fun in the react native world this video is definitely going to be tiny bit longer side but it will give you so much of the knowledge and so much of the use case scenarios for the future videos it will be absolute ground Baseline for that so what we have done so far is uh this is our app and this is take two obviously so we are just pushing it up here now in the generate video generate password string in the last video I realized that I made a mistake of instead of saying uppercase characters I just said uppercase here I'm pretty sure most of you have already caught this one so go ahead and fix this up this is the thing that I caught just after finishing the recording the videos but I think you got what I really wanted to say as in general or what I wanted to say or teach you basically so I'm pretty sure you have uh caught that up so all right we'll minimize this we'll come back on to this one the next thing that we want to learn about is the formic yup and one more package library that I'll show you now the reason why I told you about this yup package in advance because so that you get enough time to explore this one if you remember we use this yep package here for just one thing which is the password length keep that in mind we will going to be use that as of now this yep is just detecting the number type if it is not number type it will give its own message we can customize that also but for minimum maximum and required it is giving me this much of the error messages there could be more error messages the reason why we studied yup in advance is because now we are going to take advantage of this one let me take you on my Google Chrome this is where we'll be working on so build forms in react without tears obviously and formic is world's most popular open source library for react and react native we will be using its react native part there are tons of tutorials about react but react native only handful of them this is going to be one of the best tutorial on the formic which will help you to understand it through the documentation through the implementation both side we are going to cover we will also be using another Library which is react native bouncy checkbox it's super super easy all it does is simply give you these check boxes the use case is pretty easy install it just like this npm installed react native bouncy checkbox really a long name and then all you have to do is this is the bouncy checkbox this is how you can do it and properties size fill color unfill color text icon on press what you really want to do on press really basic couldn't be much more simpler so first what you can do is go up here copy this go up here on to this and click on the docs and just go on to getting started scroll a little bit and here is the installation for npm install format now as I've just mentioned that this is my second take I've already installed this in the previous video which got entirely crashed uh so I've reseted my entire code script and we have already got this one as installed so here is our uh where is it our bouncy somewhere here I'm gonna find it just give me a second it's little bit difficult now now it's not in Dev dependency this is dependency so formic is here this is the version that I'm using feel free to use any version you'll learn it from documentation so that you can use later on version and react native bouncy Checker don't need to talk much about it it's super super simple to work on with now let's go ahead and see about the formic docs and how it works the first thing that you should go is go into the formic docs just click up here this is where you will be getting now this is worth reading all of it in case you have time go ahead and read about it and the most important thing that you should be reading is about the gist that how the formic actually plays around and all of that then we'll jump on to the specific documentation that we want to study so formic keeps a track of form State and then exposes it plus a few reusable methods in event handler so what happens is when you actually make your form in a regular way by using regular text inputs and all of that you have to keep a track of lot of these things like when was the form changed when was the form submitted and all of that and there is no such way of doing such things in react native so every single event you have to keep track of it what formic does it actually exposes those methods to you directly so everything that happens in the form and the submit event handles it then passes it on to a state given to you by the formic itself and through that state you manage all these things okay so this is clear now formic has this really long syntax so instead of introducing your forms in input like this like this is an input here and this is input here you don't input like this you actually import a component itself which is a formic itself now formic component has a lot of these props or properties one of them is like initial value what should be the initial value because it has to keep a track of when the initial value was changed so that it can produce errors or put these things into values now after that it has validate but not just validate it has another thing which is known as validation schema another property like this if you'll scroll at the end you'll see that there are complementary packages and the author itself personally I use yep for object validation schema so we are not going to be using this validate we will actually click on validation here in the guides and we can see that we have this validation schema that can be used from the yup validation so we have already written validation schema for the up just for one property password length so that you can first understand the syntax later on we might write more than one schema right now just password length all right so going back after that we can see ah let me scroll this after this we can see that there are a couple of other things like what happens when the form is submitted so on submit so on submit you are given access to all the values from where it comes it just comes up here from the next property as set here so all the values will be given to you in the forms all the things will be given to you so you can access all of them just by the dot notation it's a big object I'll show you the result of this values by console logging it and we'll see that how we can do console log in the react native and then you can actually write your method just one what you want right here or you can just call a method here however you like and these are all the properties that it gives to you not properties actually events that it gives to you like what are all the values if there are any errors errors will be based on the validation schema that we'll be using through the yep or the validate that you are passing it as a prop here then it has like if somebody has touched this field handle changes handle submit and all of that when somebody will be clicking on the button and you just do a handle submit like what happens is in the initial days of react native that you have worked or handle or the react native you might have written an extra method that says handle submit and when somebody clicks on that then it takes all the values from the form and then you move into your own method what it has done now is it will automatically collect all the values for you the on press you can just say on submit and here you can pass on this method handle submit now nobody has written this method this method will actually come up here and it will convert here on submit I'll show you how it works actually that is much more easier but these all things can actually work like this so once you understand the syntax of it it is super super easy and you can have your own form which has on submit and whatnot so yes uh this is all which is happening now notice here we have been working on this uh the gist that this is how the form actually used to work and all of that now we are reducing the boilerplate by giving you all these forms so you can just go ahead and work on with this so you can have simple form and all these so I'll show you all of this now another thing that you have to look and read a little bit more is react native just click on this and you will see that all this happening on submit values console.log values will do all of this and we'll see how it works and all of that but this is the paragraph that I would like to you to read actually this actually helps a lot notice here it says formic handle submit is pass to button on press instead of HTML form submit I'll show you what it means by basically what it's saying is all the values are being taken up instead of passing it on some methods I'll expose all of this into a method which is cooked in and is given to you as event known as handle submit what you do in that handle submit is up to you we'll show you all of that so I know a lot of theory but formic requires if you have understood 10 percent of all of this which I am trying to say as of now that is good enough more than good enough now when I'll take you on to the code part you will understand the 90 part of it now another Library which we'll be using is bouncy checkbox I don't need to explain it much just a simple package for visual aspects of it all right so let's come back here now since a lot was going on I just removed all of this all up here now one thing that you can go on to that my code repository and can bring this is the style sheet I have already written these style sheet and I have given you that as an exercise or an asset or you can download it from my GitHub repository the link is in the description already in the app too we have worked quite a lot on the style sheet don't want to do it any more further now there are pre-written style sheet for you we will just focus on the logic part that is going to be much much helpful so how we're going to get started okay this is pretty easy first and foremost go ahead and import this so in the line number seven we are importing app which we have already studied formic here we are importing and here is the bouncy checkbox that we're importing okay all right so far so good now let's go up here and we'll just work on The View itself because formic is majorly on the viewport some Logics will come up here and there first and foremost what I'll do is I'll just go ahead and we'll say that hey I need a scroll view all right no problem in this scroll View and we can add one more property into this one which says a keyboard should purchase tabs and you can read about bit uh determines when the keyboard should stay visible after the tap so basically what will happen is our keyboard will come in here so whether the scroll should be there or not and all of that so you can read more on this one we are going to go ahead and use the property handle in which the keyboard will not dismiss automatically when the tap was handled by a children or something like that so it will not automatically close it I will use this property feel free to just ignore this in case you don't understand what is happening here but if you'll read a little bit documentation itself explained scroll is there then we'll use the safe area so there we go safe area View and will provide a style into this one that will be Styles oops Styles Dot and we have the app container okay this is easy now we have a form container as well so let's go ahead and grab a view just like this and we'll have the style which will be Styles Dot form container there we go okay now inside this I want to actually put the entire formic but the problem with the formic is that it is little bit of a complex to bring in so I'll show you a hack that how we can bring the formic the easiest way let's go ahead and bring in a text that simply says password generator there we go and let's add a property to this one style is going to be Styles oops Styles dot header or title yeah title okay now below just this I want to introduce formic so I'll just go on to my Chrome I'll come up here and the best way to get it is just click on the docs this is the home page and this is the very first just this is where the formic actually works on click up here hold down your shift key and scroll a little bit and where you see the formic ends just press up here it will select automatically all the things that we want copy it go back up here and paste it up here this is one of the best way to Simply grab all the values we obviously will write everything up but the syntax of formix is a little bit complex for example this whole thing is a complex object in itself further we have this method this callback going on so sometimes people miss a lot in here I don't want you to do that so we'll simply go ahead and understand one by one what properties are given to you so in this the initial value now what formic does is keep track of all the values that you ask it to be there like in the yep schema we have given one thing which is password learn but there could be email password and more Fields like that so just have to keep a track of what is the initial value of those fields so if anything changes happen there then I can run the validation of the schema all right so we'll just remove this and we'll say password length it will not suggest it because it's in the schemas so better I will just copy this that will be much better so password length is what I want to track I'll just come up here the reason why I'm copying and pasting it so that you know which values I am talking about so password length initial value I'm saying that it is an empty well empty value all right now next up is come up is the validate now we will not use validate like this so that we are not tracking the values of email or password like that we have already defined our validation schema so we'll just pass it on a reference to that we have just studied in the documentation we can remove all of this and we can say instead of validate we can use validation schema and where is our validation schema pretty simple we have defined it into a password schema okay that is why we call this now we have this on submit as well what do you want when things actually go ahead and do happen so I'm going to go ahead and remove this because there is a lot going on in here so I just want to remove it so that's easier for us to understand so as soon as on submit event happens just go like this then what happens is we will just use a callback function here so just like this you can go ahead and write as much logic as you want to but I don't want to write the logic I just want to use all the values that will be coming to me from the form and want to pass them into some method that's all I want to do now all the values will be coming to me is inside the values this is how it goes and remember this is where it is giving me all the values all right now in here I'll come back and I want to use my method which is generate password string and in this I want to pass those values so what will happen in my form in my app I'll give a user in put field in that field you have to enter a number now that number will be given to me and I'll pass this number into this method which is generate password string now notice here we are already generating and to run this method all we have to do is simply pass this password length that should be in the number notice here we have written number here explicitly now here comes the magic now in the generate password link this values is a big object okay so when I go ahead and say values and I access this property right now it will only have the one property which is password length which is it is tracking for the validation also now right now you can see this is all going good but this will eventually give us a lot of errors uh why errors because this is expecting a number up here but what we'll see eventually that this actually gives us a string because it's an object but we'll come back here so what we're going to do is simply write a to-do here that hey there is something so that it keeps us reminding that hey there is something that we have to check now further uh what properties you'll be getting notice here it has already started to give us this because what will happen is argument type of string is not assignable to parameter so it has already given this error thanks to the intellisense we can remove this now okay what can I do to actually remove this because my method is expecting a number there are a couple of ways what you can do you can actually wrap this up and can actually call this number casting that can be done or you can check this that hey whether this is number or not and based on FNS or you can do that but there is a shortcut as well in case you are aware of this you have studied a little bit typescript and stuff and all of that you can actually just use plus values and it will convert this into a number itself so again whatever suits to you whatever makes you comfortable you can use that I'll show you the values as well that how actually goes ahead and all that also we're gonna go ahead and do a simple console log of all the values so what all the values are coming to us so that we can see at least what is coming in all right I'll show you how you can debug and all of that in this right now this probably will be giving us 100 a lot of errors that is expected if I go up here it says hey there is a lot of things you are calling back and all of that it is expected don't worry on that part so what we're going to do is we'll be handling some of the values here we'll be checking is touched so you can check for all the properties is touched now is valid is valid yep so handle change is there we will track this one handle blur we are not interested in that part we can just remove this handle submit is good and handle reset is something that we'll study or something new so we'll just remove this handle reset the notice here it is a reset form event handler this is where something interesting is going to happen and we'll learn something new in the formic itself all right so these are all the things we are keeping a track of this uh so so far so good and it's okay now coming up on to this uh we'll have a five input forms and two touchable opacity that we have already seen from the first look so let's go ahead and remove this form and go ahead and grab an empty renderer here inside this will have this view just like this and this we will have couple of properties that we'll be going through so let me go ahead and put this style is going to be Styles dot input wrapper there we go now we'll have couple of input wrappers actually and then we have couple of input columns and all of that but first I'll just grab this so we need five of them so one is here two three four five there we go and once we have five of these then we have actually some of the touchable opacities as well these are nothing more than just uh form actions something like that so let me just show you that it's super easy this is View and this is going to be Style and then we have styles Dot and this is form actions again just again styling there is nothing much in that I will come back on to this one touchable opacity just like this we need two of them so I'll just have a duplicate there we go this one will be generate a password and first one should be generate password so I'll cut this paste it up here and this one will be reset there we go uh we'll come back on to this touchable opacity will make them beautiful and all of that but the making beautification is not our goal our goal is actually to understand the formic and the bouncy checkbox and all of that let's go into the first view itself first this is the view that we have inside that also will grab a view and this obviously will grab a styling so I'll just copy this so that it's easier for me make my life a little easier inside the input wrapper we have input column as well there we go all right so this is where the magic actually comes up we'll have a text input now you can have variety of input types that whatever you like oops will just make it self-closing so it's easier for us first and foremost obviously we'll grab a style and this one will be input style this is no brainer at all it should be all super comfortable for you now next up comes up is the value how the value will be utilized this is the important part where the format actually comes so all of your inputs that you write inside the formic you have to pass on all the values into this values so this is a big object where you have to pass on and this is where you actually say that what property that we are giving we are giving a property of password lens so that it knows that hey this password length which we actually mentioned up here in the formic that this is what I'm tracking with this input field if you have more just track it like this exactly same all right now another important thing that we'll be having is ah this is little bit tricky so pay attention here this one says on change text so what should happen when that somebody changes the text now this is where you are going to use an event which is given to you as a hook which is a handle change so go ahead and use this so we'll use this handle change all right but what should I track in the handle change this is not going to just work like this so what you have to do is this is really bad you have to use a string and inside the string I have to say I am tracking this password length so copy this and paste it so now your tracking is binded you your value is getting stored here and you are putting up all the validation on the text changes up here I know this a little bit but these are the two things once you understand this is this is all the format all right now going on further you can have your fancy stuff like placeholder whatever you want to say it here I want to say example eight something like this then further down the road we can have keyboard type as well which is really bad but numeric it's really bad because it should be suggestible but it's not suggesting me there should be a suggestion it's not I really don't like this all right so this is the basic part that we have studied and gone through with it uh still will give us a lot of errors and all of that so let me go ahead and dismiss this there we go it's not going to show it at uh much yet to us because we have a lot of things to go further and let me bring in my terminal let's hit a Reload and text must be rendered within the text component probably we are messing up some of the things where we are missing in the touchable opacity probably we are missing the text component let's go ahead and cut this out hit and enter will have a text and we'll cut this out hit and enter text paste set and there we go so now we can see that at least a number input form is here if I click on this it opens up this all these things so this is at least working nicely and I can give it all the values right now it's not visible because I haven't placed any of the styling and all of that I'll do that in the next one in the next phase of this one but this is all what we wanted to have as the basic styling now let's go ahead and put up this view as a text so that we can provide some more of the properties so this is the first thing which I wanted to show you I hope you have understood this part okay now we'll just keep this text input as below and we'll introduce one more view before that because text input should go on the right and on the left side I want to enter some text values so let's go ahead and wrap this into a text itself so let's go ahead and have a text just like this and we'll say password length and will have some styling here Styles Dot this one will be heading there we go should be all good now let's go ahead and see how it looks like into this one there we go password length is here this is not having any text input so let me just go ahead password length and the value should so let me go ahead and fix these basic stuff so password length is here and all these Styles heading let me go ahead and quickly fix this one all right so we'll figure it out later on a little bit but let me show you one more thing so just below this password length I want to show my error messages and how you show the error messages that is also pretty cool so I know that I am also keeping a track of this touched so this is what I want to track now so once I am keeping a track of this touched what I can do is I can just go ahead and say touched dot password lens so somebody has touched this field which is password lens so that should be true then I also want to track one more thing that there should be something in the error so I'll just select this errors because remember this is again an activity given to me not an activity but yeah errors field is given to me and then there should be error in the password length so for each component or the form that you are tracking there should be something and then if all these are true then I can render my component I'll just hit and enter here and I can render I don't need to write manual errors I can just inject one more thing here let me just add text here because that would be better so there we go text like this and this obviously have a style we have figured it out already so we'll simply go ahead and say Styles Dot error text there we go and in here we'll just inject one more JavaScript and we'll say errors Dot and we have password length error there we go and this is how you can simply go ahead and add all these values so this is this is not going to show right now but as soon as there are errors it will just keep on showing there so this is super super important and super cool feature of that all right so this is going good and what we can do is I can probably just cut this out and paste it up here should be all good now save this and there we go this is exactly what we wanted now interestingly uh these Styles and properties are not going to be working much uh until unless we finish the app so but this is looking decent as of now all right so we can just go ahead and close this view now the next view that we are going to work on is going to help us understanding the next feature or next thing that we have bring in which is the bouncy checkbox so let's go ahead and give it the same properties so first and foremost we are going to give it a simple text so there we go text obviously it has styling so we can just copy this just be little lazy there we go this one is actually heading there we go and this text says simply uh include lowercase lower case and just after this text we can simply go ahead and have the bouncy checkbox this is super easy so bouncy checkbox let's just close it like this and have couple of properties first and foremost we're going to go ahead and say disable built-in state so that we don't have anything fancy going on then we'll just have is checked this will be tracked by the state that we have already defined as lowercase if lowercase is true so it is matching with that state that we have then we have this on press so what should happen on press really simple we want to toggle the state itself so we'll just run a method just like this a callback and inside this we'll set the lower case just like this and we'll toggle that so use an exclamation tree and simply go ahead and say lowercase so it will toggle the values and then there is one more property which is on fill no it is fill color fill color yep so here you can just go ahead and use any fill color I have one fill color from one of my website UI Color Picker I'll just paste this and what this will does is will give you these kinds of things so this is really nice and bouncy so this is really really nice of how you can have this similar to this exactly same I'll just copy and paste this view I'll just write it in a fast forward manner so that it saves some of your time all right so this is what we have ah just exactly like this I have added all these bouncy checks and all of that I probably did some typos or something like that let me go ahead and check this uh there we go should be all good now let me just quickly check uh yep yeah looking good now now let's go ahead and work on with these let me minimize this and we're going to work on these opacities this is where you're going to learn the next phase of using the formic okay so touchable opacity uh we'll just give some properties to it first and foremost we'll go ahead and use its disabled so it should be disabled and unless there is a valid uh things are in check on all of that so what we're going to do is we'll say is valid remember we are having this is valid up here so based on this we are checking and this is valid is automatically getting checked by this yep so this is what we are using so until unless all things are OK we are not allowing anybody to click on this button then we are going to go ahead and have this style really basic style is nothing we have already discussed so much about this one this one will be primary button there we go and one more thing that is super super important which is on press now in this on press you don't actually go ahead and directly call the methods because this on press will be responsible for collecting all the data and will be sending it to this handle uh submit this is one which will be called up so now what we're going to do is simply go ahead and use this handle submit now here's an interesting part I'll just come up here in the on press and I'll say handle submit all right but what is happening on handle submit on handle submit this will collect all the data whatever it needs to collect and errors and values and all of that then this handle submit will actually call this on submit itself and then here we are actually doing this so you might be saying hey we are doing so much of these things why can we call the methods directly yes you can call it I'll show you a method as well but this is actually much better way of tracking all the states and everything right now this is just one value we are tracking but imagine there might be so many values for checking them if you'll call your own method then there will be error tracking error checking and all of that right now we can Val throw all of that onto yup so this is nice all right moving on this is really basic so I have some stylings for this text as well so I'll just paste it up here nothing really magical this is generate password really basic and boring now coming up on to the touchable opacity this one next one here we are going to learn something next so for this one we are going to just give it a style first obviously Styles Dot ah that is disabled secondary button secondary button there we go okay next up is what happens on press this is the next thing that we are going to learn so this is how it works now this time what will happen is I want to pass it on all things like obviously the state which formic is handling but I want to call my own methods as well so what should I do in that case in that case all you have to do is first do a callback obviously just like this and we are going to go ahead and say hey just handle reset so if there is a method where we are calling the handle reset property just like this you can go ahead and manage like the handle submit but in case there is no mechanism maybe there are three buttons in your form for some reason in that case just after the next line you can call your own methods as well and you can do this for the above methods as well or above Button as well so you get the idea how this is being done it's super super easy okay now let me go ahead and bring this up so this is our generate password uh probably the text isn't got any styling so yeah copy that paste it up here just like this and there will be Style dot secondary button save that hit secondary text secondary button text yeah it's okay whatever that is okay we'll work on with this one now we can actually go up here and I can just simply click on generate password it doesn't work it doesn't show the disable State nicely on the simulator itself but if I but if I go ahead and say 5 and say generate password and now it is generating the password but the problem is we are not able to see the password all right this is also super easy to handle that how we can actually generate this all of that let me go ahead and close it till this let me go ahead and minimize this so all the value that we have from this formic let's close this let's set a tab there we go so after this view where we have encapsulated all the formic we are going to write some code now this code is conditional code we are going to conditionally render based on is password generated or not okay so first and foremost remember we have changed the state in the method earlier we're going to track this is password generated if it is generated then we are going to do something otherwise we are going to just send the null okay so it means don't render anything at all now here we can go ahead and simply write a simple uh view first and in this view we are going to just grab a simple text just for testing purpose and we are going to say test hard coded values all right save this come back up here and say the test is there because it has generated if I click on reset it removes this if I go ahead and generate password it says length is required so our formic yup everything is interconnected that is nice come back here say 8 I want this I want this generate password it says test now only thing we have to do is bring our password up here so that is with some styling of course because we have worked on it really really hard not me actually another has worked on it really really hard so thank you so much Styles Dot card and there is another one Styles Dot card elevated all right after this we have couple of texts and this one says result colon just like this we have a styling for this one as well which just says styles Dot subtitle there we go nice and then finally we have this ah one more styling so I'll just copy this this one is style Dot description this one says long press to copy and then we have this one text now here comes the interesting part here we obviously are going to do the styling there we go and we'll say Styles dot generated password all right and here we obviously want to have the password so this will be stored in our state so we are simply going to go ahead and say password all right so this is all the fanciness that we wanted to do now let's come back here so it says long press to copy and all of that so let's go ahead and try to reset this form is gone now let's just jump into this one generate password says Hey length is required further down there is a bad error here like for example from the keyboard I can type a and notice here it says password length must be a number this is not a good error so you can reset the default errors as well but will not do this here 8 and we'll say generate password now it says long press to copy right now if I do long press I'm doing it right now it doesn't do anything now there is nothing magic you have to do to share these text or copy these texts and all of that there is a property in the text itself which says selectable you can just write selectable itself or you can just explicit certainly write as true that's all you have to do and once you do this now if I go ahead and say generate and I long press on to this one it will give me copy or share share will automatically feature of Android it gives me all of the sharing capability and if I go ahead and do copy this it actually copies on my clipboard itself of the phone so yes a lot is going on in here as a lot of things are there I have already pushed this code so by the way if I show it to desktop since this was my second recording I've already pushed this code so you can go ahead and copy all of these things in fact all the styling and everything is given to you you can go ahead and try this out I'll still push this updated version of the code itself so that you have all the idea but really a long video but definitely worth it it has I hope given you entire idea of how formic Works how formic needs to combine with yup with just one property that is password selection that we have worked on password length later on we will work on emails and password and all these complex things the things will click much more in that section so right now your assignment is really simple you have to write a detailed in-depth article on formic about react native and share it on all the Twitter and everything you have to write it only and only on hash node share it with me the best article that I'll find I'll definitely give them a shout out tweet them about it and probably will send some goodies and t-shirt to some of you join our Discord server share it there as well there I keep a lot of drag that's it for this video and thank you so much for watching thank you so much for subscribe and I'll catch you up in the next one

Channel: Hitesh Choudhary

Views: 34,323

Keywords: Programming, javascript, React-native, react, hashnode, android, mobile apps

Id: molTIg-zvGI

Length: 36min 55sec (2215 seconds)

Published: Mon Mar 06 2023