Hi, everyone, and welcome back.
In today's video, we're going to cover a very important
navigation component called the top tab bar navigation.
What exactly is it?
Here you can see a demonstration
of the tab Navigator, and it's a type of navigation component
that allows you to organize your application screen in a horizontal
swipable tab layout adhering to the material design specifications.
Now, why is it useful?
Tab navigation is incredibly handy when
you want to provide easy access to different functionalities or sections
of your application without the need to navigate to a new screen.
This not only makes navigation faster,
but also provides a more seamless experience for the user.
In this video, we're going to be using
the top tab bar navigation in a profile page, and we're going to make sure that we
can create three different tabs that are given on our design.
By the end of this video, you are going to have a solid
understanding of how to use the top tab bar navigation.
And because of the knowledge that you're going to gain in this video,
you will also be able to make the use of bottom tab Navigator whenever you want
to because they're very similar in the setup.
So once you learn one, the other one becomes super simple.
Let's just get started with this.
I have my React navigation documentation open.
The link for this documentation is also
inside the Resources folder, so you can always feel free to just click
on that resource and get the same link that I have opened here.
Great.
Now let's follow the installation guidelines for this.
I'm going to make sure that all of my terminals are terminated.
I'm going to open a completely new one
and I'm going to go to the social media application.
I'm going to copy this command and paste it here and let it run.
Once that gets done, we're not going to use any expo instructions.
We are not using expo.
We're going to go with Bear react native project set up.
What we're going to do is
install this page review.
Just copy this and paste it in your terminal and let it run.
Wait, once you're done, if you're running on macOS, make sure to install the pod.
You can just copy this command, paste it here, and let it run.
If you're on Windows, please don't run pod installation.
Since everything has been set up for us
and new pods have been installed, I just want to quit my terminal.
You should do so as well, especially if you're running on Windows machine.
Reopen your command line prompt or
the terminal and make sure to navigate to social media app.
Then I'm just going to clear my terminal and here I'm going to run it on iOS.
If you're on Windows, just run it on Android.
Let's wait for this to complete and come back to the video once you're done.
Great. The application ran successfully.
Right now you see the profile page displayed here.
If you want to navigate,
don't forget that you always have this drawer Navigator right here.
You can just click on profile to come to this page.
Right now we're going to start creating the profile tabs together.
Here's the profile page that I've opened up and what we want to do is create a new
type of Navigator and make sure that we place it right after this content.
For that, we're going to have to go
to navigation and let's go to mainnavigation.js file.
Here, let's create a new tab navigation.
For this, we're going to need to create
a new variable and let's call it profile tabs.
Then we want to create material top tab Navigator.
Let's save this. Great.
Now we can use this variable to set up our tabs.
First of all, we're going to create
a new exportable constant and we're going to call it profile tabs navigation.
Then we want to return a component here
that is going to be using the profile tabs that we set up here.
We're going to need Navigator here as well.
Inside here, we're going to place three tabs.
Let's do this. Let's place ProfileTabs.Screen here and let's call this just tab one for now.
Let's say that it's going to contain a component that we're going to design.
So far, let's put a null here and let's save this.
What we want to do is make sure that we create a component for this.
Let's just create a very simple component.
I'm just going to call it tab one and it's going to be defined right here
and we're going to replace it with the actual tabs in the next lesson.
I just want to demonstrate to you right now how this works.
Let's just return a new view component.
I'm just going to import this here.
Then let's say that we want to place a text here.
I'm just going to import it right here.
Then what we want to do is place a text here that says this is tab one.
Now we want to make sure that this is centered.
Let's create a style here and use flex one
and justify content center and align items center.
Great.
Let's just copy this and paste it two more times.
Let's make sure that we rename this to tab
two and tab three, and let's rename the text inside of here as well.
Now let's use these components right here inside the profile tabs Navigator.
Let's say that our component that we use here is going to be tab one.
Let's copy this, paste it here, and call this tab two and use tab two component.
Let's do this for tab three as well. Great.
Now we have saved this and all that's left
to do really is import this inside the profile.js file.
Right below all of the content, let's create a new
view container inside which we're going to place profile tabs navigation.
It's going to be imported for me, so make sure that it's imported for you as well.
Let's save this. Here you're going to see tab one, tab two,
and tab three appear, but we don't see this content right here.
I do doubt that it might be because of the flex.
Let's make sure that we use a global style here and we use the flex.
Now you should be able to see that this is tab one.
If you start swiping from right to left,
you're actually going to start switching from the first tab to the second tab.
You can see this animation right here
and it says here this is tab two and this is tab three.
This is how easy it is to set up top tab navigation.
In the next lesson, what we're going to be doing is making sure that these tabs look
exactly as we want it to according to our design.
Thank you so much for watching and I'll see you in the next video.