Hi, and welcome back.
Today, we have a very exciting day.
We're actually going to learn how
the Stack Navigators work and how we can create multiple pages in our application.
You now see that I have my simulator running.
I did close all my terminals.
I closed my Metro Bundler and rerun the application so that I would face no
issues, especially if you're on Windows OS.
Please don't forget to do this.
Make sure everything is closed down and reopened again.
If you're already facing the issues, this might be because of the caches.
Just close all your comment prompts and rerun it again.
For Mac OS users, I don't think you're going to face any
issues, but it would be great if you still close the Metro Bundler and reopen it
again because we don't want to mess with the caches of the system.
Now everything should be running okay for you.
What we're going to get started with in this lesson is making sure that we
divide the resources in our applications into screens.
Right now you see that all this code is inside the app.js file,
but really this should be an entrance to our application and all
the code should not be just in the main file of the application.
What this means is that we have to come up with a new screen and it's going to be
a home screen and all this content is going to have to go there.
As we have the components folder for screens, we're also going to create
a new directory and we're going to call it screens.
And inside here, we're going to create
a new directory and we're going to call it home.
And as we're handling the components, we're going to handle the screens the same
way because technically they are also components.
What we're going to do is create a new file here and we're going to call it home.js.
We're also going to create a new file here, and we're going to call it style.js.
Now what we want to do is move the content from app.js into these files.
First of all, what we have to do and make
sure is that we copy this whole thing and just paste it here.
Then there are a number of things that are going to have to change.
For everything that you're using dot and slash that references our files,
they're going to have to change two dots to get out of this folder and two
more dots to get out of the other folder that it's going to be contained in.
We're getting out from home folder to the screens folder and then
from the screens folder into the main root folder here, the social media.
If I do that, then I'm not going to have
this underlined anymore because it is referenced correctly.
We got to do this for everything on this screen.
I'm just quickly going to do it, and you should do it as well.
I'm going to just copy this, and I'm going to make sure that I replace
all of these with the correct paths because we have
just copied this and we have to make sure that we're going to have no errors here.
And same in user stories here,
we actually have a bunch of image routes, so we're going to have to change these
paths as well and make sure that we use them correctly.
Actually, why don't I copy this profile
image and just replace every line given here?
I'm sorry that this is going to take some
time, but this is definitely something that we have to do, so just do this.
Now let's make sure that these profile
images are changed here as well for our post.
We're going to have to do the same with the image.
Let's make sure that this is done properly.
For default post, let's go up two folders again and let's copy this and make sure
that we replace the image route here as well.
Now we should be more or less looking fine.
I don't get any errors from my ESLint,
so I don't think we have any more paths used here that would lead to errors.
But here we just see that instead of style.js,
we are using global style from the assets folder.
We don't want to do that. We want to use the style.js.
Let's make sure that we use this style.
Js that we set up here and let's go to the assets folder here.
Let's open the styles and let's make sure that everything inside
this file is copied and pasted it right here.
Let's use style name here and make sure that we export it as style as well.
Then what we want to do is make sure that we access the fonts folder correctly.
Here what we have to do is go two folders
up and make sure that we are accessing assets.
We're going to do the same here.
I'm just going to copy this and I'm going to paste it here.
Do we have any issues?
Yeah, we're going to have to use styles folder.
Now everything should be working fine inside here as well.
We actually are not going to need
the global style anymore, so we can just delete this file completely.
Now it's telling me that it's referenced
somewhere, but it's going to be inside the app.js file, which is totally fine.
Now we're getting this error, but just don't pay attention to it.
Here inside the home, let's just make sure that we are importing it as style.
Once we do that, what we want to do is make sure that all
the references to global styles are changed to style.
Let's do this and make sure that there is
no global style reference in this file anymore.
Let me see if we're referencing global style anymore here.
Okay, great. I think all of the global styles
are deleted here and we're just using the style from style.js file right here.
That's great.
Inside the app.js file, we are referencing this global style.
But the thing is we actually don't need
any of this content anymore because everything was moved to the home screen.
Now what we have to take care of is making
sure that we use the Stack Navigator to display this home screen.
Here, let's get rid of everything that we have declared.
We don't need this.
We're just going to leave the navigation container here and delete everything else.
Let's save this and we don't need these
imports anymore and we don't need this either.
Let's try to rerun the Metro Bundler.
You should see nothing displayed.
If you're still getting the error,
just rerun the whole Metro Bundler and your application should seem empty.
And if it does not seem empty and it's going to give you some errors,
then probably what happened is that you didn't import something correctly,
your files might be a little messed up, and you are going to have a GitHub link
to the changes that we're going to be making here.
You can also always go to the Resources and make sure that all your imports are
set up correctly and you have done exactly the same changes that I have done here.
Great.
Now that we're done with doing the initial setup of the home screen,
what we actually have to worry about is setting up the Stack Navigator.
For this, we're actually going to create
a new folder again, and we're going to call it the navigation folder.
This is going to take care of all
the navigation things that we are going to be using inside this application.
The first thing that we're going to have
to do is make sure that we set up a file called routes.
Let's set that up, routes.js.
What this is going to do is hold all
of the constants for the names of the screens that we have defined.
Let's create a home constant here inside this object and call it home.
Right now, I just want to talk to you about why do we need this file?
Instead of using hard-coded string values for route names such as home, profile,
and other pages, we're going to set up these constants
because we're going to have a centralized place, a single file which defines all
of the pages that we have available in our application.
This means that if a route name needs
to be changed, it can be done right inside this string.
And if we change it,
it will be automatically changed everywhere and you are not going to have
to go to each file where you're using this route name and change it everywhere.
This is going to be great because it's
going to allow you to edit your code much easier.
And also you are going to be prone to less errors and typos when you're going to have
to type out the name of the screen if you're going to set up some navigation.
Using this constant and accessing this exportable constant and using it like
that is going to be great for you because you're going to have less bugs.
Now that we talked about this,
what we want to do is set up the main navigation system.
We're going to create a new file for that, and we're going to call it MainNavigation.js.
Basically, what this is going to do, first of all, is create the Stack Navigator.
We're going to import the Stack Navigator right here.
What we're going to do is use this function to set up our stack.
We're going to call this just Stack.
We're going to say that, Hey, create the Stack Navigator for me.
Now that we have a reference to the Stack, what we're going to do is create
a constant and we're going to call it main navigation.
Let's create a function for this and it's going to return the stack navigation.
Stack navigation is going to be set up like this, Stack Navigator.
Inside here, we're going to place all
of the pages and screens that are available in this application.
For that, what we're going to need to do is create the Stack screen.
This will take two properties that are definitely required.
You're going to see the name that's required here.
For the name, we did set up our routes exportable constant.
We can just use it here and say that the name is going to be Routes.Home.
Let's import this here.
For the component that this route or
screen should show is going to be the home screen that we have defined.
Let's make sure that that is imported for us as well.
Now let's save this and make sure that this is exportable.
Let's export the main navigation. Great.
Now let's go inside the app.js file
and inside our navigation container.
What we're going to do is place this main navigation.
We're going to use it like a component, so make sure to do so as well.
Let's save this.
Here we get an error which says that we
have a nested navigation container and I bet I know why this is.
This is because on homepage we forgot
to take away this navigation container that we put in the last video.
Let's just delete this and make sure that we only leave the safe area view here.
Let's save this and now we don't have that error anymore.
You might see that our design changed a little bit.
React Native has used this Stack Navigator
to place the home label right on top of this page.
We don't really want to do that.
This is not really in our design.
To get rid of that, what you could use is inside the Main Navigator, just open up
Screen Options and say that for header, you don't want to use anything.
Okay, your header is going to return null.
If we do this, it shouldn't be visible anymore.
But sometimes you might face some bugs with this.
Also just say that header shown is going to be set to false.
This will definitely make sure that your headers are not shown on any device.
Great. We also should set an initial route name
here so that React Native understands what should be the main page
shown to the user once they open the application and it will be Routes.Home.
Because that page is already defined
inside our Stack Navigator, it will understand which page is going to be.
Let's save this and we're not going
to face any issues when opening our application either.
Great.
Now our main navigation system is set up, but this looks a little bit weird.
It does have a gray background.
I don't know how clearly you see this.
For that, I actually do prefer to still create the global style.
Let's create a new
file here and let's create global style again and let's import
style sheet here and create a new constant and let's call it global style.
It's going to be stylesheet. Create.
Here we're going to place styles that are named in a very generic way and doesn't
necessarily need to be connected to specific screen.
What we're going to create here is something called background white.
We're going to make sure that this is setting background color to white color.
It would be six fs or you can also just say white as a word
and you can export this constant and make sure to go to home.js
and inside save area view, you can create a style and you can import
global style and use background white here.
Let's import this file again.
I did import it, but the thing here is that I just noticed that our home.js file
is still named app.
We got to make sure that this is named as home.
Let's do this. Great.
Now we do see that our application doesn't have the gray background anymore.
This is working just fine.
Let's also delete this navigation
container imports that we don't need anymore.
We have cleaned up everything and now we have organized our app.js
file, which only contains the navigation container.
Now what I want to do is just go over
the whole implementation again because this was a lot in this video and I just
want to make sure that you understand what did we do here.
How are you going to set up the navigation the next time?
We're going to have more examples of this
in the course definitely, but let's just go over this one more time.
Here we have the navigation container imported from React Native Navigation.
This will let the application know
that we're about to define some navigation for the application.
And if we go inside the main navigation
file, here we're going to see that we have set up this Stack Navigator,
which will allow us to navigate from one page to a different page.
Now, inside here,
we set up the screen options because we didn't want to see the home label here.
And inside here, we'll go all of the list
of the screens that are available for the application.
And so far we only have the home page, which is totally fine.
Now, inside the home, we set up everything that we had set up for app.js file.
We just moved the whole content here, made sure that all of the imports are
changed so that our application is working with no errors.
We also created a specific style.js
file that is only going to be used for this homepage, which is great.
We left the global style files still in our application, but we did change it.
Here, we're only going to place these tiles that are going to be
needed potentially for whole application rather than a specific page.
Great. This is what we did.
We also defined the routes constant here
that is just going to hold the unique name of each screen here.
This is going to be great for making sure that we're not making any typos when
trying to access certain pages and we don't have any unexpected behavior.
We have used this routes constant inside the main navigation and we are going
to use it in a couple of other places inside the next lessons.
That's all for today.
Thank you so much for watching and I'll see you in the next video.