React native tutorial Part 1- React native login, signup and navigation example

hi guys today we are going to see how to create login and sign up pages as well as adding the navigation to those pages navigate from one page to another before I start we have to start the server so for starting the server where I am going to do react and ativ negative do an md80 make sure to add the - otherwise this command line code won't work a ND ry d cool this command will install they became on this emulator as well as start the server let this process finish and we will see again how this looks you can see that the app has been installed on this community but it is giving some error so we will check first of all I can see here that the server is not running so I will run the server by using the command and PM sta RT let's see if the server is running okay now reload this page again to check if if the given codes are working or not so loading dependencies graph them everything is fine so the app has been started now we'll change all the codes first of all I have to use a color so by using a color I'll remove this all texts from here and also I will remove these unknown CSS kind of thing I will read load this page and check if there's no cool I have a background FFF if I change this background I'll just remove this container also remove this view style let it be view and style some less check what it prints okay it's a blank page now I need a background color so for getting the background color I'll use I'll be using Google material design I'll go on this website and style colour there is a colour tool beautiful we are going to use this tool this is good this is this is the surface okay this is good now I will use this as the background color so we will give it a background color now this is cont AI any container object B AC K G R oh you can be see well our background color will be our discolor and we will use this to sty eldest child sty and yes make sure the spelling should be correct otherwise you will get some error or might be your code won't work I'll refresh the simulator and check the color is not ring here for that I want this view should let's print some tests and check where varies our view te XT text hi t that's T Tauri hi there I'll save this reload this page again and you can see hi there is blending here but I need this you to be 100% in hi dice so I'll go back to to to to this layout with black box and we will see how to use this just if I content okay next Direction flex alignment justify content but we cannot see any property to give a hundred percent two of you with height flax one okay Direction column just if I can't add space between very nice I'll be using flex one to see if this works here's of course this will work to dudududududududududu emulator is here this is flex one not check and refresh this code came shrah wait my father is calling okay by using this flex one you can see this height is 100% now now we will use this hi there means I want to bring this higher in the center for that we can go again and check what are the properties justify content flex direction so so so we will see a line items are there justify content is there so I will going to use this align item a line item by line item a line item is equal to CL ter Center and and and and and and justify content justify content is Center CD and T if you want to know more about these aligned items on justify Center you can go to this link and check all the CSS that you can use here right flax flax places flag Direction flex toast rink rap height justify content half leg start flex and flex sorry center space between space around so you can use these properties and make your app look cool I'll refresh this and check yes now hi there is right there is in center but I want to recolor it so I will add okay this coach I don't need you I will choose platform where are we using platform no we are not using platform so I will remove it from era as well and for this I'll give it in a inline style style call equal to 0 L Oh Park hash or I can say FFF FFF white color I'll refresh this hi there is white also font size I want to increase its level and say that be equal to 18 okay fine check again hi there is might quite big now you can see I do not have the status bar color I will go back and search for some status bar properties okay in the component so we have a status bar we are going to use it but before you use it you have to import it so I will import it here like this then we can use it inside of our view by copying and pasting this code somewhere here I'll save this I'll save and I'll refresh and I check okay so our status bar is blue we need our color our color is this one so go back I change this color to this color okay now we can refresh this and check cool now this status bar is looking beautiful as well as this hi there is looking beautiful now I want to create a login page so for creating a login page we need to create new folder folder name will be source files so SRC inside this component we will create two more folders one is a C OMP OMP and PS inside this component all of our components will be going and another folder new folder will be pages PA GES pages all our app pages will go inside this so we will start from creating a login page I'll go here new file basic codes will be these copy/paste come back and then export the one class F extends component we will be copying these codes as well computers paste it here change the name to something login okay this is code will be using render function just about re to return side this return will be using will be using view VI e tableau capital V make sure it's in this way we will scored sorry this is a view this is our Raptor Cheers this is K now we have a background-color lacks one alignment and centers justify isn't true now we are going to use this huge trial container everything inside this I will remove first of all this dummy text from here and I'll check this - Babel dot GS so that I could have a better formatting of code status bar is their view is there now this is our login page so it's login we have up you inside view we are going to use text box from now text will be saving it save with the name of logon dot J s beautiful now we have a login dot J's page here I'll import this page and import this page two approaches so holding it I am T I empty pop art export log in from from SRC if you are importing the near videos this way pkg s pages slash login don't give the extension it's not required save this copy this and use it here this will save this file and refresh this you can see some login text is here it's in black so no issues we are going to create a form okay okay okay now we can use we can you conf tea we can we can give it some style sty sty a year styles equal to you can use your Styles like this I'll be using this way and we'll be using this way styles okay this file is also JavaScript so this will go Babel properly background refresh okay that is no next year that is why something is not showing there we'll give it style dot container now we will create a form that form will be inside our component or I guess create a logo file okay we will first create a logo file I will copy these texts from here to here react nature okay now in this re and render there we are going to feed it an image here or let's say re you are at first of all this is important okay okay okay write down a text so that we can see if we are at right place code is working fine so this is logo competence elbow geo load yes I'll import this to log into Jai's for importing your again - I am the you are import local form from from Foshan home pages okay so when you go outside of these pages now see you on peel and gas component slash logo semicolon is important save this file copy this code here and check if it is working paste it here refresh this okay now we will use actual icon or logo you can say image component in each component copy this and use it here I don't need this status by anyone okay so our logo is there now I will use this image instead of text you can put your image something like this and for if you are using image then you should use this style as well as source files computers paste it for Queen why it's not working style with tight Cal give it okay I'll give it 70 and the width will be 40 they are using this Facebook logo I don't need this anymore source as a URI we have some other methods to use the AP okay you can use this require that's a better way to store the image in your folder image okay so for that we will create another folder name new folder I am a genius images I am GES images inside this image I'll paste a local Doku here somewhere some spa step something images well copy this logo and come back new project as RC images I'll paste it here okay now you can see a logo will come back here I am a G yes G yes / no code or PNG I'll save this file and I'll refresh it and okay so something is missing because I am into some other folders so I have to come out of that folder and go into the images folder now you can see the logo is here I want a text besides the slow home inside below this logo so if you want to use a text you have to give it up parent component because you cannot use it two components at the same level this is a view this we can use this in the XD text text can this text will go inside this will go inside this will go inside we have to give it some property sty LDS sty we will give it nasty people MSD constant sty early style equal to copy/paste I'll copy this paste it yeah copy this and paste it here so that we can get a proper coloring and now I don't need this background color anymore flanks alignment everything is good just flex one is cool I'll say with an impression of CSS attribute must only assign amnon more empty okay this some tracks we are given now reloaded and check from here adjacent attributes must only be assigned to a non empty expression line number low garage is line number 12:15 both man I did a mistake inner always check this line number so that you will be sure enough to get there okay this has gone to up instead of using flax one okay let it be flex one this is not tax so it will give it a style sty and style start loco in the XT text make this T capital copy from here now go text form sorry for that size ID font size 18 color okay instead of using this color I'll be using algae be a CP here so that I can give it some opposite e wine color has 255 comma 255 common 255 capacity will be zero point seven I will save this I'll refresh it what sir okay now as I use ide font size spelling mistake my bad refresh it and check this logo text is not here so give it some text welcome to my cap dot we can refresh it and check if this works welcome to my app you can see the alignment is not proper we want everything in the middle so we will be using just jus still deaf boy see open and justified content psyched up and refresh it and check if this works okay so this certify content is making its center I don't want to bring it in center so they will use the L by T and align itams items sing at the ER center we will see what this justify content and align - items means means both are Center but both have different properties now it's Center I'll remove this I don't want this any more or less - one thing just put it there we can use it some other time this is Kurd this is loco door chairs boudoir chases printing okay one problem is there this gap is very this gap is very very very very less so we can give it more margin and they are chain which in our di here where Thiago Motta vertical will be each in pixels from top and bottom automatically it will take so this is March and refresh this page welcome to my half that is a beautiful gap now we have to create a form I will remove this from here and we will be creating a form so okay the form will go inside this one potential torches new file new file will be same as this file and copy this and paste it here I'll remove this little logo instead of images we are using some one we are going to use some of the components I move these things let the this you be their flexes defy content line items these are good so let it be there and fresh it sorry save it the name will be a form form dot J has formed our chairs now we are using we are going to create an input field input field will be me oh where is various components components text input and if this so I will be using this one okay so yes again if you want to use any component you have to import it first this way this way this way now check if this works i refresh this page again don't give me the error don't give me that okay could not connect to development server tried following maybe the server has been stopped somehow I will restart the server text input let us give some properties to text input till okay in boot for input box input box will be can it you have to go and check it to bevel input box will open the thread is off 310 3 that is good 320 is the next max width of any device let's say make it 300 300 it's good check if the server is working sure it is working just reload the file so that you can see our text box okay you cannot see the text box because we have not imported this formed or chip in our login to our cheers file so we have to do that this is fine welcome now the way we have imported this we have import our four notches forf form computers and I'll paste it here and say hey wait I'll refresh the space again you can see now a phone gorgeous there is the text input bro where is the text input I'm not able to see the text input okay yeah because this for me I have imported you but I have never used it so we have to use it as well and then you can see we have a text input here this text input is very small so we have to use this property and you should give this to this style equal equal to plus Tyl yes style start input box this will this will okay this well I have to restart it we start the app new project welcome refresh okay this is good this now you can see but I want to give it some custom colors some beautiful designs I will remove the underline so for removing the underline we will have a property when the line color okay you can use this attribute underline color directly here and you should give you should give it RGB if you want to remove our change being a gba will be okay make it zero comma zero comma zero comma zero now the opposite is zero it means your input will will not that underline is not visible but yes the input field is here somewhere so you can see if intercept I mean 300 I will give it a background color so that it will be visible back gene power over you Andy so our background color will be algae beer again because I want to make it a little opaque CBA elsevier 255 comma 255 comma 255 comma 0.3 installed refresh it again you can see this is beautiful I need the borders I need I want to make it border radius 25 so I'll keep water are hitting I us I US border radius will be 25 25 is good to come and I'll check again oh so this input field is looking beautiful I want to add a black placeholder PL AC actually a placeholder placeholder will be emailed something this refresh it and you can see email is there but it's sticking here so I have to give it a padding from or a padding horizontal padding so I'll keep it depending catch our eye shadow and pinky tell horizontal padding horizontal 16 pixel will be great let's check a can okay it is beautiful now we have what you can say placeholder color I need to give it a placeholder text color so the color will be white okay I can use it this way I can use it this way instead of this I can use placeholder text color text color will be a chef ffffff and the input should have a form as is ready font size of 16 pixel I can see you Aloha color hash at the path FFF this is beautiful this is beautiful this is beautiful as you can see this is looking nice and now we need to create we need to create another another text input which will be the password text input style input is good underline RGB a placeholder instead of placeholder even I will be using the ESS SS placeholder password placeholder color white is cool I'll save it and refresh it we can see this are sticking so I need to give it some margin vertical margin I'll give it a man I see also politically is equal to ten picks a little skirt so we can see okay this is beautiful now I need a button so instead of creating a button this is good this is good we will go back to our component guide we will see if we have a button kind of thing we can use this touchable obesity copy it from here go in your code right down here symbol this is for okay this transform we can use it touchable of the city touch table obesity this touchable opposite you will have a text inside it this text have a bargain okay now we can give it some style style equal to st yl yes Styles dot PUD join button txt text copy this and complete this and off you can use button text but a text will be fought sighs assign font size 16 is good sorry I find default W die GSD font weight needs the strings I will give it 500 instead of giving it a number and color again yes big olor color ash FFF FFM as well strain we are given it now you can see something here the comments because because hard reloading is not enabled that is why I am unable to okay I have to restart my application refresh it you can see here is a login but but but but but the touchable obesity style is required to style our Python sty restyled or polluting rampant you can copy this instead of but I'm taxed we can use this one and I will give it a comma some indentation is good but then background color is this is fine then what we need else is border radius of 25 this is fine with 300 is gold so this is fine padding horizontal I don't need this binding or let's check what happens margin is also important so use this also and now check it ok refresh it and check if some can't find variable style can find variable style style so gates are Styles my dad okay so you can see this text is going some way here so I'll use it txt text a lig text align silly NPR sector now you can see the text will come inside the sector okay but some padding problem is there so we will use padding vertical P a D and G padding or even guarding tiny word TCL vertical 16 pixel is stored enough to look now you can see the button is larger so I'll give it 13 and check again sorry 13 is still more solid 12 refresh it yes 12 is looking fine now I need this button colors be good so I will use the status bar color as the button background color for touchable touchable touchable okay stood up this will be giving this and this hash is good so now we have a beautiful button here wow this is nice is nice this is nice okay this is a beautiful beautiful to space of you so now we have a login form but I need to create a signup form so before I create a sign of form I need to keep it give a link to this so I will go here instead of this I will create another view we I eat a blue okay I will carry it some and inside this view we can use steve ilg style testy wireless tiles dot SCI GN sign up txt text cont count cycle text font container means ok we are going to give it some properties properties light flags equal to one a line item center side let's check if this works parent view has already the background color so we need not to give it a background color again but we are just going to use it tink ext text txt text instead of dot we are going to write don't do or don't have an account yet don't have an account yet asking the question now go to the sign up page save it refresh it and check it wow this is beautiful now see don't have an account yet is don't have an account yet is the color of some dark black so I need to remove this color and instead of using flags I can say flex throw might work properly cheap affordable next row let's check ok so we can use this next row in other designs let's go let's go let's go [Music] this is container so make it flex throw okay so this has gone up we will giving this logo also to facts crow let's grow and then refresh it okay now we can see our design is perfect this is coming in center this is coming on top means on top center of course this is coming here so you know because we already have a parent view as black so we can use light scroll to make it more beautiful but you can see this I don't like this going in on the top so I'll use justify:center in just if I cut that instead of Center if I can give it flex you can knee and check if this works fine so this is looking nice so you have some other properties with justify content you can use properly now I have to design this text and go back and instead of a line item center justify content center I will use F L DX flex ending end and I will give it margin we are the ICL vertical 16 pixel save it and I will refresh it to check out this workflow okay this is fine sign up text so you can't use text colors inside view because we does not have any texts directly so we will use too many styles dot txt text okay sign up text okay just now about right at sigl sign up in the xt text instead of god now I will create an alert sign up that still equal to sign up text see where our color instead of giving in to this way we will give our GPA to make it more o 255 255 opacity will be zero point seven and four sides oh this icon before a sizing size is 16 16 16 sweetie no more dating but 16 is cool we can check this works control okay cannot find variable styles st y LD f style starts line of text now you can see okay don't have an account yet sign up this is cool this text is very much brighter I'll fade okay now I need this sign up to be a button so I'll remove it from here I'll create another text text txt text and then inside this text we are going to use this signup text and yes we will give it some style to it but before we give it a style we can see how it looks so that you would have a profit better idea this is going below this text but I want it to this side so with Flex we can use something like flex direction I have seen somewhere so I will search for it TIR in some direction direction direction of direction direction direction it's not something it's not really here the layout with flax box okay this is a flex direction so we can use it with our signup text count next direction will be [Music] okay thanks Direction is strong now you can see control okay designer is coming here that's better that's better that's better but the text has gone more up because this flash direction is wrong so we can use this alight items to be seen and we are that's where this property is need to come okay now you can see this is working fine but still sign up has some not so good properties so we can use we can use margin vertical instead of giving margin vertical we can give it PA d di ng padding over here so that it can vanish automatically okay now instead of s T while is child equal to st yl yes styles dot sigl you button this button should be beer s IG and sign up we copy this I'll copy this alkyl yourself we will create a new style for it CLR color should be pure team white pure white and fault as I said be small size 16 is good for a blue digestive font weight and need a passive strength of 500 is good we can refresh it and check this is beautiful don't have an account yet sign out okay now what is important don't have an account yet sign up this is a login page this is our apt or chairs login status bar everything is good what else what else what else what okay now we are going to create okay let me first type here so that okay this is a password but it's not typing like a password it's acting like some texts so we can use we can use text input secure SEC Yubari secure secure text entry it's a boolean so we have to pass a true and false our form this is password password has secured external three secure text entry will be this but this way we can do it true ok ok ok now just refresh the page he cannot refresh it right here no project now you can see if I am typing oh my I'll refresh this page now you can see if I'm typing then it's taking as a password so this is beautiful this is beautiful ok the button is working fine and what else we can do it doesn't put button button button button ok now we will create a signup page with the same form different text different text here as well so this is our login page we will go inside our page folder we will create a new file text file name will be sign up this is a sign up so it will be similar to login paste most of the codes here and don't have an account yet ok this is 3rd this is covered but this file it will be test ID and sign up dot GS sign up dot chase this is again we have to make it Babel true this is good this is good login easier form is here everything change it to s IG and sign up we can change it to sign up what else we can changes we can change we can change don't have an account yet instead of using this we can say all I'm waiting already have and Casey's alone with the account the scientist ID in seinem that's a Ichi and signing this is good we can import this sign in here s IgM sign in sorry there's a Sign Up Sign Up Sign Up Sign Up copy paste instead of tests we can use sign up and you can see differences and you can see differences so now this is sign-in already have an account sign in but this button is still login because we have hard-coded for one thing so instead of this button to be login we want to pass it as a props so that it can take a proper proper text for login as well as for sign up so we can give it as a props props as beautiful as passive typ type equal to allergy token and copy this type from here I will go to my signup page and paste it here instead of log it I'll make it sh again sign up this is good and in my form gorgeous I don't want this to be hard-coded but it should come from its parent pages like sign up or login so this will be this dot big arrow props DYP type this dot props dot time and for using these props we have to create a constructor nasty and you see two constructor without constructure ass-whooping here also it can work but if you are okay just you move this constructor for now controller to control set just check out this construction for now and check if this works I will refresh it this is signup beautiful already have an account this is a sign up so this is good what else we can do with this is this is email password sign up okay now we have to create a navigation so instead of this is sine of this is login I'll save this file also so for creating a navigation we need to install third my third body module and the name of that module is react if router flux react native of this is the name I will copy it I'll stop myself I will NPM I - - save to make an entry in my package dot JSON I'll paste this here I will make it here okay now we have a beautiful design but this white background is in series not looking so cool so we can change the background - - but if I will refresh it it will give me the error because the word has been down okay so react native router flux has been installed so I'll refresh sorry we start this over again and check it well refreshed [Music] okay okay okay so now we have to create a navigation so for creating a navigation we should create this as component signatures pages we should create a file new file the name of the file will be routes anything so the very first thing that we need to use is react components okay okay and then again px py t exporting uality really SS are you gasps shouts txt NBS extends this component this component will be something like this okay and our UDS shouts okay make it capital so that we can understand it out start GS now this is good this is good this is called re-enter function is important everywhere tari p1 tritter function is also important so then return some routes we will go to react route or native flocks and it has a documentation section somewhere here please write follow punch off you okay we have we can use that this way I will copy it from here I'm going to my code and paste it but before we run this code we have to import all the required components we are using from ran out of oil imported to our import several things like I need a router so I winter out I'm using a stack so I can copy and paste it here I'm using scenes and copy and paste it here from fall from from which module from this module will react native out the flux copy pastes react native out of flux very nice now we have a router stack scene inside our app but this is not a people file so we can use it they will be able we do not have this phone section right now we have only noggin and register hmm so for using an organized register we should import this this to have to our import log in form pages pts be a genius pages slash login and I have provided the port science again signup form [Music] yes pages /h again please sign up this is good we can use this component here we can use this sign up component here and this is a router so we can use this file instead of using this now we can use directly I am - you are sorry I am D you are import shouts from dot F RC / yes shouts yes / and we should use it instead of sign up we can use this this way what are the things we are not using here text we are not using status bar we are using so here put in it everything else is fine so let's check if this works hopefully it won't be as a manner okay so you can see and refresh this and yes this started working might be some refresh program was there so this initial is true if login is then he Sharon true this bar is coming and I don't want this bar to be here so I will remove this bar by using this stag have some properties some attributes we can use react native router flux will bounce rape earrings okay and we have some stack so we have this attribute hide navbar we are going to use this somewhere here then we should make it be a do it true then the fresh shirt and check if this works yes so we do not have any high so now you can see now you can see we do not have any nav bar over there and this is good now I want this button to be clicked so that it can navigate to the signup page and I can throw sign up page I should be able to navigate to this login page this is log in this is register instead of register I can make it SiGe and sign up this is looking good and title I don't okay just leave the title as it is because the title is not showing somehow so we are going to use let's go first of all save it to login page and this is a button this is a text so this text should be touchable we have a property with our form touchable opacity which we can use in our login dot JS file touchable opacity you can use here touchable sitting need a table opacity that symbol focus safety and this touchable opacity our property sorry attribute on PR ESS on press on press you can call a function it is dot this dot signup si GN sign up they start sign up and create a function here okay create a method and then sit inside this method we can use actions actions actions actions yes this action we can use action key door color action not killing directly so first of all we have to import the action for this module we'll go back to login page and we will pull the action ACD iron actions spellings should be correct so now actions dot key key name so our key name is the signups I'll complete this login action start cleaning this is beautiful now we can see if this works yeah okay this is fine now if I'll click on this sign up it's redirecting to the signup page but if I am clicking on sign in it's not going to the sign-in see you can see it is a sign up I'll click on the back button it's came back to this login page login I have our login text whereas sign up our sign up next but I need this sign-in button to be working so in that case I will go back to signup page I will copy this over from there to here and for using this we have to import it always remember and closing tag we had added this closing tag here on press back uck go back function on that turd this is how we define our methods in react native go back what else it has what else what else you have to use this actions in this file also actions now for going back to the history do we have any properties in action so you can see we have a pop go back to the previous screen by popping the current scene of the nav stack so we are using this start of the pop function ok signing : no problem with this we will refresh this and check if this working this is sign up this is sign-in to sign up there's a sign in I don't click on this back button this won't work because this is fine this is fine this is our second screen this is our first screen but before first screen we do not have any other screen that is why this backwardness not working right right now we have a beautiful now we can see this cursor has some different kind of colors so we have property for that also select on focus selection selection color is here highlight and cursor color text so we can use it in our phone gorgeous selection color should be a chef an F F F F F and other thing email address my email keyboard type so our keyboard type should be right for now it's not showing any at the rate signs so we will use this both type keyboard type is both type should be it's an atom and also this atom will have our email address email address email address okay but but but but but now I want that if I'm entering my email address here I create something something then I'll click in this check box it should go to the password so I'll do one thing I'll create a reference to this password chef this chef will be function I am bu T input input will be S dot P SS wo Rd distorter password equal to PI and P UT this is the way you can assign it to a reference now I'll go here and create another attribute on submit editing su P term righty-tighty ing or submit editing I need to call a function and this function will be this dot password their stock password text field so for that we can use this F or see us focus properly I forgot them previously to use this now you can see it works fine it automatically went to the password section and that's great this is fine we can use it this is working fine the back button is working fine so that's it guys now we will see in the next video how to create inner pages and the real authentication till then bye bye

Channel: Faadu JS

Views: 268,080

Keywords: React native login, React native login example, React native navigation, React native tutorials

Id: _K41vd_W2qE

Length: 65min 12sec (3912 seconds)

Published: Mon Oct 16 2017