Build Full Stack Social Media App in React Native #1 - Login & SignUp UI

hello everyone welcome to the latest project on code with DOI today we're going to build a full stack social media app using the latest Expo outer and super base in this project you will

learn how to make beautiful and responsive UI we will Implement superbase OD so user can login using their email and password you'll be able to post images and videos as well you

can create likes comments and you can even share the post with your friends there are so many other features built into this app so let me quickly show you a demo and then we will start building

this app so as you can see the app is fully responsive on IOS and Android so let me just quickly log out and when we first open the app it will show a welcome page like this and if we click

on getting started it will move us to the signup page where we can fill all the information and create an account and this is the login page so let me just quickly use my account and log to

the application once we click the login button you will see this loading animation and it will move us to the home screen now we don't want to save the password and on the home screen you

will see all the post from every user and if you scroll all the way down you will see a loading animation because we have implemented pagination so as you scroll down it will fetch more and more

posts and if there is no more post then it won't call the AP again I'll show you how you can implement this then you can like any post using this hard icon you can create comments and you can even

share this post so if I click on this icon I will be able to share this image and I can also save this image into the gallery then if I click on this comment icon it's going to open the details

model where I can see all the comments I can also open this detail model using this three dots icon it's going to open the same model where I can see the list of the comments and I can even create

comments so let's create this comment and as soon as this commment is added you will see uh there's a new notification on this second device because I'm logged in as JN know on this

device so I'll show you how you can implement this real time updates from superas so this is the homepage now let me show you the user profile section here is the profile where you can see

the user details and if we click on this edit icon you'll be able to edit all the information so let's change the profile image uh let's use the this

one and uh let's also change the bio to code with Nomi and let's hit update this is going to update the user profile data so image

is updated and bio is updated in this section you will see only the user post and we have also implemented bination here as well so you can also upload

videos in the post so this is a video post from this account so you can move forward this is is a fully working player for our videos you can make it

full screen uh you can move forward move back so this is how the videos are working now let me show you how you can create a post so if you click on this

plus icon we move to the create post screen where you see this fully working Rich Text Editor and we have a lot of styling features for the post body so

let's add the text as colorful and now I can make it Bard or italic then I can move it to uh Center or to

the right side or to the left side then if you scroll we have other features as well so I can make it heading one to make it big or heading four and these are not all of the features from this

Library I'll show you how you can Implement all of the features and uh this will help us to modify the styles for our post body we can also add media to this post so if I click on the image

icon it will show all the images from our Gallery I can choose the image it will show the preview we can remove this using this icon and if we click on the

video icon it will show only the videos from our gallery and I can even uh trim this video and then select this video for our post so let's choose this video

now we can see the video and this is a fully working player so you can check the video before posting so let's remove this and add the image for this post uh

let's choose the flaw and hit post and when the post is created it will instantly appear on both of the devices and that's because we're using the real time changes from super base I'll show

you how you can Implement those then if I open the post details on this second device uh let's create a comment to see how the notifications are working so

let's say nice and add this comment the comment is added and also a new notification is added on the first device so if I click on this not ification icon it will show all the

notifications for this user these are the old notifications for testing and if I click on this uh new notification it will open the post details and highlight the comment that was created this is

very useful because this way user can know which comment was related to the notification so let's create another comment morning and let's click

Send the comment is added and so the notification item so let's click on this new item and it will highlight the new comment that was created so this is very

helpful next let's see how we can delete or update any post so if user opens his own post he'll be able to see two icons at the top edit and delete and if we

click on the delete icon uh we will show the same page but with the post data so let's change this text to morning and let's also remove the

styling and let's update and when this is updated it will be updated on both of the devices it's updated on IOS and Android from both

accounts and uh uh you won't see the comments uh count here on this home feed because we are not using realtime updates here but I'll show you how you can do that but for now simply if we

just reload the application the comments count will be updated now let's see how we can delete comments and the post these icons will only be shown to the post owners and and for delete comment

only the post owner and the comment owner can delete them so let me open another post to show you what I mean so this is my comment and I can

delete this but if I open the same post from Jon Snow's account he won't be able to delete this because only Sarah and I can delete this comment now let's see

