Hello, everyone, and welcome back.
Today, we're going to delve into a very
important component of React native, the drawer Navigator.
First things first, what is exactly drawer Navigator?
Well, it's a type of navigation component
provided by React Navigation Library that allows you to organize your
application's navigation in a more accessible and efficient manner.
You can see how it works right here on the documentation provided.
You also have a link inside the Resources
folder and you can just click on it and navigate to the same page.
Basically, the drawer Navigator provides
a slide-in menu that the user can access by swiping from left to the right edge
of the screen or by pressing the menu button.
This drawer can contain any type
of component or view, but it usually holds navigation options
such as application settings or user profiles.
It's particularly useful and helpful in applications
that have a significant number of screens or functionalities.
Instead of cluttering the screen
with buttons or tabs, you can neatly organize them
into categories and place them inside the drawer Navigator.
This provides a cleaner, more user-friendly interface.
For example, right now in our application, what we had to do to navigate
to the profile page is actually use the touchable opacity message icon.
Instead of that, what we could do is place
the profile page directly inside a menu like drawer Navigator.
Let's just install the drawer Navigator and start using it.
To do that, we're just going to follow the documentation provided here.
Make sure that you close all your Metro
bundlers and terminals and reopen a new one.
Let's just navigate to desktop and social media.
Here I'm going to clear my terminal.
Then what I'm going to do is use this command to install drawer Navigator.
After we do that, there are a couple of more steps to take.
First of all, we're going to have to install
the React Native gesture handler and React Native reanimated.
We have already installed the gesture handler, but we might not have installed
the React Native reanimated, so make sure to run this.
Let's copy it and paste it here.
Great, it's done.
We don't need to import this because we
have done this already, but we do need to install the pods.
So if you're on macOS, please do this.
If you're on Windows, don't do it.
Don't ever install pods on Windows.
I know I'm repeating it many times,
but I want you to have it as a rule in your head that you don't edit iOS
folder if you're on a Windows operating system.
Great.
Let's just do this right here if you're on macOS.
I am running on macOS, so I got to do it.
Right after we're done, we might have to add a Babel configuration.
It's not really written inside this documentation, but I do know it.
I have faced these issues myself.
Just follow me here and make sure that you do the same thing.
Let's just make sure that we find the Babel.
Config file right here inside the root of our project.
Go there and after this line,
just make sure that you use React Native Reanimated plugin here.
Otherwise you're going to face the issues.
Just make sure that this plugin is right there.
Now let's see how our pod installation went.
It went perfectly fine.
Let's clear this.
Now we are going to try to run this
application on iOS Simulator and start using the drawer Navigator.
To do that, I'm just going to use
npx react-native run-ios
if you're running on Windows operating
system, you already know that you got to run this on Android.
Just do it and come back to the video once your application runs.
Great, our application has run with no errors, which is perfect.
Now let's go to main navigation and start creating main menu navigation.
For that, we're also going to need
something like a stack, but it's going to be called a drawer.
Let's create a drawer right here and call Create drawer Navigator.
It's going to be automatically imported
for me, so make sure that you do so yourself.
Then we're going to create a new constant and let's call it main menu navigation.
Let's use it right here and let's use it right here.
Let's return a functional component and let's use drawer navigator.
Inside which we're only going to place
the screens that we want to be visible inside our sliding menu.
If there's any other screens that we would have had, we might decide not to place it
there because we don't want it to be inside our menu.
But if we want it to be there, then we have to do this.
Great. Let's make sure that we use drawer.screen right here,
and we're going to have to have the homepage right here, I think.
So let's set that up and let's use the component of home right here.
And this will enable having the home button appear right here.
In fact, if you want to see how it might
work, we can just get rid of the home from here.
I'm getting an error here saying that I failed to create a workload.
Did you forget to add reanimated Babel plugin in babel.config.js
I actually did not forget to do it.
So why don't we rerun our application using the cache deletion.
Let's go to clear this and let's do
npm start -- --reset-cache.
This would reset all of the caches and we can try to rebuild the project.
Again, I'm just going to press on I
for I-O-S and it's going to try to open the application.
Let's see if we're going to face the same issue or not.
Great.
It doesn't seem like we have the same issue.
Let's just continue with this setup
and see if we're going to face any issues going forward.
Now that we have our drawer and our
home screen, what we were going to do is actually delete this one from here.
Now you see that our default page went
to profile page directly because this is not available here.
To make it available there, we just delete it home from our text screen.
What we can do is instead use a new text
screen and say that the name is going to be
drawer and for the component we can use the main menu navigation that we just
created and it's going to have access to all of the items defined here as well.
Let's save this and we can just reload the application.
Great.
Now what you're going to see actually is the label of the homepage again.
This icon is going to appear and it's
going to be caused by the drawer Navigator.
And if you're going to press on it, you're going to see home appear here.
You can also slide from left to right and you're going to see it.
But the thing is that for our application, we don't have this in our design.
Therefore, we're going to have to copy these items and place it right here as
well so that we don't see this header that goes against our design.
Let's save this and you're not going to be able to see it anymore.
But if you were to slide from left
to right, you still are going to be able to access this menu.
Now what we want to do is also do the same for the profile page.
Let's just copy this and paste it here.
We don't need that anymore over there.
Let's make sure that this is called Drawer instead.
Let's save this. Now what you're going to see happen is
that profile page is available here as well.
If I were to press on it, you would actually go to the profile page.
Now, Go Back button will also work just fine
and you're going to come back to the homepage.
We don't want to be navigated to the profile page from here anymore.
Let's just make sure that we don't access this anymore on our home screen.
Let's go right here and delete this on press event.
We don't need it anymore.
Once we press on this,
we shouldn't go anywhere because this definitely was not the right place
to implement going to the profile functionality.
But now we do have a right way of going to the profile page.
Now probably all of you understand
that our profile page looks hideous and it's nothing like our designs.
In the next video, we're just going to finish up this
application and make sure that our profile page looks presentable.
There are some more navigators that we're
going to explore so that you have an idea about any navigator that's really
available with the React Native Navigation package.
I will teach you the most important ones,
so stay tuned and I'll see you in the next video.
Thank you so much for watching.