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

npm 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.

npm 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.

import android.os.Bundle;

And add below code on your MainActivity.java file.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
}

Here, my all code in MainActivity.java file

package com.reactnativeexample;
/* Add Bundle package */
import android.os.Bundle;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "ReactNativeExample";
  }

  /* Add Below code */
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
}

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.

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

const Splash = ({ navigation }) => {

    useEffect(() => {
        setTimeout(() => {
            navigation.navigate("Home")
        }, 2000);
    }, []);

    return (
        <View style={styles.center}>
            <Text>Splash Screen</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    center: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        textAlign: "center",
    },
});

export default Splash;

Home.js

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

const Home = ({ navigation }) => {
  return (
    <View style={styles.center}>
      <Text>This is the home screen</Text>
      <Button
        title="Go to About Screen"
        onPress={() => navigation.navigate("About")} // We added an onPress event which would navigate to the About screen
      />
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default Home;

Contact.js

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

const Contact = () => {
  return (
    <View style={styles.center}>
      <Text>This is the contact screen</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export default Contact;

About.js

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

const About = () => {
  return (
    <View style={styles.center}>
      <Text>This is the about screen</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
});

export 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

import React from "react";
import { Image } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "../screens/Home";
import About from "../screens/About";
import Contact from "../screens/Contact";
import Splash from "../screens/Splash";

import BottomTabNavigator from "./TabNavigator";

const Stack = createStackNavigator();

const screenOptionStyle = {
  headerStyle: {
    backgroundColor: "#9AC4F8",
  },
  headerTintColor: "white",
  headerBackTitle: "Back",
};

const HomeStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="Home" component={Home} options={{headerLeft: (props) => null }}  />
      <Stack.Screen name="About" component={About} />
    </Stack.Navigator>
  );
}

const ContactStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="Contact" component={Contact} options={{ headerLeft: (props) => null }} />
    </Stack.Navigator>
  );
}

export default MainStackNavigator = () => {

    return (
        <Stack.Navigator screenOptions={{headerShown: false}}>
          <Stack.Screen name="Splash" component={Splash} />
          <Stack.Screen name="TabNavigator" component={BottomTabNavigator} />
        </Stack.Navigator>
    );
}

export { HomeStackNavigator, ContactStackNavigator };

TabNavigator.js

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

import React from "react";
import { Image } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import { HomeStackNavigator, ContactStackNavigator } from "./StackNavigator";

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
    return (
        <Tab.Navigator screenOptions={{ headerShown: false }}>
            <Tab.Screen
                name="Home"
                component={HomeStackNavigator}
                options={{
                    tabBarIcon: () => (<Image source={require("./../assets/icons/home-outline-svg.png")} style={{width: 20, height: 20}} />)
                }}
                 />
            <Tab.Screen 
                name="Contact" 
                component={ContactStackNavigator}
                options={{
                    tabBarIcon: () => (<Image source={require("./../assets/icons/people-outline-svg.png")} style={{width: 20, height: 20}} />)
                }}
            />
        </Tab.Navigator>
    );
};

export default BottomTabNavigator;

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

App.js

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

import MainStackNavigator from "./src/navigation/StackNavigator";

 const App = () => {
  return (
    <NavigationContainer>
      <MainStackNavigator />
    </NavigationContainer>
  );
}
export 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…