how we can delete the comment so if we click on and the delete comment icon it will confirm us then if we delete it will be removed and

now uh let's see what happens if we open the notification related to that comment so if I click on this uh it won't highlight anymore because the comment wasn't there and if we delete the post

we won't be able to see the post details so let's delete this and as soon as we delete this it's gone from both of the devices because of the real time changes

now let's open the notification item and now it will say post not found because we just deleted it so this is how the realtime changes are working and how the

notifications are working so this is just a brief demo of all the features you can view all the post upload images videos see the profile section update

profile data uh create comments likes and share the post if you want to upgrade your react native skills then this is a video for you you can find the source code link into the video

description also you can find so many other great apps like this one on my channel so make sure to like the video and subscribe the channel for more

content like this so let's start building this app so first we're going to create an export outer application so first you'll

need to go to export. d/ router

installation or if you go to export. in

the sidebar you will see this installation option just click on it and you'll find this page so there is this manual installation guide but we're going to stick to the quick start so

let's just copy this command and we're going to open the terminal uh let's move to the desktop and paste this command

here and for the name of this application we're going to use super social app CU we're using super base as well now this is going to download all

the template files for us and in the meantime let me show you something so we're going to use eraser. I to track the progress of our application or to

draw any mockup of the screen and in the sidebar I've added all the steps that we're going to do while building this application and in the canvas we can draw anything so for the setup uh we

have uh created the export order app so I'll just mark this as done now we're going to perform all of these steps now the application is downloaded and uh we can close this terminal I've already

opened the project into vs code so I'll just drag it here and make it full screen let's also add our simulator here

so I've already open the simulator so let's adjust them both in the single window like this uh let me make it

smaller now let's try to run this application and see what it looks like so let's open the terminal and run the command npm run

iOS now this is is going to build this project for us and open in Expo go and it's building okay the app is running and we

have two tabs at the bottom explore and home screen we're using the latest expore outer SDK so if you see in the package. Jon we using 51 SDK and if you

package. Jon we using 51 SDK and if you go into the app folder you will see all of the code for these tabs explore and home but we're going to delete all of

these files because we going to start from scratch so let's delete all of these files and in the assets uh in the components we will delete all of these

files as well but we'll keep the components folder and in the constants we don't need this colors file so let's delete this as

well and hooks um we don't really need the hooks so let's just remove them okay so uh now we have a very clean

slate to start with so let's create our first component index. GSX uh don't worry about this error just create a functional component inside this and

let's save this now we're going to have to refresh reload our application and we will see our first component as you can see the index file now if you want to learn more about export outer I will

leave the link of a detailed video about export outer into the video description so you can check it out so now we're going to perform all of these steps starting with the theme setup so let's

go back to our application and create a theme file into the constants and I'll just copy and paste the theme configuration here this is an object containing the colors fonts and the

radius that we will use throughout the development of this application so we have the basic colors primary dark gray we have the uh fonts which we use as the

font fight and the radius is I've defined all of this into this file because if we need to change anything we'll just change this here now let's create another file index.js and uh

let's just leave it empty for now but we'll use this later we will also use some helpers to design our application so let's create helpers folder and inside this let's create a common.js

file for our common helpers now to make our app responsive we're going to give some of the Styles as percentages and for that we will use the device height and device width to

calculate a percentage value for the style and we can get the device height and width from the dimensions object from react native so this will uh get us

the height and the width of the window which is actually the height and width of the current device now we will create a function HP that stands for the height percentage and this will receive a

percentage value now using that percentage value we will calculate uh value using the height and width of the current device so percentage multiplied

by the device height divided by 100 that will give us the height percentage and we'll just copy this one for the width percentage so let's copy this and call

this WP as width percentage and we'll just change the device height to device width now we can use this to make our design responsive now let's create a component inside the components folder

as screen wrapper this is going to wrap all of our screen and we're going to give a padding top to this component so that our content don't conflict with the

notch area so this will receive children props as and the background so let's remove this and here we will display all the

children's and let's add a style to this let's give this a flex one so that it takes full space and for the padding we will use a safe area inserts so that we

have a padding on all of the devices so let's use the top value from use safe area inserts and first we will check if uh

