0

I've created my React Native app and am using React Navigation to create a Tab Navigator which looks like this:

const MainTabs = () => {
  const Tab = createMaterialBottomTabNavigator();
  return (
    <Tab.Navigator initialRouteName="Home">
    <Tab.Screen
      name='Home'
      component={Home}
      options={{
        tabBarIcon: IconHome,
      }}
    />
    <Tab.Screen
      name='Screen 2'
      component={Screen2}
      options={{
        tabBarIcon: Icon2,
      }}
    />
  </Tab.Navigator>
)}

export default MainTabs;

Now I'd like to add a third icon, called 'More', which opens a side menu with more options when clicked. I've added the button, but I can't figure out how to add another menu - I've used createNavigatorFactory to create a menu called MoreMenu which shows on the side of the screen, but I can't get it to show at the same time as the bottom menu.

I tried to do this (just showing MoreMenu all the time; I'll add the show/hide part later):

const MainTabs = () => {
  const Tab = createMaterialBottomTabNavigator();
  return (
    <>
      <MoreMenu />
      <Tab.Navigator initialRouteName="Home">
        <Tab.Screen
          name='Home'
          component={Home}
          options={{
            tabBarIcon: IconHome,
          }}
        />
       ...
      </Tab.Navigator>
    </>
  )
}

export default MainTabs;

but when I run it I get the error:

Error: Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container.

It also gave a link to the documentation on nested navigators, but I don't think my navigators are nested - they're siblings, as far as I can see.

I'm not sure how to achieve what I want. Part of the issue is I'm not sure what's meant by 'Screen' container, so I don't know how to make sure I have separate ones.

EDIT TO ADD: MoreMenu looks like this:

const MoreMenu = () => {
      const Tab = createSideTabNavigator();
      return (
        <Tab.Navigator initialRouteName="More1">
        <Tab.Screen
          name='More 1'
          component={More1}
          options={{
            tabBarIcon: IconMore1,
          }}
        />
        <Tab.Screen
          name='More 2'
          component={More2}
          options={{
            tabBarIcon: IconMore2,
          }}
        />
      </Tab.Navigator>
    )}
    
    export default MoreMenu;
Sharon
  • 3,471
  • 13
  • 60
  • 93

1 Answers1

1

you could use <TabView> as specified in the react-native-tab-view module to embed it with the <MoreMenu> menu

return ( 
    <TabView>
        <MoreMenu />
    </TabView>
   )
}

we can also see how to define a renderScene variable that serves as a browser in the components in this way.

const renderScene = ({ route }) => {
  switch (route.key) {
    case 'Menu':
      return <MenuRoute />;
    case 'albums':
      return <TabsRoute />;
  }
};

The conclusion is that I would recommend reading this post and the example of custom tab bar

user11717481
  • 1
  • 9
  • 15
  • 25