Question 33817 in React native Question posted in
The official React Native documentation can be found here.

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

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?

Tags:

3

Answers


  1. 0

    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>
    );
    Login or Signup to reply.
  2. 0

    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>
   )
}
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search