the Top Value is greater than one that means uh this device has a notch and in that case we will give the padding as top plus 5 pixels otherwise we will have

a 30 pixels of pedding now let's use this in our Styles object as the pedding top and let's also add a background

color as BG which we are passing to this component so let's use it here and everything's good to go so let's save this now we're

going to use this but let's review what we have done so far so setup theme is done helpers are done and Screen wrapper is done next we're going to design our welcome screen so let's create a welcome

screen into our app folder like this and let's create a functional component and I'm able to use this short codes to create a component

quickly and I'll show you how you can do that so if you head over to extensions you will need to install uh this extension es7 Plus react Redux Snippets

and you will also need to install this simple react snippers extension so then you'll be able to use these snippers to create your functional or Clause components quickly so now let's use our

screen wrapper here and let's save this but uh we are not able to see the welcome screen yet so let's go to the index screen and here

let's create a button that will move us through the welcome screen don't worry about this our first page will always be the welcome page but uh the reason we are using this index page because later

we will use this as unloading when we implement the authentication so uh just go with the flow for now so when we press on this button we will use our

router to push to the welcome screen like this uh save this and if we go to welcome we are moving to welcome screen but uh we have this pedding at the top

which I think we haven't defined into our screen wrapper but I think it's coming from the header from our layout because we are in a stack layout so

let's create a layout file into the app folder and uh let's create a functional component and here we will need to return the stack layout so let's return

a stack stack layout and save this now here you can see we have the header but if we hide this header maybe this pading will go away so screen options and add

header shown as false now the header is gone but we don't see the index page so we will need to use our screen wrapper here as well

so let's use screen wrapper and let's save this now if we go to welcome page we don't see that padding and the header is gone now let's

start working on our uh welcome screen but first we're going to create a mockup of our welcome screens so this is the welcome screen and let me just add a

label here like this now here first we will have an image of the welcome screen on the top so let's say this is the welcome screen

image and at the bottom we will have our app name or app logo we don't have a logo so we'll just have an app app name uh it will be big like this and then

after this we will have a punch line for our application this will be small and this will show after the app name now at the bottom we will have a get started

button so let's create a button and this will be get started now I know this looks very ugly but we'll make this beautiful using the Styles so let's

start designing this and before that let me just import all of the assets into the images folder so let me just copy and paste them here so here we have the

default user image which will show in case user don't have an image and the welcome image which is shown on the welcome screen so let's go to our welcome screen let's remove this and

we're going to give a background of white to our screen wrapper so let's use BG equals white then inside this component we are going to use a component called status

bar from Expo router to make the fonts into the status bar as dark like this now uh let's use another view uh which

will be the container so let's give this a style as styles. container which we will create in a

second like this now uh we already have a stylesheet here so let's create stylesheet as container let's give this

a style of Flex one align items as Center and justify content as space

around background color as white and the pading horizontal as uh now for the padding horizontal we're going to use the wp method that we

created earlier so uh this will Auto Import um let's go to our helpers oh we forgot to export it so let's export the both of these functions now this will

Auto Import from this file now let's use WP and now we can import this and let's give this WP of four that will mean WID percentage of four but we are not able

to see it because the background is white so if I change this to red and change the padding to margin horizontal then we will see a slight margin around the container and we can change this

using a bigger value and we will have a big margin so this way you can use these values as percentages to give the style as responsive style so we will use these

now inside this container we will use the welcome image first so let's import the image component from react native then for the style we'll use

styles. welcome image which we will

styles. welcome image which we will Define later and for the source uh we will use the welcome image that we just copied

from asset SL imagesw welcome.

PNG and let's save this we can already see the image but we will add the Styles so let's also add resize mode as

contain now let's add the styles for this image as the welcome image uh we will give this a height and width using the HP and WP method so for the height

HP uh which will be the height percentage of 30 and this will take the 30% of the overall height of the device and width will be

100 uh which will mean the full height full width of the device and align self to the center so that the image shows into the center like this and the image

is looking good now and now after this image we're going to show the app title and the punch line so let's add a comment here first uh as the

title and let's create a view and give this a style of Gap of 20 this will be the gap between the title and the punch line and let's add a text component for

our app name and let's add the Styles as styles.

