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>
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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 !

CodePudding user response：

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.

CodePudding user response：

maybe is because you forget to import the screens