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?

score 2 · Accepted Answer · answered Dec 05 '22 at 07:16

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.

PaleRedDot · Answer 2 · 2022-11-30T14:52:11.463

1

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>
    );

edited Nov 30 '22 at 14:52

answered Nov 30 '22 at 11:24

PaleRedDot

368
2
6

The `Detail` won't have the tab bar at the bottom in this case though – Shamoon Dec 01 '22 at 13:42
hm... or ```{children}```? – PaleRedDot Dec 02 '22 at 05:49
ah i have good idea. declare state ```const [isDetail, setIsDetail] = useState(false)``` and ```if (isDetail) { return (...) } else { return (...) } ``` – PaleRedDot Dec 02 '22 at 05:53

score 1 · Answer 3 · answered Dec 04 '22 at 20:22

Yeah, you'll likely want to define a StackNavigator for each tab. It's a bit repetitive, but that's been a theme of my experience with RN.

You can do something like:

const HomeStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
};

const OtherStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Other" component={OtherScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
};

const DefaultTabbedNavigation = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeStackNavigator} />
      <Tab.Screen name="Other" component={OtherStackNavigator} />
    </Tab.Navigator>
   )
}

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

3 Answers3