React Navigation v6 Best Structure

[Ahmed-Imam]

I am working on react-navigation 6 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>
  );
}