title and the title of our app is link up and let's copy this text component for the punchline as well so let's change the styles to punchline and

remove the title and add our punchline which is where every thought finds a home finds a

home and every image tells a story like this now if I save this we can see the title and the punch line but uh we need to add the Styles so let's

add the style for the title now we're going to use the color from our theme object so let's import the theme object so we can use all of these different

colors from our theme as the primary dark or text color so let's use the color text for this title and we can use the HP method to

make the font size responsive so let's use HP of four that will main 4% of the total height let's also align the text into the

center and for the font weight we already have the font weights into our theme object so let's go to theme. fonts

uh if we go into the fonts we have the medium semibold and the Bold so let's use extra bold and now we have an extra bold uh

title of our app now let's add the styles for the punch line and uh we will have the text line into

Center adding horizontal of uh WP 10 and the font size of uh HP 1.7 we need to make it

smaller and the color will be the same text color for that we used for the title let's save this now we have the title and the punch line styled now at

the bottom we're going to have a footer area where we will display a get started button and some login text so let's create a view give this a style of

footer and here we will have a custom button that will say get started so we'll create this custom button so we can use it after so let's create a component

inside this folder button and let's create a functional component now let's save this and import this

here we will have to pause some properties later but for now let's leave it empty so now we can see the button so let's go inside this and this button

will receive uh some properties as a button style then the text style uh the title for this

button and an on press method uh which is an empty function for now but uh we will provide the function later so a loading by default it will be

false and a property has Shadow if we want to have Shadow for this buttons so by default this will be true now uh let's uh change this View to a

pressable and the onpress method will be the on press function that will pass to this and for the style we will have multiple styles for this button so first

we will provide the styles from stylesheet so Styles or button we will provide this here these will be the default Styles

then we we will uh provide the button style that we pass to this from parent component and uh then we will also have some Shadow Styles so let's create an

object here Shadow Styles and this fun this uh this object will only be applied if the has Shadow property is true so if has Shadow is

true then we'll provide Shadow Styles like this and same for the text so by default we will have the text style from uh the Styles sheet in this component so

styles.

text and the text stle from the parent component like this and this button will display the title so we can pause the

title from the parent component so let's pause the title here as getting started and if I save this you can see uh we have the getting started title now

let's add a button style as well and give this a margin horizontal of wp3 and we can also pause and onpress

function so let's leave it empty for now so uh now we're going to have to style this button then we'll come to this function again so for the button style

let's add the background color from our theme object as the primary color like this then uh for the height

of this button let's use our HP function to give this a height of 6.6% then justify content as Center

align items as Center and then border curve as continuous and let's use the Border

radius from our theme object as theme uh we need to import the theme theme. radius. excl and these are

theme. radius. excl and these are already defined in to our theme object so we can use these multiple radiuses now uh let's save this and uh this looks

weird but we'll fix this later so now let's add the style for the text so text style and let's give this a responsive

font size of HP 2.5 then color will be white and the font fight we already have

the font weights into theme object so let's use the font weight of bold and let's save this now the reason why it's showing this because it doesn't have a

full width so let's go into our welcome screen uh not this one so welcome screen and we need to provide the full width to

our footer so let's give the styles for the footer as let's add a gap of 30 pixels then width will be be 100% like

this okay so the button is looking good now this is our custom button that we can use later so uh we're going to use this multiple times so uh the only thing

left is the shadow styles for this button so let's add the shadow Styles let's do Shadow color as the dark color from our

theme then Shadow offset which will be an object width will be zero and height will be 10

pixels like this and Shadow opacity as 0.2 Shadow radius will be eight and then the elevation will be four for Android devices let's save this

and now we can see the shadow behind the button and if I make the has Shadow property false we won't see this Shadow so we can control the Shadow by using this has Shadow property from the parent

component as well so this component is almost complete we are just going to show the loading State using this loading property so if this loading is true we're going to make a condition

here if loading is true we're going to return a view here that will display the activity indicator so let's create a view and give this a style as the Styles

start button actually we need to give this uh the Styles start button and the button style because we want to take the same

space as the button is taking so Styles start button and the button Styles then the background color will be white like this and inside this we're going to

display the activity indicator so let's create another component for our loading state so uh into the components folder let's create a new

