title: Combining DrawerNavigator and TabsNavigator without "nesting" in React Native
body: <p>I'm working on a react native project where I want to be able to use the <code>TabsNavigator</code> along with <code>DrawerNavigator</code> at the same time. I know that <strong>nesting</strong> navigators accomplishes this but not exactly in the way I want. Nesting navigators will for instance only contain the <code>TabsNavigator</code> in one screen of <code>DrawerNavigator</code> or the opposite, depending on which navigator you nest inside the other. But I want the tabsNavigator and the drawerNavigator to always be visable, no matter what screen you're in.</p>
  <p>I also want the navigators to use the <strong>same screens</strong> and not create new ones with the same name. For instance, if tabsNavigator contains the screen <code>Reminders</code>, then drawerNavigator should also contain that screen. But if I'm correct when you declare <strong><code>&lt;Tabs.screen&gt;</code></strong> or <strong><code>&lt;Drawer.screen&gt;</code></strong> with the same name and the same component, this creates two separate screens even if they're using the same component.</p>
  <p>Example tabsNavigator:</p>
  <pre><code>const Tabs = createMaterialTopTabNavigator();
  const TabsNavigator = ( navigation ) =&gt; {
    return (
      &lt;Tabs.Navigator&gt;
          &lt;Tabs.Screen name=&quot;Calendar&quot; component={Calendar} /&gt;
          &lt;Tabs.Screen name=&quot;Reminders&quot; component={Reminders} /&gt; 
          &lt;Tabs.Screen name=&quot;Weather&quot; component={Weather}  /&gt;
      &lt;/Tabs.Navigator&gt;
      );
  };
  export default TabsNavigator;
  </code></pre>
  <p>Example drawerNavigator:</p>
  <pre><code>const Drawer = createDrawerNavigator();
  function DrawerNavigator() {
    return (
      &lt;Drawer.Navigator&gt;
          &lt;Drawer.Screen name=&quot;Calendar&quot; component={Calendar} /&gt;
          &lt;Drawer.Screen name=&quot;Reminders&quot; component={Reminders} /&gt; 
          &lt;Drawer.Screen name=&quot;Weather&quot; component={Weather}  /&gt;
      &lt;/Drawer.Navigator&gt;
    );
  }
  
  export default DrawerNavigator 
  </code></pre>
  <p>and now in app.js I would like to do:</p>
  <pre><code>export default function App() {
    return (
      &lt;NavigationContainer&gt;
         &lt;TabsNavigator /&gt;
         &lt;DrawerNavigator /&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  
  </code></pre>
  <p>But above code will return the following error:</p>
  <blockquote>
  <p>Error: Another navigator is already registered for this container</p>
  </blockquote>
  <p>And that is understandable since you can't have multiple navigators inside one <code>&lt;NavigationContainer&gt;</code>, hence the use of nesting navigators inside each other, however as I mentioned nesting navigators (which I have already tried) doesn't allow the use of both navigators simultaneously for all screens. There has to be a better way to accomplish this right?</p>
  <p>Any help would be much appreciated!</p>
  <p>Source:</p>
  <p><a href="https://reactnavigation.org/docs/drawer-based-navigation/" rel="nofollow noreferrer">https://reactnavigation.org/docs/drawer-based-navigation/</a></p>
  <p><a href="https://reactnavigation.org/docs/material-top-tab-navigator/" rel="nofollow noreferrer">https://reactnavigation.org/docs/material-top-tab-navigator/</a></p>
  <p><a href="https://reactnavigation.org/docs/nesting-navigators/" rel="nofollow noreferrer">https://reactnavigation.org/docs/nesting-navigators/</a></p>
  <p>Ps.
  I noticed this is a duplicate of
  <a href="https://stackoverflow.com/questions/45144803/combine-tabnavigator-and-drawernavigator">Combine TabNavigator and Drawernavigator</a> but since that post is old and has not yet been answered, I'd like to give this another shot.</p>