Build CompleteAuthentication with Bottom bar navigation in React Native

In this article we will learn about the authentication system in React Native. We will cover all major types of navigation.

1. Stack Navigation
2. Bottom Bar Navigation
3. Switch Navigation

In this , there will auth screens that will be of login for now, you can add other auth screens accordingly in auth stack. After successfully login there will be screens with bottom bar.

Let’s get Started.

1. Create new Project
npx react-native init projectName

2. Install these libraries
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

3. Install Stack Navigation and Bottom Bar Navigation
npm i react-navigation-stack
npm i react-navigation-tabs
npm i react-navigation

Create two folder in your project root directory.
1. Screens (We will add all screens in this folder for now, you can make sub-folder for auth, home etc screens)
2. Navigation

Lets say, in auth stack there will be one file name Login.js. You can add other files too like Signup, Reset Password etc in this stack. Don’t Confuse with Stack word, you will know what it is.

After login , there will be two screen i.e Home.js and Profile.js as Bottom Bar.

I am assuming , you already know how to make inputs, buttons etc, so i am not doing code for Login screen here.

  • Lets put all screens in Screens folder. We have to import them in navigation folder.

Lets do code.

In navigation folder, make a new file called AuthNavigation.js . In this file we will import our login file and will add in a stack. For now you can say stack is memory which will put our screens in it and help us to navigate between them.

Code for AuthNavigation file.

import {createStackNavigator} from 'react-navigation-stack';import Login from '../Screens/Login';// You can import other auth files like thisconst AuthNavigation = createStackNavigator({Login: {screen: Login},},{initialRouteName: 'Login',
//Here put the name of the screen which you want to display first.
headerMode: 'none',},);export default AuthNavigation; //Export this

Code for HomeNavigation.

import React, {Component} from 'react';import {createBottomTabNavigator} from 'react-navigation-tabs';import {View} from 'react-native';import HomeScreen from '../Screens/Home';import ProfileScreen from '../Screens/Profile';import Icon from 'react-native-vector-icons/FontAwesome';const HomeNavigation = createBottomTabNavigator({UserHome: { screen: HomeScreen,navigationOptions:{tabBarIcon: ({ tintColor }) => (<View><Icon style={[{color: tintColor}]} size={25} name={'home'}/></View>),activeColor: '#33909F',inactiveColor: '#f65a22',barStyle: { backgroundColor: '#f69b31' },}},UserProfile: { screen: ProfileScreen,navigationOptions:{tabBarIcon: ({ tintColor }) => (<View><Icon style={[{color: tintColor}]} size={25} name={'user'} solid/></View>),}}},{  tabBarOptions: {backgroundColor: 'black',showLabel: false,inactiveBackgroundColor: 'black',activeBackgroundColor: 'black',inactiveTintColor: '#fff',activeTintColor : '#45ada4',style:{borderTopLeftRadius:10,borderTopRightRadius:10,overflow:'hidden',backgroundColor:'#000'}},initialRouteName: "UserHome",activeColor: 'green',backgroundColor: 'black',inactiveColor: '#226557',barStyle: { backgroundColor: 'black' },},);export default HomeNavigation;

In index.js file .

import {createAppContainer, createSwitchNavigator} from 'react-navigation';import AuthNavigation from './AuthNavigation';import UserNavigation from './UserNavigation';
const SwitchNavigator = createSwitchNavigator({AuthNavigation: AuthNavigation,UserNavigation : UserNavigation,},{initialRouteName: 'AuthNavigation',},);const AppContainer = createAppContainer(SwitchNavigator);
export default AppContainer;

Import this in your App.js

Thanks Everyone.

--

--

--

Self motivated full stack developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

MEAN stack vs MERN stack

wordpress

JavaScript Events

Setting up Prettier in an Angular CLI Project

Bootstrap 5 released😯

What’s New in Angular 11?

Web Developing: React Redux a Story Of Joy & Pain

How to clear floats in CSS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jaglansumit

Jaglansumit

Self motivated full stack developer

More from Medium

A Cure to Rerendering: Redux with Containers

How Moti is the shortest way to create universal animation based on reanimated 2

How to use vector icons in React Native iOS and Android

Using REST APIs with React Native Google-Places-Autocomplete Library (requestURL)