How to use 2 material top tap navigators on one screen in React Native?

Question

I'm trying to add 2 material-top-tab-navigator on one screen in my experiments. See an example on Snack at the end of this link by docs: https://reactnavigation.org/docs/material-top-tab-navigator/

Here is my result:

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

function FeedScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed!</Text>
    </View>
  );
}

function NotificationsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Notifications!</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile!</Text>
    </View>
  );
}

const Tab = createMaterialTopTabNavigator();
const Tab1 = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { backgroundColor: 'powderblue' },
      }}
    >
      <Tab.Screen
        name="Feed"
        component={FeedScreen}
        options={{ tabBarLabel: 'Home' }}
      />
      <Tab.Screen
        name="Notifications"
        component={NotificationsScreen}
        options={{ tabBarLabel: 'Updates' }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{ tabBarLabel: 'Profile' }}
      />
    </Tab.Navigator>
  );
}

function MyTabs1() {
  return (
    <Tab1.Navigator
      initialRouteName="Feed1"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { backgroundColor: 'powderblue' },
      }}
    >
      <Tab1.Screen
        name="Feed1"
        component={FeedScreen}
        options={{ tabBarLabel: 'Home1' }}
      />
      <Tab1.Screen
        name="Notifications1"
        component={NotificationsScreen}
        options={{ tabBarLabel: 'Updates1' }}
      />
      <Tab1.Screen
        name="Profile1"
        component={ProfileScreen}
        options={{ tabBarLabel: 'Profile1' }}
      />
    </Tab1.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
      <MyTabs1 />
    </NavigationContainer>
  );
}

How can I fix that and use more then one material top tap navigators inside one component or screen?

getting the 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. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting

But expect be able render 2 tabs inside 1 screen correctly. How can i do that?

Answer 1

According to React Navigation documents, 1 <NavigationContainer> should only contains 1 Navigator (Stack / Tab / Drawer).

So if you need to use multiple navigators, you may need to put that within main navigator.

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

function FeedScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed!</Text>
    </View>
  );
}

function NotificationsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Notifications!</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile!</Text>
    </View>
  );
}

const Tab = createMaterialTopTabNavigator();
const Tab1 = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="NestedTab"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { backgroundColor: 'powderblue' },
      }}
    >
      <Tab.Screen
        name="NestedTab"
        component={MyTabs1} //Put your another tab here
        options={{ tabBarLabel: 'Home' }}
      />
      <Tab.Screen
        name="Notifications"
        component={NotificationsScreen}
        options={{ tabBarLabel: 'Updates' }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{ tabBarLabel: 'Profile' }}
      />
    </Tab.Navigator>
  );
}

function MyTabs1() {
  return (
    <Tab1.Navigator
      initialRouteName="Feed1"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { backgroundColor: 'powderblue' },
      }}
    >
      <Tab1.Screen
        name="Feed1"
        component={FeedScreen}
        options={{ tabBarLabel: 'Home1' }}
      />
      <Tab1.Screen
        name="Notifications1"
        component={NotificationsScreen}
        options={{ tabBarLabel: 'Updates1' }}
      />
      <Tab1.Screen
        name="Profile1"
        component={ProfileScreen}
        options={{ tabBarLabel: 'Profile1' }}
      />
    </Tab1.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}