file loading. GSX and let's create a

file loading. GSX and let's create a functional component uh now this function will receive the size and the color property for this

loading indicator so by default the size will be large and the color will be the primary color from our theme this will be the default color but but we can

change these properties from the parent component so uh let's give this the style as justify content into the center

and item center line item Center then in inside uh this we going to return an activity indicator from react native

give this a size as the size and the color will be color from the props let's close it and save it now we can use this loading component

uh in the button component so let's move to button and here import the loading and let's say save this now uh we need to make the loading true to see

to see this so let's make it true and now we can see the loading state so this is how the loading state will show and if this is false we will

display the button so this component is complete now we can move back to the welcome screen and add the login text at the bottom of this button so we'll

change this later now let's add a view after this button and give this a start of um bottom text

container like this and inside this we're going to have a text component with the style of login text and this will say already have an

account if yes then user will click on the login button so uh after this let's add a pressable for the login button

and inside this we will have a text component that will say login so for the style of this component let's use styles. login

styles. login text like this and this will say login and if I save this we can see the text but we need to style it so let's go

to our stylesheet and add bottom text container and give this a flex direction of row justify item

Center and align item Center and let's save this so uh we need to add a gap between these text so let's

add a gap of five pixels okay it looks good now let's add the style for the login text and let's give it text line

Center and uh text color as the text color from our theme and then the font size using our HP

function as 1.6 and let's save this okay so the text looks good but we need to make the login text as the button so that user know

it's a button so that's why I added an array of the Styles here so let's change the color as the primary dark color from

our theme and let's also make it semi board so font weight as theme do font do semi board and let's save this now this looks

more like a button so that user can click it so this welcome screen is complete and next we're going to move to the sign up and login screens using the getting started and the login button so

first let's create those components let's create the login screen and a functional component let's change the name and save it let's create

the sign up page a functional component and uh let's change the name and save it now we're going to use a router to

move to these screens inside the welcome screen so let's use the used router Hook from export outer and when we click on this button

we have this onpress method this will push a new route as the signup so we'll move to sign up screen and for this login button we will use on press method

and this will push us to the login screen that we just created so let's save this and see if this is working so go to welcome screen

and if I hit getting started we move to sign up and if I hit on the login we will move to the login screen

okay so let's move to our steps and we have completed the custom button and the welcome screen next we're going to work on login and sign up screen and I'm going to show you how you can use SVG

icons using a very cool Library so we're going to perform all of these steps back button icons so let's create a mockup of the login screen so let's say this is

our login screen let's add the label as login screen first we will display uh text at the top welcome back this will be

displayed here then we will have have some fields for the email so this will be email and let's copy this for the

password then we will have a button at the bottom that will say login so let's just copy this one and paste it here

login and this will match the theme so let's give it a green color so this will be our login screen and same will be used for the signup screen so let's just

copy this the only thing we will add here is uh we will have a username here so this will say get

started and this will be the username um actually this uh we won't display the username here so let's move these at the bottom and at the top we

will display the username because we also want to get the username and uh then email and then password then the login button sorry uh this will say sign up

like this so uh let's also change this label sign up screen okay so both of these screens looks very simple but they will look

good once we finished with all of these steps so first we're going to create a back button inside the login screen so let's move to the login screen and first

we need to add a screen wrapper so that our content is away from the notch area and for the back button we're going to use the icon so let me show you the

library that we're going to use and it's called the huge icons it's a paid library but we can use the stroke icons for free so let me show you how you can

use the icons as an SVG into react native so first I'll search for the home icons and let's press

enter and this will show show all the icons that we can use so let's use this one and uh if I press on this icon at the bottom this will expand the page and

there you can find the react native code for showing this icon as an SVG so for this to work we need to install this react native SVG Library so let me just

install this first let's open the terminal and npm install react native SVG and this will install the library we

will also restart our server so let's write NP on iOS again so if we have any error we will

fix this right now so the app is running now let me just uh refresh the app okay so we don't see any errors that's a good sign so we're going to use

this back icon in the login component but let me show you how we can actually use the component so this is the react native code for this home icon so I'll

just copy all of this code and uh let's create a folder into my assets as the icons and I'll create a new file in here

