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

Sentiment Analysis of Restaurant Reviews

Window, Document, and Screen in Javascript

Cloning Toogl.com — First project using React.js

RxJS: Error Handling With forkJoin

A simple GraphQL Tutorial for React

Git hooks and HuskyJS

Global AJAX loader for your website

Bizcharts Axis HOW-TOs

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

How to add animations to your NativeBase App

How to write and publish a React Native package to NPM

What is React-Native-Screen-Wrapper

NativeScript vs React Native for Mobile App Development

NativeScript vs React Native