What's the correct approach for having a list/detail view with React Native Navigation Bottom Tab?

Question

I have something like:

const Tab = createBottomTabNavigator<DefaultTabbedParamList>();


const DefaultTabbedNavigation = () => {

  return (
    <>
      <Tab.Navigator initialRouteName='Home' screenOptions={{
        unmountOnBlur: true,
      }}>
        <Tab.Screen name="Home" component={HomeScreen} options={{
          ...defaultOptions,
          tabBarIcon: ({ color, size, focused }) => (
            <Icon as={Ionicons} name={`home${focused ? `` : `-outline`}`} size={size} color={color} />
          )
        }} />
        ...
      </Tab.Navigator>
    </>
  );
}

When a user clicks to a detail view from Home (or any other tab), I want to load a detail view with the currently selected tab remaining.

What's the correct approach to handle this?

One idea I had was to have a StackNavigator in HomeScreen that includes a Detail screen. But it seems repetitive to do for every screen, no?

Answer 1

You can do something like this :-

 <Tab.Navigator initialRouteName='Home' screenOptions={{
    unmountOnBlur: true,
  }}>
    <Tab.Screen name="Home" component={HomeScreen} options={{
      ...defaultOptions,
      tabBarIcon: ({ color, size, focused }) => (
        <Icon as={Ionicons} name={`home${focused ? `` : `-outline`}`} size={size} color={color} />
      )
    }} />
    // Something like this.
    <Tab.Screen name="Home2" children={({route}) => <route?.name />} ...{otherProperties}/>
    ...
  </Tab.Navigator>

Note:- To use this kind of approch your routeName and componentName should be same.

Answer 2

How about this?

return (
        <NavigationContainer>
            <Stack.Navigator screenOptions={{ headerShown: false }}>
                <Stack.Screen name={"Tabs"} component={Tabs} />
                <Stack.Screen name={"Detail"} component={DetailScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );