React Navigation, how to make Stack Navigation inside Tab navigation in v6?

Question

I'm trying to make a Tab navigation with "homepage", "profile" & "search", and inside "home" Screen, make a stack navigation with "more details" & "wishlist". I'm currently in react-navigation v6 and I'm trying like so:

 import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createStackNavigator } from '@react-navigation/stack'; const Stack = createStackNavigator(); const Tab = createBottomTabNavigator(); const StackNavigator = () => { return ( <Stack.Navigator> <Stack.Screen name="Homepage" component={Homepage} /> <Stack.Screen name="MoreDetails" component={MoreDetails} /> <Stack.Screen name="WishList" component={WishList} /> </Stack.Navigator> ) } export default App(){ <NavigationContainer> <Tab.Navigator> <Tab.Screen name="Search" component={Search} /> <Tab.Screen name="Homepage" component={StackNavigator} /> <Tab.Screen name="Profile" component={Profile} /> </Tab.Navigator> </NavigationContainer> }

So When you click on "homepage", you have a button to go to "moreDetails" and on this page you have a button to go to "wishlist".

What Am I doing wrong? According to docs, it seems to be like that. Your help would be awesome !

Answer 1

All good, sorry for asking.. In v6 it's not npm i @react-navigation/stack but npm i @react-navigation/native-stack and import { createNativeStackNavigator } it's working now. Hope it can help someone later.

Answer 2

maybe is because you forget to import the screens