Introduction to "Creating a React Native Login" course

Introduction

How to Create a React Native App Project With Expo

How to Format React Code Style with ESLint and Prettier

How to Add Material Design to React Native With Paper

Add React Native and Expo App Navigation with react-navigation

How to Create a Stack Navigator With react-navigation

How to Transition Between Screens in React Native Navigation

Navigation

How to Add the First Screen to a React Native App

How to Create a React Native Login Screen

Creating register & reset password screens

Create a React Native Password Reset and Registration Form

Basic Screens

How to Add Firebase to a React Native App

Add Authorization Methods to a React Native App

How to Add a React Native Splash Screen

How to Add Google Sign In to a React Native App

Authorization

Add Bottom Nagivation to React Native With bottom-tabs

Add Drawer Navigation to a React Native App

Advanced Screens

This course will teach you how to create from scratch a simple login application using React Native.

You will get a step-by-step demonstration of solving some of the most common problems we encounter when building an application, including:

* project setup
* screen navigation
* user authorization
* state management

This course is perfect for beginners in mobile applications programming, and those who want to improve their React Native skills.

I came up with the idea for this course because React Native is the most popular cross-platform framework (according to JetBrains’ The State of Developer Ecosystem 2020, 42% of developers use it for their mobile apps). The popularity comes from the fact that developers still write with React code, but it’s shared across iOS and Android.

This course contains all the knowledge you need to create production-ready applications that can be released to the App Store and Google Play. I'll be introducing many tools that are commonly used when it comes to React Native applications, and that knowledge may come in handy in other projects as well.

This is how final product of this course looks like:

![start](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/start.png)
![login](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/login.png)
![register](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/register.png)
![forgot](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/forgot-password.png)
![home](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/home.png)
![drawer](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/drawer.png)
![profile](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/profile.png)

I hope to see you in the course!

_Happy Coding 🚀_

In this course we are going to create from scratch a simple login application using React Native.

Creating a React Native Login

Importance of setting up development environment.

How to use design system (react-native-paper).

How to implement authorization with Firebase.

How to add bottom navigation and drawer menu.

In this lesson we are going to add bottom navigation to our app.

We are going to display it right after the user logs into our app. Currently we display the 

 with text inside it, and a logout button. Let's change that.

Our goal is to create two screens. One will be called 

 and will be responsible for displaying the app's content, and the second one is 

, and 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 

 library and luckily for us they provide the 

 module that can create bottom navigation for us.

---
title: Add Bottom Nagivation to React Native With bottom-tabs
description: Adding bottom navigation
privateVideoUrl: https://fullstack.wistia.com/medias/hrczjqhd0s
---

# Adding bottom navigation

In this lesson we are going to add bottom navigation to our app.

_It looks like this:_

![](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_05/lesson_05.01_Adding_Bottom_Navigation/public/bottom.png)

We are going to display it right after the user logs into our app. Currently we display the `HomeScreen` with text inside it, and a logout 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 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-tabs` module that can create bottom navigation for us.

Tony Przybył

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

Currently, we display the home screen with text inside it and the log out

Let's change that. Our goal is to create two screens. One will be called home

responsible for displaying the app's content and the second one is profile. And

can manage their accounts. When it comes to bottom navigation, there are many

well. But we are already using React Navigation Library and luckily for us,

React Navigation Bottom Taps module that can create bottom navigation for us.

the official documentation that guides us step by step through the process. The

adding a new dependency. We do that by running following comment. After

we can start the implementation. We start coding from the address file where

implemented. In the API definition section, we have a really nice code snippet

It contains everything we need. In our case, the trick is to replace home

navigation that contains two screens. Let's import Create Bottom Tab Navigator

Bottom Taps and define our tab navigator. Now, we create a bottom navigation

act as our new screen. We change screen names to home and profile. For now, we

screen component for both of them. Now, we replace the home screen component

and we run our app. We can see our bottom navigation, but currently, there are

So, it might not look so good for our users. We change that by using the option

we define tabbar icon property. I prepared two icons that we can use here. Let

and run our app. Currently, we are displaying the same screen for both tabs. To

we need to create two separate screens. We already have home screen ready, so

screen. We can copy the code from home screen and change a few things. Let's

button in profile screen and remove it from home screen, because usually this

Now, we replace home screen with profile screen on our second tab.

The final bottom navigation looks like this. We can now easily navigate between

In this lesson, we manage to add bottom navigation to our app, along with

handle logout action from now on. In the next lesson, we are going to add a

will slide from the left side of the app. Thank you and see you in the next