Hi and welcome back.
Today what we're going to be doing is
building this header components here and placing it on our home screen.
And to do that, what I want to do is first off start by using our navigation
and to do that we're going to create a new directory called Navigation
and then inside it we're going to create a new file called Main Navigation JS.
And here we're going to start off by creating our navigation system.
I'm going to make this window bigger and let's start by creating our navigation.
First of all let's import create Stack Navigator from React Navigation.
And then what we want to do is create our Stack.
So I'm just going to call it Stack and I'm going to do create Stack Navigator.
Great.
And now I'm going to create another constant that is going to be called
constant main navigation and this is going to return our navigation system.
Great. So let's do stack navigator.
And inside this we want to place our
initial screen which is going to be the home screen.
And for the name we are going to be using the constants as we did last time.
And for the component we're going to be
using our home screen that we're about to build.
So first of all let's create our file Routes JS.
Let's create an exportable constants here
called Routes and the first page that we are about to create is the home page.
So let's save this and let's import this here Routes home.
Great, let's import and now we need the home screen and for that what we are
going to need to do is create a new directory called screens
and here we're going to place a new directory called home.
And inside this home we're going to create first of all home JS file that is going
to take care of all the components that we want to place on the screen.
And we also want to create the style JS file.
So let's just import style sheet inside
here and create a constant for style and use the style sheet to create
the style sheet and let's export default style.
And inside the home we want to import react from react we want to import the
styles we just created and we also want to create just a default
view maybe from native and let's create const home
that is going to return an empty view and let's export default home.
Let's save this.
Everything's looking good.
And inside here we're just going to import this home component.
Great, now that we have our navigation, we want to make an export
of this main navigation here and then we want to go back to our app
file and inside here we are going to import the main navigation and let's
delete the safe area view from here actually.
And let's just return main navigation so we don't need this here.
And inside the home we can just wrap this inside Safe Area View.
This way we're going to have more control over each page.
And let's put this view inside here.
Let's import safe area view.
And inside this view, I just create a text
called Hello World so that we can make sure that we see the home appear here.
And I'm going to need to import text.
And let's save this.
And now we are having an issue because I forgot to import navigation container
to put this inside of so let's import that and close this.
Great and now we see this appear.
Also I don't think that we're going to be going with the navigation label setup so let's
just get rid of that really quickly here we're going to need screen options
and we're going to say that our header should return null and that's it.
If you want you can also use headers shown
false and then just for the setup purposes we
are also going to create styles here I want it to be a directory actually so
styles folder and inside here I'm going to create a file called Global Style JS.
I'm going to import style sheet from React native
and I'm going to create Const style or I'm going to call it Global Style.
I'm going to use the style sheets
to create the style sheet and here we can put our global styles
and this file will serve for us anytime we want to create a style that could be
applied anywhere and it's not somehow connected to each screen or a component.
If you want a style that's connected to a component or a screen let's just
create it inside the directory for that component or a screen.
So here we have a gray background right now.
So I'm just going to create a style called background white.
And I'm going to say background color instead of white
I'm just going to give it the color for white
actually, I prefer that.
And on our home page, we can create a style and we can call
the global style background white and import the global style here.
And also I didn't really give a lot of attention to this in the last project.
But I do like and think that advanced developers should be sorting their
imports and it's a good code formatting consistency to do so that in the bigger
projects, you're able to find everything easier for your projects.
And if we want this page to take up the whole space, we could also use the flex.
So we can just create Flex style here and say Flex One,
go to our home page and assign it here as well from Global Style Flex.
Let's save this and now our project home
page is taking up the whole page which is great.
So this is mainly our setup but we did learn about scaling functions and how
important they are for us from the last project so I'm not going to go
into the Nitty gritty details of setting them up again.
If you're interested in that, please dive into the appropriate section.
It's going to be listed below this video.
But for now, I'm just going to copy that scaling file inside our styles folder.
So let's do this and copy it here.
And now I have some error because of this,
because we haven't installed the react native device info for our project.
So what I'm going to do is go to the terminal, go to the root of this
project donation app, and I'm going to install this package,
install react native device info, and I'm going to save it.
And I just want to make sure that there are no pods to install.
So I'm going do pod install again.
Actually there is. So good.
Please do this.
Definitely.
And now we should be able to use the react native device info.
I just going to resave this. Okay.
My errors coming from my editor are gone.
I don't need this terminal anymore.
I'm going to reload the app,
and it seems like I'm getting no issues, which is great.
So I'm thinking that this might be it for this video as well.
Just because I do not want to be taking up a bunch of time for every video.
So I promise we're going to get into doing
this component in the next upcoming video, and I'll meet you there.
Thanks so much for watching. See you soon.