Expo React Native Login System #1 | Creating the pages (STEP BY STEP)

hello there welcome to another episode of to the point code in this episode we will start a series in which you create a login system using expo and react native by the end of the series we would have created the login screens connected it to a back end set up the authentication flow and more but for this particular episode we'll create all the login and sign up screens that we need for application if you have integrated an app with expo and react native before please check out this video that's our link up here it will guide you to set up expo and react native development on your pc without wasting anyone's time let's get started so we head to the command line and create our expo application we will call our application flower crib this is just an abstract application for let's say selling flowers [Music] [Applause] once our application has been created successfully we enter the directory and open it in a code editor [Music] once the code editor is open we see all the files and directories that have been generated for us now the first thing i do when i'm working on a project is to add a prettier config file to the code this will ensure that the code looks the same regardless of the pc you are working on so inside the root directory of our project i'll create a pretty config file inside this file i'll paste the configuration that i've already copied you don't have to do this for the code to work it is just one extra thing that you can do to make the coding more interesting once you have done that let's set up the structure for our work we'll create some directories and files first we'll create a components directory inside this component directory we'll create a styles.js file we will use this to house the styles of our components [Music] now we create a screens directory this directory will house the pages of our application [Music] so we basically have three screens the login signup and a welcome page so create them [Music] now i have two images that i'll be using in the application so i'll copy them into the assets folder once you have done that let's head to the command line and install a few packages so first of all you install formic you will use this to handle our form data in addition to that we'll install styled components we'll use this to style our components also we'll install expo constants we'll need it for some styling in the styles.js file [Music] [Applause] once the installation has completed let's run the projects in our emulator and start writing some code [Music] so to start let's define our colors and create a few components in the styles.js file but first of all we import styled components [Music] this will be the colors that we'll be using throughout our application [Music] so [Music] [Music] now let the structure the colors so i'll be able to use them easily by just referring to the names [Music] [Music] now our first component will be a start container [Music] for that we'll make use of the view component so let's import it from react native [Music] let's give it some styles [Music] now we want to give it more pattern at the top so that our content will not interfere with the status bar so make use of constants from expo constant to be able to get the height of the status bar so let's import constants from expo constants [Music] now get the height from the constant [Music] now we set the pattern at the top so the status bar height and just to be saved we'll add 10 and set the unit as pixels now for the design we are targeting we need another container and we'll call it in a container once again make use of the view component let's give it some stars [Music] now on the login page you want to have a logo and also a title so let's create those two components [Music] this will be an image so use the image from react native for now just set the width and the height also let's create a title we'll call it page title this will be a text [Music] now let's add the text and the image to the imports [Music] now let's go to the login.js file and create our component [Music] now let's import the styled components that we created [Music] now let's use them in the component first of all use our styled container [Music] now we go on to add our logo oh i forgot to add where we are importing the components from [Music] now we can go ahead to add our logo now because our logo is a local file that is the file exists in our code base we'll make use of the source attribute inside the source attribute we provide a required function and we'll pass the path to the file to our required function and this file can be found in the assets directory so we go back a directory to the assets directory and enter the image directory and our file is called image1.png now in addition to the source we'll add resize mode to the attributes we'll give it a value of cover now below this we add a page title our title is flower crib [Music] now to see the output of our components let's go to the app.js file now let's import our login.js file remember it is one of the screens [Music] now let's replace the content of the app.js file with the login [Music] once we do that and save we can see our output in the emulator we see the image and also the page title now for this project i want to style the status bar in each screen so i'll copy the status bar input here and paste in the login.js file [Music] now right below the styled container i'll put our status bar there and i'll give it a style of duck [Music] and now you can see that our status bar is looking better and it blends with the background of our page now inside the app.js file let's clear the unused code [Music] now back in the styles.js file let's create a subtitle component and also a form area component [Music] the subtitle will be a text [Music] [Music] [Music] now the phone area will be a view so call it styled form area [Music] we are using this to set the width of our input fields [Music] now inside the login.js file let's import the created components now the subtitle will contain accounts login now for the form we make use of the formic package that we installed so let's import formic [Music] now inside the inner container let's use the formic component now the format component will take some properties first it will take an initial values property and this particular form will have only email and password so you provide those values [Music] in addition to that it will take an unsubmitted property this will be a function that will be called when the form is submitted and this takes in a values parameter for now just output the values to the console now inside the formic component is a function which returns the input fields so we put our start form area in it [Music] now this inner function comes with some parameters as well so let's destructure them first of all is the handle change function which will run whenever the values in our input field changes just what comes with handle blade the handle blade will run whenever our input field loses focus also we'll have a handle submit this will run whenever our form is submitted and lastly the values let's represent the values of our input fields so now we need to create the input fields so let's go below the login component and create an input field component i'll call it my text input [Music] my text input will take a few properties so let's destructure them it will take a label property an icon and the other text input props for now [Music] so inside the component to make use of a view so let's import the view [Music] now the other component will be styled components so let's go to our styles.js file and create them so first of all we will style our text input component and we'll call it style text input [Music] remember we are getting this from react native let's give it some styles [Music] so [Music] also you create a component for the label we'll call it style input label this will be a text do [Music] also create a component for the icon we'll call it left icon because to be putting the icon on the left side of the input field this will be a view as well [Music] now create something similar for the right you will use the right one for the eye icon but for the eye icon it will be something that will be pressing on so instead of the view you want to use touchable opacity for that so let's import it from react native [Music] [Music] now let's create a button and also the content of the button which is the text record the button start button once again we use that shabu opacity [Music] [Music] and for the text in the button we'll call it button text [Music] now let's use the component we've created so far so let's go back to login.js file so first of all we put the left icon but first let's import them [Music] so first of all use the left icon [Music] so the left icon that we created was a wrapper so we pass the icon as a child to it and we get our icons from expo vector icons so for our input fields you want to use icons from out icons so we import oct icons from expo vector icons [Music] let me take it up instead [Music] [Music] i will make use of the octagon component [Music] so for the name of the icon we'll pass the icon property that was received [Music] also we give it a size of 30. [Music] now it will also take a color property now since we want our colors to be consistent we will import the colors object from our styles.js file [Music] [Music] actually you can just add it to the imports here [Music] and we can go ahead to distract the colors that we need from it so for our icons we use the brown color so we pass the brown color to it after the left icon we bring our label which is styled input label [Music] once again we'll supply the label which was provided as a property after the label we want to bring our input field which we called style text input [Music] now for this component we'll spread all the properties on it now let's try out this component for the email field [Music] so between the style form area we'll use my text input here [Music] [Music] so for the label we'll say email address for the icon we will say mail now also give it a placeholder [Music] you also give it a placeholder text color i'll say dark light [Music] and i have to import it from the colors now we need to pass these functions to it so we pass on change text so the handle change function will take a parameter which is the name of the input fluid and our input foot is called imbue this will be the same for the handleblade [Music] [Music] now it also take a value property and you'll get the value from values.email [Music] also as an extra property you can pass a keyboard type and we'll say email address [Music] so now on saving and refreshing the application we see that our input footage displayed nicely over here and also the icon is on the left side now let's copy it and do the same for our password field [Music] so we change the label to password and we change the icon to lock also for the placeholder we'll change it to a bunch of asterisks [Music] now for the handle change we'll change the arguments to password [Music] we'll get rid of the keyboard type now because this is a password field we want the input to be hidden whenever the user is typing so we pass another property which is called secure text entry and this will take a boolean value so for now set the value to true now trying out the input field [Music] we see that the password field hides the values that we input in it now let's go ahead to add the right icon to the password field now since we don't want to apply the eye icon for all the input fields but only the password will attach another attribute to the password field and we'll call it his password so that when we receive his password in my text inputs component we know how to handle it differently [Music] so now we'll check if his password is true and return the right icon but before we can use it we need to take it in now if his password is true we return the right icon component now this time for the eye icon i'll make use of iron icons so you import that tool from expo vector icons [Music] now the size will be 30 as well and the color will be dark light now for the name of the icon it will be dynamic because whenever the user presses on the icon you want to change the icon from maybe the eye to an eye slash or an eye off so to be able to do this we make use of state here so we import eustate hook from react [Music] so inside the login component we created a state we use the state to monitor when to hide the password or show the password and in effect we can determine which icon to show so call the state's hide password [Music] so initial value will be true now since what controls whether we see the value in the password for or not is the secure text entry you also pass the state value to it so instead of true here we'll pass the value of height password also we'll pass the height password value and also the set function which is set hide password to my text input component here so that can be accessed then you to handle the right icon here [Music] oh i made the type while spelling ionicons so let's correct it now let's take in the two properties we just passed in so we take in hide password and set hide password [Music] so once hide password is true you want to return the name of the icon as mdiof that's the name of the icon we want to use when the password is hidden if the password is showing want to use mdi now i'm taking in the values i forgot my comma [Music] now inside the styles.js file we forgot to change the left property of the right icon to right so let's do that by doing that our icon should be fixed and we can see that is displaying on the right now for pressing on the icon to actually work we need to pass the on press property to the right icon component [Music] so on press we want to toggle the value of the hide password [Music] adjust a good word wrap so that we can see all the code here now we see that pressing on the eye icon the icon toggles and when we type a password in it it changes from hidden to visible so it's working as intended now let's add the button that we created remember recorded start button but we haven't imported them yet so let's do that so import start button and button text [Music] [Music] so the text of our button will be login now when the button is pressed we want to call the handle submit function let's add an align content center property to the start button [Music] [Music] sorry it's align items now in between the password folder and login button we want to put a small text box which we use to display messages that will come while signing in and signing up so let's create that we'll call it messagebox [Music] also we want to create a horizontal line which will display after the login button so let's create that we just call it line and it should be a view [Music] [Music] [Music] so now let's import and use the message box and the line in our login component [Music] for our message box we just contain three dots and after the start button we'll put our line so under the line that we have here you want to put another button for google sign in and also put some text which contains a link to our sign up page so let's copy our start button here and paste it for the google sign-in [Music] now we want to add the google icon to it but this time we want to take it from frontis2 so you import it from expo vector icons also we want to make use of the primary color so let's import it from our colors now inside the start button let's add the icon [Music] [Music] so [Music] now for the icon and the text in the signing with google button we want to style them a bit differently so let's add some properties to it which you will use to style it differently in the style.js file so for the button we'll pass a property google and set the value to true we'll do the same for the button text [Music] now let's go to the styles.js file and style them now we check if the property google has been set to true [Music] [Applause] [Music] so if the property google has been set to true then we return the following styles [Music] [Music] i will do the same for the button text [Music] now the button is looking as we want it to look now for the text that we'll be putting under the sign-in button we'll create a few more styled components which you will use to display the text correctly so the first of all you create a container and we'll call it extra view [Music] [Music] [Music] we create another component and call it extra text [Music] now for the button which will lead us to the sign up page we want to style it to look like a text so we will call that text link but will make use of a touchable opacity [Music] finally for the content of our test link we'll call it text link content [Music] so back in the login.js file let's import them and use them [Music] so right below the last start button we'll put our extra view [Music] inside the extra view we'll put our extra text and this you see don't have an account already [Music] we'll follow this with a test link [Music] now we see that the test and the link are displaying nicely so basically we are done for the login page now let's move on to the sign up page the sign up will be very similar to the login so let's copy the content of the login.js file and paste in the signup.js file now to start let's change the name of the component [Music] and let's change the subtitle to account sign up now in the app.js file let's import the signup component [Music] let's replace the login here with sign up now in the signup.js file let's copy and paste the input fields a few times so for the email field we'll copy and paste it twice now for the password we'll copy and paste it once [Music] now for lack of space we'll get rid of the logo [Music] now we don't need the signing with google here so we'll get rid of it for the extra text instead of don't have an account already we will change it to already have an account [Music] and we change the button to login now starting at the bottom the second password folder will be changed to confirm password so we change the label to confirm password and we'll change the field name to confirm password as well [Music] now for the text input field we'll change it to date of birth and i'll change the icon to calendar for the placeholder we just put here month and day for the field we'll call it little bit [Music] to get rid of the keyboard type now for the values we'll change it to date of birth for now i'm saying for now because we'll change it later on [Music] for the second field we'll leave it like that and we'll change the first field we'll change the first field to full name for the icon we'll change it to person and for the placeholder we change it to richard burns we'll change the field names as well now let's add the fields to the initial values [Music] now the input fields are looking good but for the date of birth code we want to do a little bit more we want to pull up the calendar whenever the user presses on the date of bed field so that you'll be able to choose a date of bed from the calendar instead of just manually typing it so to do that we'll make use of the date time picker so to be able to use it we need to install it so we head back to the command line now we terminate our server and install the package i use ctrl c to cancel it [Music] now once the package has installed successfully we can go back to the documentation and visit the usage from the usage we can get access to the import code it is a bit long so i didn't want to type it so now paste this command at the top of our file i'll do it just below the colors [Music] also on the usage page we can get access to the dates time picker components being used so we'll copy that too for this one we'll paste it below our subtitle now for the date time picker we need some more state variables so let's create them first of all we'll create this show state variable [Music] secondly we'll create another state variable to hold the current value or the current date of the picker so we call it date so we'll pass a new date object to it and we'll put any random date there so i'll just put 2000 january 1. remember the 0 here represents the first month so the dates time picker needs this value to be able to work but also i'll create another state variable to store the actual date of birth which has been chosen by the user [Music] so in addition to the state variables we'll create two functions the first one will be on change this function will run whenever the value of the date picker changes and this will take a parameter of event and also selected date so if the value changes you want to set a current date so the selected date here or to the initial date if no data has been selected actually [Music] once you've done that you want to set show to false that is hide the date time picker also we want to set the date to the current date also the database that will be sent actually we want to set that to the current date also so another reason for creating this date of birth state is that we don't want the initial date here to be displaying in our date of birth field as we are creating a new state with an undefined value i will create another function and call it show date pickup now this function will set the value of the show state to true [Music] now let's make a few changes for the mode property of the dates time picker we'll change it to date now before we continue let's connect our app back to the metro server we can see that it cannot connect to the metro server so let's go to the command line and start the server again we use expostat [Music] now let's make a few changes to our date of birth input field so remember how we pass the property is password to the input field so that we can make some changes whenever the input field is a password we will do the same for the date of birth so we pass the property his date to it so if his date is true then we make some changes to the input field now for the value we'll change it to the dob states that we created so to avoid getting an undefined value we will check if the dob has been set so if the dob has been set it will be a date object so apply a method to it to convert it to string so the method is to date string [Music] otherwise we'll just return an empty string also because we want the date to be picked directly from the date speaker we don't want to make the field editable so set editable to false now the show dates pickup function that you created here will pass it to the input field as well [Music] now let's take in the east date and show the speaker and then my text input component now if the input field is date we want to wrap our style text input in a touchable opacity component so that when the user presses on it will be able to trigger the shoulder speaker to pop up the date picker so we import touchable opacity from react native [Music] so first of all let's cut this component for the first condition we'll check if his date has not been set or his date is false so if his date is false we just pass the input component that we cut otherwise if his date is true we wrap the whole thing in detachable opacity [Music] now for the unpressed property we'll pass the shoulder speaker to it [Music] now let's try out the input fields now when we click on the date of birth field we see that the calendar pops up and it gives us the opportunity to choose the date so let me choose any random date [Applause] so on pressing on ok we see that the value of the date of bet field has been updated and this is exactly what we want now let's move on to the welcome screen once again it is a bit similar to the login page so let's copy the login content and paste in the welcome.js file [Music] [Applause] so in the app.js file let's import the welcome component [Applause] [Music] now the welcome page will be slightly different so create a few more components just for the welcome page so let's go to our styles.js file so first of all we'll create a welcome container this will be a bit similar to the inner container [Music] since it's a bit similar to the inner container we can build on that [Music] [Applause] [Music] also you create another image component and call it avatar [Music] [Applause] hey [Music] [Music] [Music] also we create another component and call it welcome image [Music] so [Music] [Applause] [Music] [Music] also make a slight adjustment to the page title and the subtitle if a welcome property has been passed so we shall give props that welcome is true [Music] sorry these properties are supposed to be for the subtitle so we change the properties of the page title we just add a font size back to the welcome page let's make these changes so for the welcome page you want to put a big image at the top and this image will cover the top portion of our application and enter the status bar so from the start we will get rid of the styled container because we will not use it [Music] also let's get rid of the input for them buttons [Music] let's replace the format with a welcome container [Music] let's change the login button to log out for now we just use an arrow function as a placeholder for the unpressed property [Music] you also get rid of the signing with google and also the extra view [Music] let's bring the line above the button [Music] now let's import the welcome container that we just used also let's import the welcome image now let's change the page logo to the avatar so therefore let's import the avatar [Music] now let's cut and put the avatar in the styled form area now the page title and subtitle let's bring it inside the welcome container [Music] now let's attach the property welcome equals true [Music] let's change the value of the page title to welcome body [Music] also let's change the subtitle to a name for now i'll just put olga simpson [Music] let's copy and paste it this will be for the email [Music] now on top of the welcome container let's use our welcome image let's copy the properties of the avatar [Music] the only difference is that we'll be using image 2 over here [Music] now as you can see our image is showing and it has entered the status bar but now we can see the content of the status bar so now let's change the style to light and after doing that you see that it's looking way better now let's get rid of the unused values and inputs and we'll be done for this episode so we get rid of the input field here [Music] also we get rid of the state variables here we didn't use the colors so we can get rid of them also the view was no use then in the import we can get rid of the imports that were not used [Music] [Music] so we are done but before we end let's go into the app.js file and render the login component so that we observe something [Music] let's render the signup component instead okay so on the sign up page let's observe something when we are trying to enter something into the input fields the virtual keyboard comes up but when it gets to the password section we see that the keyboard is covering the input fields and we cannot see whatever we are typing this is an issue and it gives off a bad user experience so in the next episode we'll see how we'll fix this and get the keyboard out of the way while an input photo is in focus and we are typing

Channel: ToThePointCode

Views: 31,108

Keywords: react native login system, react native login system screens, react native login screens, create a login system with react native, create a login system with react native and nodejs, create a react native login system from scratch, how to create a login page in react native from scratch, react native login page, react native login page ui, react native login page tutorial, react native login signup and navigation example, login app using react native, react native tutorial, react

Id: BQ-kHwLlhrg

Length: 70min 4sec (4204 seconds)

Published: Thu Apr 22 2021