Bottom Tab Navigation In React Native/ React navigation

In this blog, we will learn about Navigation and Bottom tab navigation in react native.

Before going to our topic Bottom tab navigation just take a look how navigation works in react native.

Navigation in React native:

Navigation :

As we know a website or a mobile application consist of many screens and pages. To move form one screen to another or to show other screen on button click is navigation.

For example open a login screen on login button click.

At different platform the process is different to achieve the navigation

like :

In web we use href tag.

<a href="About.html">About Us</a>

1	<a href="About.html">About Us</a>

Navigation in react native can be achieve using navigation library and navigate prop.

Let’s take an example of navigation

In this example we have two screen Home screen and About screen.
Home screen have a button on which click you will navigate to about screen.

Install the required packages in your sample project:

npm install @react-navigation/stack

npm install @react-navigation/native

npm install @react-navigation/stack

npm install @react-navigation/native

Let’s code for Home Screen.

Home.js

import React from "react";
import { Button, View, Text } from "react-native";
import React from "react";
import { Button, View, Text } from "react-native";
export default class Home extends React.Component{

render(){
return(
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>
This is Home Screen
</Text>
<Button title="Go to About"
onPress={() => this.props.navigation.navigate('about')}
/>

</View>
)
}

}

import React from "react";

import { Button, View, Text } from "react-native";

import React from "react";

import { Button, View, Text } from "react-native";

export default class Home extends React.Component{

render(){

return(

<Text>

This is Home Screen

</Text>

<Button title="Go to About"

onPress={() => this.props.navigation.navigate('about')}

</View>

)

}

Let’s code for About Screen.

About.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class Aboutscreen extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>About Screen</Text>
</View>
)
}
}

import React, { Component } from 'react';

import { View, Text } from 'react-native';

export default class Aboutscreen extends Component {

render() {

return (

<Text>About Screen</Text>

</View>

)

}

Now main part of our sample code due to which we will be able to navigate is in our App.js file.

App.js

import React from 'react';
import {
StyleSheet
} from 'react-native';
import {createAppContainer } from "react-navigation";
import { createStackNavigator } from 'react-navigation-stack';
import Home from './Home';
import About from'./About';

export default class App extends React.Component {
render() {
return <AppContainer />;

}
}
const AppNavigator = createStackNavigator({
Home:{
screen : Home
},
about:{
screen: About
}

},{
initialRouteName: "Home"
});
const AppContainer = createAppContainer(AppNavigator)
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

import React from 'react';

import {

StyleSheet

} from 'react-native';

import {createAppContainer } from "react-navigation";

import { createStackNavigator } from 'react-navigation-stack';

import Home from './Home';

import About from'./About';

export default class App extends React.Component {

render() {

return <AppContainer />;

}

const AppNavigator = createStackNavigator({

Home:{

screen : Home

about:{

screen: About

}

},{

initialRouteName: "Home"

});

const AppContainer = createAppContainer(AppNavigator)

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

});

Now Run the sample App.

Result :

So far, we have learn how navigation works in react native. Now our sample app is able to navigate from one screen to another.

So, let’s move to Bottom Tab Navigation.

Bottom Tab Navigation In React Native

Bottom tab navigation is one of most used navigation in mobile apps.

Types of Tab navigation

1. Bottom tab Navigation- In bottom tab navigation tab are aligned to bottom of the screen
2. Top tab navigation- Tabs are align to top of the screen below header or toolbar.

Let’s take an example of bottom tab bar navigation

For bottom tab bar we are reusing the above navigation example.

Install the below package in our sample.

npm install @react-navigation/bottom-tabs // for bottom tab bar
npm install --save react-native-vector-icons // for icons on bottom tab bar

1 2	npm install @react-navigation/bottom-tabs // for bottom tab bar npm install --save react-native-vector-icons // for icons on bottom tab bar

For Home screen and About screen we used same code as in navigation example. If you want to add or modify or redesign your screen you can do it accordingly.

There is little change in app.js class for bottom tab navigation.

App.js

import React from 'react';
import Home from './Home';
import About from'./About';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer} from '@react-navigation/native';
import Ionicons from 'react-native-vector-icons/Ionicons';

const sampleTabNavigation = createBottomTabNavigator(
);

export default class App extends React.Component {
render() {

return (

<NavigationContainer>
<sampleTabNavigation.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;

if (route.name === 'Home') {
iconName = 'md-home-sharp';
} else if (route.name === 'about') {
iconName = 'md-reader-outline';
}

return <Ionicons name = {iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'red',
inactiveTintColor: 'gray',
}}
>
<sampleTabNavigation.Screen name="Home" component={Home} />
<sampleTabNavigation.Screen name="about" component={About} />
</sampleTabNavigation.Navigator>
</NavigationContainer>
);
}
}

import React from 'react';

import Home from './Home';

import About from'./About';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { NavigationContainer} from '@react-navigation/native';

import Ionicons from 'react-native-vector-icons/Ionicons';

const sampleTabNavigation = createBottomTabNavigator(

);

export default class App extends React.Component {

render() {

return (

<sampleTabNavigation.Navigator

screenOptions={({ route }) => ({

tabBarIcon: ({ focused, color, size }) => {

let iconName;

if (route.name === 'Home') {

iconName = 'md-home-sharp';

} else if (route.name === 'about') {

iconName = 'md-reader-outline';

}

return <Ionicons name = {iconName} size={size} color={color} />;

})}

tabBarOptions={{

activeTintColor: 'red',

inactiveTintColor: 'gray',

}}

<sampleTabNavigation.Screen name="Home" component={Home} />

<sampleTabNavigation.Screen name="about" component={About} />

</sampleTabNavigation.Navigator>

</NavigationContainer>

);

}

Now run the sample code

Result :

home screen with bottom tab — **Home screen with bottom tab**

about screen with bottom tab — **About screen with bottom tab**

Troubleshooting.

You may face some issues/errors related to gesture and surface view and view area and screen.
To resolve these errors you have to add below dependency in your project.

npm install react-native-gesture-handler 

npm install react-native-screens 

npm install react-native-safe-area-context 

npm install react-native-safe-area-view

npm install --save @react-native-masked-view/masked-view

npm install react-native-gesture-handler

npm install react-native-screens

npm install react-native-safe-area-context

npm install react-native-safe-area-view

npm install --save @react-native-masked-view/masked-view

If you want to learn more about bottom tab navigation in react native, you can visit here.

Conclusion

In this blog we have learn about navigation in react native and how we can achieve navigation through bottom tabs in react native.

Hope ! this will help you in finding what you are looking for.

Thanks for reading.

Pankaj Tyagi 26 February 2021

. . .

Bottom Tab Navigation In React Native

Navigation in React native:

Navigation :

At different platform the process is different to achieve the navigation

like :

Let’s take an example of navigation

Install the required packages in your sample project:

Let’s code for Home Screen.

Home.js

Let’s code for About Screen.

About.js

App.js

Result :

Bottom Tab Navigation In React Native

Types of Tab navigation

Install the below package in our sample.

App.js

Result :

Troubleshooting.

Conclusion

Leave a Comment Cancel Reply

Message Sent!