How to render 2 Tab Navigators in the same screen

Question

I'm developing an app which requires a complex homepage, in it I need to render some tab navigators (https://reactnavigation.org/docs/material-top-tab-navigator/), in some cases I need to render 2 of these back to back when I render them I get this 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. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.

How can I have 2 top tab navigators in the same screen?

Here is a basic diagram on how the page should look

Any help would be appreciated Thanks

Can you draw a diagram of how a screen would look like with two top tab navigators? — Fanchen Bao, Jan 07 '23 at 08:00
@FanchenBao I updated the question with a basic wireframe of the page — Rohan Rajesh, Jan 07 '23 at 09:41
I am fairly certain that you are not allowed to render 2 navigators at the same time in react navigation. I have had a play about with it and am unable to get it to work, I can only render a top tabs within a tab - I think the only viable option would be to create a CustomTabs component and use a third party package such as. https://www.npmjs.com/package/react-native-tab-view — iamgraeme, Jan 07 '23 at 22:56

Fanchen Bao · Accepted Answer · 2023-01-08T06:52:33.627

Here is one solution. Need to use react-native-tab-view. Most likely impossible in react-navigation. For reference, see this.

See the demo and sample code below

import * as React from 'react';
import {View, useWindowDimensions, Text} from 'react-native';
import {TabView, SceneMap} from 'react-native-tab-view';

// Scenes
const FirstRoute = () => <View style={{flex: 1, backgroundColor: 'red'}} />;

const SecondRoute = () => <View style={{flex: 1, backgroundColor: 'blue'}} />;

const ThirdRoute = () => <View style={{flex: 1, backgroundColor: 'yellow'}} />;

const FourthRoute = () => <View style={{flex: 1, backgroundColor: 'green'}} />;

// Tab Views
const FirstTabView = () => {
  const layout = useWindowDimensions();

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    {key: 'first', title: 'First'},
    {key: 'second', title: 'Second'},
  ]);
  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });

  return (
    <TabView
      navigationState={{index, routes}}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{width: layout.width}}
    />
  );
};

const SecondTabView = () => {
  const layout = useWindowDimensions();

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    {key: 'third', title: 'Third'},
    {key: 'fourth', title: 'Fourth'},
  ]);
  const renderScene = SceneMap({
    third: ThirdRoute,
    fourth: FourthRoute,
  });

  return (
    <TabView
      navigationState={{index, routes}}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{width: layout.width}}
    />
  );
};

export default function TabViewExample() {
  return (
    <>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Header</Text>
      </View>
      <FirstTabView />
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Other Content</Text>
      </View>
      <SecondTabView />
    </>
  );
}

How to render 2 Tab Navigators in the same screen

1 Answers1