Mixing both Stack navigation and tab navigation in react native - react-native

Question

I'm trying to mix stack navigation and tab navigation i have 14 Screens:
Search,
Home,
CartTab,
SideBar,
Details,
PriceComparison,
ShopByCategory,
ShopByStore,
CategoryPage,
CategoryFilter,
Checkout,
Login,
Register,
ForgotPassword
I want to have Search, Home, CartTab, Sidebar as bottom navigation and the other pages as stack navigation, with SearchBy pages, Details, Price Comparison not displaying the bottom tab. I'm new to react native and i have been trying diffrent solutions however 1) i'm not able to remove the bottomtab from the wanted screens and 2) using navigation.navigate is returning me errores example using navigation.navigate('Category'); i get an error The action 'NAVIGATE' with payload {"name":"Category"} was not handled by any navigator. Do you have a screen named 'Category'?
This is my code :
StackNavigator.js:
import React from 'react'
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import {
CartTab,
Details,
Home,
Notification,
PriceComparison,
Search,
SplashScreen,
ShopByCategory,
ShopByStore,
CategoryPage,
Checkout,
CategoryFilter,
Login,
Register,
ForgotPassword
} from '../screens';
import { SideBar } from './../components';
export const MainStackNavigator = () => {
const Stack = createStackNavigator();
return (
<Stack.Navigator screenOptions={{headerShown: false}} initialRouteName={'Home'}>
{/*<Stack.Screen name="SplashScreen" component={SplashScreen} /> */}
<Stack.Screen name="Login" component={Login} options={{ tabBarVisible: false }} />
<Stack.Screen name="Register" component={Register} options={{ tabBarVisible: false }} />
<Stack.Screen name="Recovery" component={ForgotPassword} options={{ tabBarVisible: false }} />
<Stack.Screen name="Home" component={Home} options={{ tabBarVisible: false }} />
<Stack.Screen name="Notification" component={Notification} />
<Stack.Screen name="Comparison" component={PriceComparison} options={{ tabBarVisible: false }} />
<Stack.Screen name="ShopByCategory" component={ShopByCategory}/>
<Stack.Screen name="ShopByStore" component={ShopByStore}/>
{/*<Stack.Screen name="Category" component={CategoryPage}/>
<Stack.Screen name="CategoryFilter" component={CategoryFilter}/>*/}
</Stack.Navigator>
);
}
export const CartStackNavigator = () => {
const Stack = createStackNavigator();
return (
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Cart" component={CartTab} />
<Stack.Screen name="Checkout" component={Checkout}/>
</Stack.Navigator>
);
}
export const SearchStackNavigator = () => {
const Stack = createStackNavigator();
return (
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Search" component={Search} />
<Stack.Screen name="Details" component={Details}/>
</Stack.Navigator>
);
}
export const SidebarStackNavigator = () => {
const Stack = createStackNavigator();
return (
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="Sidebar" component={SideBar} />
<Stack.Screen name="ShopByCategory" component={ShopByCategory}/>
<Stack.Screen name="ShopByStore" component={ShopByStore}/>
<Stack.Screen name="Category" component={CategoryPage}/>
</Stack.Navigator>
);
}
TabNavigation.js:
import 'react-native-gesture-handler';
import React from 'react';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {COLORS} from '../constants';
import { CartStackNavigator, MainStackNavigator, SearchStackNavigator, SidebarStackNavigator }
from '../navigation/StackNavigator';
import { useStateContext } from '../context/StateContext';
const Tab = createBottomTabNavigator();
export const TabNavigation = ({navigation}) => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'home'
: 'home-outline';
} else if (route.name === 'Cart') {
iconName = focused ? 'cart' : 'cart-outline';
} else if (route.name === 'Search') {
iconName = focused ? 'search' : 'search-outline';
} else if (route.name === 'SideBar') {
iconName = focused ? 'grid' : 'grid-outline';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: COLORS.primary,
tabBarInactiveTintColor: 'gray',
})}
>
<Tab.Screen name="Home" component={MainStackNavigator} />
<Tab.Screen name="Search" component={SearchStackNavigator} />
<Tab.Screen name="Cart" component={CartStackNavigator} options={{ tabBarBadge: 3, tabBarBadgeStyle: { backgroundColor: COLORS.primary, marginTop: -5 } }}/>
<Tab.Screen name="SideBar" component={SidebarStackNavigator} />
</Tab.Navigator>
);
};
App.js:
import React from "react";
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import CustomDrawer from './navigation/CustomDrawer'
import {StateContext} from './context/StateContext'
import { Home, CartTab, Search, SideBar, SplashScreen, Notification, Login, Register,
ForgotPassword } from "./screens";
import { Header, TabNavigation } from "./components";
import { StripeProvider } from '#stripe/stripe-react-native';
const Stack = createStackNavigator();
const App = () => {
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {
setTimeout(() => {
setIsLoading(false);
}, 3000);
}, []);
if (isLoading) {
return <SplashScreen />;
}
return (
<StateContext>
<NavigationContainer>
<TabNavigation/>
</NavigationContainer>
</StateContext>
);
}
export default App

Answer 1

Make two different Stacks file one is StackNavigation and other is BottomNavigation . Render your Stack Navigation and with calling the component of TabNavigation
I used the Dummy names of screens . Replace it according to your screen names
Stack navigation
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import {
CartTab,
Details,
Home,
} from '../screens';
import {TabNavigation } from '../navigation/StackNavigator';
export const StackNavigator = () => {
const Stack = createStackNavigator();
return (
<Stack.Navigator screenOptions={{headerShown: false}}
initialRouteName={'Home'}>
<Stack.Screen name="Home" component={TabNavigation}/>
<Stack.Screen name="ShopByCategory" component={ShopByCategory}/>
<Stack.Screen name="ShopByStore" component={ShopByStore}/>
<Stack.Screen name="CategoryFilter" component={CategoryFilter}/>
</Stack.Navigator>
);
}
Bottom Tab Navigation
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
export const TabNavigation = ({navigation}) => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false}
})}>
<Tab.Screen name="Example" component={Example} />
<Tab.Screen name="Search" component={Search} />
<Tab.Screen name="SideBar" component={SideBar} />
</Tab.Navigator>
);
};