MainNavigation.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons'; // You can also use other icon sets
import Checkout from './screens/Checkout';
import Home from "./screens/Home";
import Inventory from "./screens/Inventory";
import ProductInfo from "./screens/ProductInfo";
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import InventoryUpdate from "./screens/InventoryUpdate";

const Tab = createBottomTabNavigator();
const Stack = new createNativeStackNavigator();

const HomeStack = () => {
    return (
        <Stack.Navigator screenOptions={{ headerShown: false }}>
            <Stack.Screen name="HomeScreen" component={Home} />
            <Stack.Screen name="ProductInfo" component={ProductInfo} />
        </Stack.Navigator>
    );
};

const MyInventoryStack = () => {
    return (
        <Stack.Navigator screenOptions={{ headerShown: false }}>
            <Stack.Screen name="InventoryScreen" component={Inventory} />
            <Stack.Screen name="InventoryUpdate" component={InventoryUpdate} />
        </Stack.Navigator>
    );
};


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

                    if (route.name === 'Home') {
                        iconName = focused ? 'home' : 'home-outline';
                    } else if (route.name === 'MyCart') {
                        iconName = focused ? 'cart' : 'cart-outline';
                    } else if (route.name === 'Inventory') {
                        iconName = focused ? 'list' : 'list-outline'; //person for user
                    }

                    return <Ionicons name={iconName} size={size} color={color} />;
                },
            })}
        tabBarOptions={{
            activeTintColor: 'black',
            inactiveTintColor: 'gray',
        }}
    >
        <Tab.Screen name="Home" component={HomeStack} />
        <Tab.Screen name="MyCart" component={Checkout} />
        <Tab.Screen name="Inventory" component={MyInventoryStack} />
    </Tab.Navigator>
);

export default MainNavigation;