Double Navigation Stacks

App.js

@@ -16,9 +16,8 @@ const Tab = createMaterialBottomTabNavigator();
 
 const Stack = createNativeStackNavigator();
 
-export default function App() {
+const MainNavigation = () => {
     return (
-        <NavigationContainer>
             <Tab.Navigator initialRouteName="Home"
                 activeColor="#0d6efd"
                 inactiveColor="#FFFFFF"
@@ -39,19 +38,25 @@ export default function App() {
                         },
                     })}
                 />
-                <Tab.Screen 
-                    name="Profile" 
-                    component={Profile} 
+                
+                <Tab.Screen name="Logout" component={Login} />
+            </Tab.Navigator>
+    )
+}
+
+export default function App() {
+    return (
+        <NavigationContainer>
+            <Stack.Navigator>
+                <Stack.Screen name="Home" component={MainNavigation} options={{headerShown:false}} />
+                <Stack.Screen
+                    name="Profile"
+                    component={Profile}
                     options={{
-                        tabBarLabel: 'Profile',
-                        tabBarIcon: ({ color }) => (
-                            <MaterialIcons name="person" color={color} size={26} />
-                        ),
-                        tabBarBadge: false
+                        tabBarLabel: 'Profile'
                     }}
                 />
-                <Tab.Screen name="Logou" component={Login} />
-            </Tab.Navigator>
+            </Stack.Navigator>
         </NavigationContainer>
     );
 }