4

I am upgrading my project from react-navigation-v4 to react-navigation-v5. I need to have two top bars inside the same screen that divides the screen into two halves but by doing this I get this error:

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

I searched a lot I know I can nest them but how to use them beside together?

this is my code that is giving the error: 

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Page1 from './pages/Page1'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const TopTab = createMaterialTopTabNavigator();
const BottomTab = createMaterialTopTabNavigator();

const TopTabComponent = () => (
  <TopTab.Navigator>
    <TopTab.Screen name='1' component={Page1} />
    <TopTab.Screen name='2' component={Page1} />
  </TopTab.Navigator>
)

const BottomTabComponent = () => (
  <BottomTab.Navigator>
    <BottomTab.Screen name='3' component={Page1} />
    <BottomTab.Screen name='4' component={Page1} />
  </BottomTab.Navigator>
)


export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <TopTabComponent />
        <BottomTabComponent />
      </NavigationContainer>
    );
  }
}

any help??

houman.sanati
  • 1,054
  • 3
  • 18
  • 34

1 Answers1

5

You need to use react-native-tab-view instead of createMaterialTopTabNavigator. createMaterialTopTabNavigator by itself wraps react-native-tab-view and adds navigation logic to it (so that you can for example navigate to a screen containing tabs and then to one of the tabs). This added logic is exactly what's breaking your screen, as you are trying to render 2 navigators at the same time which is not allowed in react-navigation

Max
  • 4,473
  • 1
  • 16
  • 18