Drawer Nested Within TabNavigator

Question

So I am using React-native react-navigation and I was trying to setup my app to have a few flows.

The idea is to nest a drawer that I can open and close within the header of my tab navigator. Or use a tabBar top and bottom at the same time which I am not sure is possible.

Here is my Navigator.js

const RootDrawer = DrawerNavigator({
  Leaderboard: {
    screen: Leaderboard,
    navigationOptions: {
      drawerLabel: 'Leaderboard',
      drawerIcon: ({ tintColor, focused }) => (
        <Ionicons
          name={focused ? 'ios-ribbon' : 'ios-ribbon-outline'}
          size={20}
          style={{ color: tintColor }}
        />
      ),
    },
  },
  Achievements: {
    screen: Leaderboard,
    navigationOptions: {
      drawerLabel: 'Achievements',
      drawerIcon: ({ tintColor, focused }) => (
        <Ionicons
          name={focused ? 'ios-trophy' : 'ios-trophy-outline'}
          size={20}
          style={{ color: tintColor }}
        />
      ),
    },
  }
});

// this was if i was going to use top and bottom tabs for experimentation
const TopTabs = TabNavigator(
  {
    Home: { 
      screen: Landing,
      navigationOptions: {
        title: 'Test',
      }
    },
    Settings: { 
      screen: RootDrawer,
      navigationOptions: ({ navigation }) => ({
        headerLeft : <MenuButton navigation={navigation} />
        // headerLeft : <MenuButton navigate={navigation.navigate} />
      })
    },
  },
  {
    navigationOptions: ({ navigation }) => ({
      headerTitleStyle: {
        alignSelf: 'center',
        textAlign: 'center',
      },
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch(routeName) {
          case 'Home':
            iconName = 'home';
            break;
          case 'Profile':
            iconName = 'account';
            break;
          case 'Run':
            iconName = 'run';
            break;
          case 'Settings':
            iconName = 'settings';
            break;
        }
        return <MCIcons name={iconName} size={25} color={tintColor} />;
      }
      ,
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'top',
    animationEnabled: false,
    swipeEnabled: false,
  }
);

const BottomTabs = TabNavigator({
    Home: { 
      screen: Landing,
      navigationOptions: {
        title: 'Test',
      }
    },
    Run: { 
      screen: Landing,
      navigationOptions: {
        title: 'Let\'s Run'
      } 
    },
    Profile: { screen: Profile }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch(routeName) {
          case 'Home':
            iconName = 'home';
            break;
          case 'Profile':
            iconName = 'account';
            break;
          case 'Run':
            iconName = 'run';
            break;
          case 'Settings':
            iconName = 'settings';
            break;
        }

        return <MCIcons name={iconName} size={25} color={tintColor} />;
      }
      ,
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
  }
);

// Tried to create new item here to create custom header but when I click it it just navigates to the first item in the drawer instead of open / close the drawer
const TabStack = StackNavigator({
  BottomTabs: {
    screen: BottomTabs,
    navigationOptions: ({ navigation }) => ({
      title: "Main",
      headerLeft:(
        <MenuButton navigation={navigation} />
      )
    })
  },
  Drawer: {
    screen: RootDrawer
  }  
});

export const RootNav = StackNavigator({
  WelcomePage: {
    screen: WelcomePage,
    navigationOptions: {
      header: null
    }
  },
  Login: {
    screen: LoginForm,
    navigationOptions: {
      title: 'Login'
    }   
  },
  SignUp: {
    screen: SignUpForm,
    navigationOptions: {
      title: 'Sign Up'
    }
  },
  Tabs: {
    screen: TabStack
  }
});

export default RootNav;

        export default RootNav;

Here is my MenuButton.js

imports ...

export default class MenuButton extends Component {
    press() {
        // this.props.navigate('DrawerToggle');

        // Work around for broken functionality above. Should eventually be fixed
        if (this.props.navigation.state.index === 0) {
            this.props.navigation.navigate('DrawerOpen')
        } else {
            this.props.navigation.navigate('DrawerClose')
        }
    }
    render() {
      return (
        <TouchableOpacity onPress={this.press.bind(this)}>
            <Icon name="bars" style={{color: 'black', padding: 10, marginLeft:10, fontSize: 20}}/>
        </TouchableOpacity>
      );
    }
}  

So I am looking to have the ability to be able to have a MenuButton in my header whenever I am on a screen listed under BottomTabs TabNavigation that would allow me to toggle the DrawerNavigation

Answer 1

Well you could change your MenuButtom like this:

imports .....

const MenuButton = ({ navigation }) => (

  <TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
    <Icon
      name="bars"
      style....
    />
  </TouchableOpacity>
);

export default MenuButton;

Then import this custom button in your navigator and create your bottom tabs and drawer like this:

const BottomTabs = TabNavigator({

 tabs screens.....

},
{
  tab bar options....

})

Now your Drawer:

export const Drawer = DrawerNavigator({
  Tabs: {
      screen: BottomTabs,
  }
},
{
  navigationOptions: ({navigation}) => ({
    headerLeft: <MenuButton navigation={navigation} />,
  }),
});

Now your RootNav

export const RootNav = StackNavigator({
  Dashboard : {
      screen: Drawer,
  },
});
export default RootNav;

I hope this help you, also I'm leaving you an example here:

Example drawer and tabs