React Navigation v6 Best Structure

Question

I am working on react-navigation v6 and was wondering if the below two structures makes difference in terms of performance, especially since I am doing deeplinking to the details screen.

First Structure:

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

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
      <Tab.Screen name="Orders" component={OrderScreen} />
    </Tab.Navigator>
  );
}
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="FeedDetails" component={FeedDetails} />
        <Stack.Screen name="ProfileDetails" component={ProfileDetails} />
        <Stack.Screen name="AccountDetails" component={AccountDetails} />
        <Stack.Screen name="OrderDetails" component={OrderDetails} />  
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Second Structure:

const FeedStack = createNativeStackNavigator();
const ProfileStack = createNativeStackNavigator();
const AccountStack = createNativeStackNavigator();
const OrderStack = createNativeStackNavigator();

function FeedStackScreen() {
  return (
    <FeedStack.Navigator>
      <FeedStack.Screen name="FeedScreen" component={FeedScreen} />
      <FeedStack.Screen name="FeedDetails" component={FeedDetails} />
    </FeedStack.Navigator>
  );
}

function ProfileStackScreen() {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="ProfileScreen" component={ProfileScreen} />
      <ProfileStack.Screen name="ProfileDetails" component={ProfileDetails} />
    </ProfileStack.Navigator>
  );
}

function AccountStackScreen() {
  return (
    <AccountStack.Navigator>
      <AccountStack.Screen name="AccountScreen" component={AccountScreen} />
      <AccountStack.Screen name="AccountDetails" component={AccountDetails} />
    </AccountStack.Navigator>
  );
}

function OrderStackScreen() {
  return (
    <OrderStack.Navigator>
      <OrderStack.Screen name="OrderScreen" component={OrderScreen} />
      <OrderStack.Screen name="OrderDetails" component={OrderDetails} />
    </OrderStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Feed" component={FeedStackScreen} />
        <Tab.Screen name="Profile" component={ProfileStackScreen} />
        <Tab.Screen name="Account" component={AccountStackScreen} />
        <Tab.Screen name="Order" component={OrderStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

Both of the structures you posted are fine based on your requirements. They produce 2 different types of UIs so what's better entirely depends on what kind of UI you want.

In the first one (stack at root, tabs in the first screen), when you navigate to other screens, the tab bar is not visible on those screens. So if this is the UI you want, go with the first one.

In the second one, (tab at root, stacks nested inside each tab), when you navigate to other screens, the tab bar is still present. So if you want this behavior, go with the second one.