home.

GSX and I'll copy and paste all of this code so now let's change the component name to home and you can see we are passing some

props to this component and if you scroll you will see this stroke width which is uh fixed but we don't want to have a stroke width as 1.5 we want to be

able to control it using from our parent component so I will provide it as props do stroke width so we can pass it from the parent component and it will be

updated now uh it's very simple to use this component so let's go into our login screen and here I'll just import

the home icon from our assets and if I close it and save it uh there we go we can see the home icon

that we just copied and we can provide some of the properties here like stroke width as let's say two this will increase the stroke width as you can see

and we can also change the color so if I I go into home we can see the color property which is black so we can change this color property because we are passing the props from the pent

component and then spreading all the props here so I'll be able to change the color from from here as well so let's use the primary color from our theme

object and this will update the color of the icon and we can use other icons so let's use rose from our theme and this has updated the color so this is how you

can use the icons from the huge icons Pro so the process is very simple you just search the icons in our case we going to use the back arrow and if I search for Arrow I can use all of these

icons if I search for let's say image I can use these icons for media so let's say I want to use this icon I will expand this and use uh I can copy all of

this code then I can move to our application and create a new file here uh same way we created home and we can change the stroke width if you want to

be able to control it so this is the process now I'm going to create an index file here because I want to generalize using these icons so I just have to

import one file and use all the icons so this component will be icon so let's change the name to Icon like this and we will have an

array of all the icons here so uh this the the key will be the name of the icon and then it will uh return the icon component from the same folder and we

can use other icons like Arrow left and this will have the arrow left icon from this directory we will add these icons later but uh we don't have this for now

so let's just use home this component will receive some icon props starting with the icon name and some other props that will include height width or stroke

width so uh first we need to get this component so icon component using the name on the icons array uh this will be name like this and

once we get the icon component we can return this here with all these uh props from the parent component uh we will have uh some fixed height and width if

there is no size property from the props so uh first we need to give the size property from the props if it doesn't exist then we will use 24 height and

same goes for the width if we have the size property then this size otherwise 24 then for the stroke width uh we will

use the stroke width from our prop and if it doesn't exist the default stroke width will be 1.9 like this and for the color uh we

will use the light text color from our theme but we can obviously change this because we will be spreading all the props here so in case if we need to change any of these properties we can

just pause it from the parent component and this will be updated so this will be icon as well uh now uh we can just import import this icon component and give this a name

and this will show the icon so let's go into the login component we no longer need to import the home icon and let's remove this now we can import the icon

from the icons folder and just give it a name as home and save this and this will display the same home icon again and we can pause the other properties and these

will work so color red and this is updated so I've created all of the files for the icons that we're going to use go into this application so I'll just copy

and paste them into the icons folder um yes replace so these are all the icon files that I just copied from the huge icons

that uh the way I just showed you guys before so let's go into the index component and let's copy the icons array here as well for all the icons so these

are all the icons now let me just copy and paste the import statements for all of these icons so let's remove all of these and paste it

here okay we have all the icons and let's save this uh Styles sheet doesn't exist I think we don't need this so let's just

remove it okay so now we'll be able to use all of these icons from this icon component so let's go into login and uh let's change the name to mail now this

is showing the mail icon and if I change this to delete and this will say the delete delete icon and arrow left Arrow left icon so now we can use all of these

icons just using the icon component and uh uh let's go into our steps uh we have completed the icon spot now we're going to work on the back

button so the back button will go actually on the top left corner so uh let's see if we can use the icon Arrow

so there is the back button so this will be displayed here at the top left corner on both of these screens so now let's create a back button component into our

application into the components folder let's create a new file back button. jsx

and let's create a functional component let's save this now let's first uh import this into the login let's remove this and first we're going to use the

status bar component to change the style do for our status bar text then uh let's create a view and give this a style of

styles.

container and inside this we're going to have our back button component uh let's close this and save this so we can see the back button now

let's go into the back button and start designing first uh this view will be be a pressable so that we can press on this back button and then inside this we're

going to use the icon so let's import the icon and the name will be Arrow left then stroke width will be

2.5 and the size uh we will actually pass the size from the parent component but by default it will be 26 but we can change it from the parent component so

