Add Bottom Nagivation to React Native With bottom-tabs

[00:00 - 00:10] In this lesson, we are going to add bottom navigation to our app. It looks like this. We are going to display it right after the user looks into our app.

[00:11 - 00:43] Currently, we display the home screen with text inside it and the log out button. Let's change that. Our goal is to create two screens. One will be called home and will be responsible for displaying the app's content and the second one is profile. And it is where users can manage their accounts. When it comes to bottom navigation, there are many libraries that work well. But we are already using React Navigation Library and luckily for us, they provide the React Navigation Bottom Taps module that can create bottom navigation for us.

[00:44 - 01:48] We are going to follow the official documentation that guides us step by step through the process. The first step is adding a new dependency. We do that by running following comment. After installation is done, we can start the implementation. We start coding from the address file where our navigation is implemented. In the API definition section, we have a really nice code snippet that we can use. It contains everything we need. In our case, the trick is to replace home screen with bottom navigation that contains two screens. Let's import Create Bottom Tab Navigator from React Navigation Bottom Taps and define our tab navigator. Now, we create a bottom navigation component that will act as our new screen. We change screen names to home and profile. For now, we can use the home screen component for both of them. Now, we replace the home screen component with bottom navigation and we run our app. We can see our bottom navigation, but currently, there are no icons above labels.

[01:49 - 02:57] So, it might not look so good for our users. We change that by using the option props and inside it, we define tabbar icon property. I prepared two icons that we can use here. Let 's import them and run our app. Currently, we are displaying the same screen for both tabs. To change that, we need to create two separate screens. We already have home screen ready, so let's create profile screen. We can copy the code from home screen and change a few things. Let's leave the logout button in profile screen and remove it from home screen, because usually this is the right place for logout. Now, we replace home screen with profile screen on our second tab.

[02:58 - 03:26] The final bottom navigation looks like this. We can now easily navigate between screens. In this lesson, we manage to add bottom navigation to our app, along with profile screen that will handle logout action from now on. In the next lesson, we are going to add a drawer menu that will slide from the left side of the app. Thank you and see you in the next lesson.