Navigate back to the homepage

How to create stack navigation with tab navigation in react navigation?

Infinitbility
React Native, React Navigation
November 10th, 2021 · 1 min read
How to create stack navigation with tab navigation in react navigation?

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to create bottom tab navigation with in stack navigation using react navigation in react native, here we are using react navigation version 6.x.

Let start today tutorial How to create stack navigation with tab navigation in react navigation?

Here full source code of tutorial https://github.com/infinitbility/react-navigation-stack-and-tab-example/tree/master


Installation

Now, we have to install required react navigation packages, as well as our stack and tab mavigation.

In your project directory, run the command below on your terminal

1npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs

These dependencies below are the dependency relied upon for gestures, animations, and transitions. Also, run the command below on your terminal to install the dependencies.

1npm install react-native-screens react-native-safe-area-context @react-native-masked-view/masked-view

react-native-screens package requires one additional configuration step to properly work on Android devices. Edit MainActivity.java file which is located in android/app/src/main/java/<your package name>/MainActivity.java.

import android.os.Bundle add top on file.

1import android.os.Bundle;

And add below code on your MainActivity.java file.

1@Override
2protected void onCreate(Bundle savedInstanceState) {
3 super.onCreate(null);
4}

Here, my all code in MainActivity.java file

1package com.reactnativeexample;
2/* Add Bundle package */
3import android.os.Bundle;
4import com.facebook.react.ReactActivity;
5
6public class MainActivity extends ReactActivity {
7
8 /**
9 * Returns the name of the main component registered from JavaScript. This is used to schedule
10 * rendering of the component.
11 */
12 @Override
13 protected String getMainComponentName() {
14 return "ReactNativeExample";
15 }
16
17 /* Add Below code */
18 @Override
19 protected void onCreate(Bundle savedInstanceState) {
20 super.onCreate(null);
21 }
22}

Screens setup

In this react navigation example, we will create 4 screens, Splash, Home, About, and Contact screen.

let first create src folder and src->screens folder.

now add all 4 screen code bellow.

Splash.js

Splash screen should show only 2 seconds and it will auto redirect in home screen.

1import React, { useEffect } from "react";
2import { View, Button, Text, StyleSheet } from "react-native";
3
4const Splash = ({ navigation }) => {
5
6 useEffect(() => {
7 setTimeout(() => {
8 navigation.navigate("Home")
9 }, 2000);
10 }, []);
11
12 return (
13 <View style={styles.center}>
14 <Text>Splash Screen</Text>
15 </View>
16 );
17};
18
19const styles = StyleSheet.create({
20 center: {
21 flex: 1,
22 justifyContent: "center",
23 alignItems: "center",
24 textAlign: "center",
25 },
26});
27
28export default Splash;

Home.js

1import React from "react";
2import { View, Button, Text, StyleSheet } from "react-native";
3
4const Home = ({ navigation }) => {
5 return (
6 <View style={styles.center}>
7 <Text>This is the home screen</Text>
8 <Button
9 title="Go to About Screen"
10 onPress={() => navigation.navigate("About")} // We added an onPress event which would navigate to the About screen
11 />
12 </View>
13 );
14};
15
16const styles = StyleSheet.create({
17 center: {
18 flex: 1,
19 justifyContent: "center",
20 alignItems: "center",
21 textAlign: "center",
22 },
23});
24
25export default Home;

Contact.js

1import React from "react";
2import { View, StyleSheet, Text } from "react-native";
3
4const Contact = () => {
5 return (
6 <View style={styles.center}>
7 <Text>This is the contact screen</Text>
8 </View>
9 );
10};
11
12const styles = StyleSheet.create({
13 center: {
14 flex: 1,
15 justifyContent: "center",
16 alignItems: "center",
17 textAlign: "center",
18 },
19});
20
21export default Contact;

About.js

1import React from "react";
2import { View, StyleSheet, Text } from "react-native";
3
4const About = () => {
5 return (
6 <View style={styles.center}>
7 <Text>This is the about screen</Text>
8 </View>
9 );
10};
11
12const styles = StyleSheet.create({
13 center: {
14 flex: 1,
15 justifyContent: "center",
16 alignItems: "center",
17 textAlign: "center",
18 },
19});
20
21export default About;