let's use size and for the color let's use the text color from our theme object like this and let's save this now it

will be able to see the icons there is this icon now let's apply the back function on this pressable so on press uh we actually need to pass the router

to this component for that to work so let's move to the login uh component and let's create a router here use router from Expo router then let's pause the

router to this back button like this and if we go into the back button we can use the router so we can use the router. back function to go

back to the previous route now let's add the styles for this button so let's use the styles. button

the styles. button style now we will Define this style into our style sheet so button and first we will give it an

align self of flex start then the padding of five pixels and Border radius from our theme as the

small then we're going to have a background color so we will have a transparent black color so let's use R CBA color black color with

0.07 opacity and let's save this okay so the button is looking good now if I click on this button we should go back to the previous route and and let's see if it's working okay the back button is

working so next we're going to work on our login screen so let's move to our login component now here I can Define all of

the Styles one by one and I can show you how you can style each and every component but I don't want to do that uh because this will take a lot of time to complete this whole application so I'll

just copy and paste the styles for this component and when I use them I will show you what styles I've used for any component so let me just copy and P the

paste the whole style sheet here like this and let's save this I will use all of these styles for this component but I will show you each and

every style so uh we need to import WP and HP methods and then the theme object as

well that's why we seeing this error so for the container as you can see we have Flex Gap and the padding horizontal of wp5 you can use these now we're going to

have a welcome text so let's add a comment welcome and then a view and inside this let's have a text container

give this a style of Welcome text and then this will say hey welcome back so let's just copy this and change this to welcome

back like this now let's save this and we can see the welcome back text and the styles for this are font size font weight as this

and the color as the text color from our theme so you can use this so uh next let's add uh we're going to add the input so let's add a form text then

let's add a view and give this a style of styles. form which we already have in

of styles. form which we already have in our theme so if I click on the form style you will see we only have a gap of

25 pixels for each input item so let's create a text component and uh let's give it a style of uh let's use font

size of HP 1.5 and for the color uh let's use the theme colors of text and inside this this will say

please log to continue like this okay so now let's create the input component for our email

input but I want to use it as a custom input component because we're going to use it multiple times and it will be better to use it later for other

components so uh let's create a custom input component inside the components folder and let's create a functional component and this will receive some

props from the parent component so let's receive them and uh this will be the container view so let's give this a style of styles.

container let's use an error because we can pause the container styles from the parent component as well so if we have the container styles from the parent

component we will use these like this and let's remove this text and uh we can also pause the icon from the parent component so if we have

the icon then we'll just simply display the icon here and for the textt input let's import it from the react native

and let's give it a style of Flex one we going to pass the placeholder from the parent component but let's have the placeholder text color as the text light

color from our theme object like this and the reference will also be paed from the parents component if we need it for some reason so Props

do input ref we will use this if we are passing from the parent component then the rest of the prop props we will just spread

them here in case if we pass any so let's close this now let's design for this container Styles so let's specify the container Styles here

container and then uh we going to have the flex direction as row because we can display the icon and the input so the

height will be HP uh 7.2 and then the Align items Center justify content into the center as well and

let's choose the Border width of uh let's say 0.4 and the Border color will be from our theme so let's use a text color then

the Border radius will be a dou XL from our theme radius doou

XL border curve will be continuous and bding horizontal of 18 pixels then finally we're going to have

a gap of 12 pixels because we are displaying the icon and the input so we need to have a gap between them now let's move back to the login component and here let's use the input component

that we just created so first we're going to use the icon for this input so let's use the icon component uh make sure you import

the icon from the assets slash icon uh so we have this here then uh let's add the name as mail icon then the size will be 26

pixels and for the stroke width we will use 1.6 like this and let's close it then let's add the place folder for this

input as uh this will say enter your email so let's add it here like this and next we will have on

change text function uh this will trigger every time user types A word so this will give us a value so let's leave it empty for now let's close it and save

it and there you can see we have our custom input with the icon now we're going to save the email or the password into a reference so let's create

reference for the email and password you can use the state as well but the thing is the state updates every time user types even a letter so that's why I'm

using a reference but you can use the state so let's use the password reference now let's also create a state for the loading so whenever the loading

