title: React Native - Multiple navigators (drawer and bottom tab on same page)?
body: <p>AppNavigator.js</p>
  
  <pre><code>import React from 'react';
  import { createSwitchNavigator,createStackNavigator, createAppContainer} from 'react-navigation';
  
  import MainTabNavigator from './MainTabNavigator';
  import AuthLoadingScreen from '../screens/AuthLoadingScreen'
  import Login from '../screens/Login';
  import SideBarNavigator from './SideBarNavigator'
  
  
  export default createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen ,
      App: MainTabNavigator,
      Auth: Login,
    },
    {
      initialRouteName: 'AuthLoading',
    }
  );
  </code></pre>
  
  <p>MainTabNavigator.js</p>
  
  <pre><code>    import React from 'react';
  import { Platform } from 'react-native';
  import { createStackNavigator,createDrawerNavigator, createBottomTabNavigator } from 'react-navigation';
  
  import TabBarIcon from '../components/TabBarIcon';
  import HomeScreen from '../screens/HomeScreen';
  import LinksScreen from '../screens/LinksScreen';
  import SettingsScreen from '../screens/SettingsScreen';
  import SideBarNavigator from './SideBarNavigator';
  
  const HomeStack = createStackNavigator({
    Home: HomeScreen,
  });
  
  HomeStack.navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;TabBarIcon
        focused={focused}
        name={
          Platform.OS === 'ios'
            ? `ios-information-circle${focused ? '' : '-outline'}`
            : 'md-information-circle'
        }
      /&gt;
    ),
  };
  
  const LinksStack = createStackNavigator({
    Links: LinksScreen,
  });
  
  LinksStack.navigationOptions = {
    tabBarLabel: 'Links',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;TabBarIcon
        focused={focused}
        name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
      /&gt;
    ),
  };
  
  const SettingsStack = createStackNavigator({
    Settings: SettingsScreen,
  });
  
  
  SettingsStack.navigationOptions = {
    tabBarLabel: 'Settings',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;TabBarIcon
        focused={focused}
        name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
      /&gt;
    ),
  };
  
  
  
  export default createBottomTabNavigator({
    HomeStack,
    LinksStack,
    SettingsStack,
  }
  </code></pre>
  
  <p>);</p>
  
  <p>SideBarNavigator.js</p>
  
  <pre><code>import React from 'react';
  import { Platform } from 'react-native';
  import { createStackNavigator,createDrawerNavigator, createBottomTabNavigator } from 'react-navigation';
  
  import TabBarIcon from '../components/TabBarIcon';
  import HomeScreen from '../screens/HomeScreen';
  import LinksScreen from '../screens/LinksScreen';
  import SettingsScreen from '../screens/SettingsScreen';
  
  const HomeStacks = createStackNavigator({
    Home: HomeScreen,
  });
  
  HomeStacks.navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;TabBarIcon
        focused={focused}
        name={
          Platform.OS === 'ios'
            ? `ios-information-circle${focused ? '' : '-outline'}`
            : 'md-information-circle'
        }
      /&gt;
    ),
  };
  
  const LinksStacks = createStackNavigator({
    Links: LinksScreen,
  });
  
  LinksStacks.navigationOptions = {
    tabBarLabel: 'Links',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;TabBarIcon
        focused={focused}
        name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
      /&gt;
    ),
  };
  
  const SettingsStacks = createStackNavigator({
    Settings: SettingsScreen,
  });
  
  
  SettingsStacks.navigationOptions = {
    tabBarLabel: 'Settings',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;TabBarIcon
        focused={focused}
        name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
      /&gt;
    ),
  };
  
  
  
  export default createDrawerNavigator({
    HomeStacks,
    LinksStacks,
    SettingsStacks,
  });
  </code></pre>
  
  <p>What I want to do is have both the Drawer (SideBar.js) and the TabNav (MainNav.js) to be on the same page. </p>
  
  <p>So it would look like GoogleMaps on android, on the initial page. Where you can access both the Drawer Side Bar and the bottom three links. </p>
  
  <p>How do I achieve something like that?</p>
  
  <p>I tried to mess around with MainTabNavigator, but I can't get anything to work.</p>