In navigation setup, we will use bottom tab and stack navigation.

Our Main navigator will stack navigation and we will add bottom navigation in stack navigation, and also create group stack navigation and will add on bottom navigation.

Let’s create main navigator and group stack navigator.

first create one more folder navigation where we will add our all navigator.

StackNavigator.js

path - src/navigation/StackNavigator.js

1import React from "react";
2import { Image } from "react-native";
3import { createStackNavigator } from "@react-navigation/stack";
4
5import Home from "../screens/Home";
6import About from "../screens/About";
7import Contact from "../screens/Contact";
8import Splash from "../screens/Splash";
9
10import BottomTabNavigator from "./TabNavigator";
11
12const Stack = createStackNavigator();
13
14const screenOptionStyle = {
15 headerStyle: {
16 backgroundColor: "#9AC4F8",
17 },
18 headerTintColor: "white",
19 headerBackTitle: "Back",
20};
21
22const HomeStackNavigator = () => {
23 return (
24 <Stack.Navigator screenOptions={screenOptionStyle}>
25 <Stack.Screen name="Home" component={Home} options={{headerLeft: (props) => null }} />
26 <Stack.Screen name="About" component={About} />
27 </Stack.Navigator>
28 );
29}
30
31const ContactStackNavigator = () => {
32 return (
33 <Stack.Navigator screenOptions={screenOptionStyle}>
34 <Stack.Screen name="Contact" component={Contact} options={{ headerLeft: (props) => null }} />
35 </Stack.Navigator>
36 );
37}
38
39export default MainStackNavigator = () => {
40
41 return (
42 <Stack.Navigator screenOptions={{headerShown: false}}>
43 <Stack.Screen name="Splash" component={Splash} />
44 <Stack.Screen name="TabNavigator" component={BottomTabNavigator} />
45 </Stack.Navigator>
46 );
47}
48
49export { HomeStackNavigator, ContactStackNavigator };

TabNavigator.js

In TabNavigator.js we will use group of stack navigation of HomeStackNavigator and ContactStackNavigator.

1import React from "react";
2import { Image } from "react-native";
3import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
4
5import { HomeStackNavigator, ContactStackNavigator } from "./StackNavigator";
6
7const Tab = createBottomTabNavigator();
8
9const BottomTabNavigator = () => {
10 return (
11 <Tab.Navigator screenOptions={{ headerShown: false }}>
12 <Tab.Screen
13 name="Home"
14 component={HomeStackNavigator}
15 options={{
16 tabBarIcon: () => (<Image source={require("./../assets/icons/home-outline-svg.png")} style={{width: 20, height: 20}} />)
17 }}
18 />
19 <Tab.Screen
20 name="Contact"
21 component={ContactStackNavigator}
22 options={{
23 tabBarIcon: () => (<Image source={require("./../assets/icons/people-outline-svg.png")} style={{width: 20, height: 20}} />)
24 }}
25 />
26 </Tab.Navigator>
27 );
28};
29
30export default BottomTabNavigator;

Now we have to add only our main navigator on App.js file.

App.js

1import React from "react";
2import { NavigationContainer } from "@react-navigation/native";
3
4import MainStackNavigator from "./src/navigation/StackNavigator";
5
6 const App = () => {
7 return (
8 <NavigationContainer>
9 <MainStackNavigator />
10 </NavigationContainer>
11 );
12}
13export default App;

Now, time to check outout…

Output

splash, screen, Example
home, screen, Example
about, screen, Example
contact, screen, Example
Splash Screen Home Screen About Screen Contact Screen

Thanks for reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to check empty object in typescript?

How to check empty object in typescript?

Example of check object is empty or not in typescript

November 9th, 2021 · 1 min read
How to check a substring in a string in typescript?

How to check a substring in a string in typescript?

Example of check array is empty or not in typescript

November 8th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]