is true we will show a loading instead of the button so by default this will be false like this now let's change the email

reference current value whenever we got the value from the email input like this and let's just copy this for the password input and let's change this to enter

your password so now now if I type anything I can see whatever I type but I don't want to do that I want to hide it so for that

we need to use a property as secure text entry on this input so if I add it here we won't be able to see uh now whatever

we type just like this just like how password Fields work now let's change the icon to lock icon there we go so

these icons are coming from the input uh component that we created and you can either copy them from huge icons or you can find them into the source code I will leave the link of the source code

into the video description now uh we going to have a forget password text after these inputs so let's create a text component here and I'll give this a

style of styles. forgot

password we already have this into our stylesheet and this will say forgot password with a question mark like this

so if I go into the F password this says text line on the right font weight and the color so you can use these Styles now let's add a button here and this will be the

login button so let's import our custom button from the components and give this a title of login and then we going to have the

loading state which we already defined here and then an on press method which will uh trigger the on submit function now let's create cre this on

submit function okay so you can see the button and uh let's see if everything is okay okay so we're going to have to

change the background color so let's change the background color from our screen wrapper let's give it a white color like this and uh after this uh button we're going to have a footer area

where we will display if the user don't have an account then he can just uh go to sign up so let's add footer area let's give this a style of

footer and in the footer Styles we have all of these Styles so you can just uh copy these from here then inside the footer we will have a text component

with a style of styles. footer

text and this will say I don't have an account then just simply go to sign up page so for the sign up we will uh make

this as a button so let's create a pressable and inside this pressable we'll have a text component with the same style as the

footer text so this will just say sign up we're going to use the same Styles as the footer text but we're going to make sure it looks like a button as well so

uh we will add more Styles like the color so let's use the color as the primary dark color from our theme then

the font weight will be semibold so let's use theme. fonts.

semibold like this and let's save this now it looks like a button so our component is almost complete uh let's let's justest if the loading is working

so uh if we change the loading state to True uh we should see the loading indicator and yes we do and let's change it back to false now we're going to do the

validation here so if I click on the login we should validate login and the password and this should be password reference and if we have both the email

and the password only then we will call the API so let's check if we don't have the email reference. current value or if we don't have the password reference.

current value then uh we will use an alert to say to the user that please uh fill all the

fields like this and then we will just simply return from here but if we have both of the values then we are good to go and we

will call the API but not now so let's see if this is working so if I click on it we see the error and we if we only have the email we will still see this

error and if we have the password too uh we don't see this error so we are good to go so with this our login component is complete and we can just copy this for the sign up and we change a few of

the things so let's copy this whole code and we'll go to sign up and paste this here and let's save this um uh I don't know why but the

application just scratched so let's start it again okay it's working fine let's go to the login component and this is working

so let's change a few of the things for the signup component and let's change the component name to sign up let's also change the name when we

export this component in here and let's save this um we're getting a warning

here navigation state was from the oh this is nothing we can just ignore it so uh let's go to the sign up

page and it's still the same as the login so let's change uh some settings we already in the sign up page so this

will say sign up like this and uh we will also add a name a name input so let's create a

reference for the name input and then uh this will say let's get started so let's change the welcome back to get

started like this and then uh this line will say uh please enter the

details to create a new account like this now we need to create a new input for the name so let's copy the email and change the icon to user

this will show the user icon and let's change the placeholder to enter your name like this and this will be name

reference so now user can able to enter the email password and the name we don't need this forgot password here so let's remove this and this button will say

sign up like this and this will say uh already have an account then please press the login button

so for this we will need to change the sign up to login now we need to be able to move to these screens so we need to go into the

login screen and first implement the routing here as well so when we press on this button using the onpress function we need to move to the signup screen so

router. push to the sign up and let's

router. push to the sign up and let's copy this the same for the signup screen and here we will just go to to the login page let's copy this here and change

this to login like this so if we click on the login we move to login page and if we click on the sign up we move to sign up page let's see if the validation

is working on the sign up so if I click on the sign up button yes the validation is working and with this we just completed the UI for the login and the sign up

pages so this is it for this video and in the next video we will Implement authentication we're going to use soab base for authentication and then we will

move to the home section so this is it for this video see you in the next one