BurguerMenu.js

import React, { PureComponent, Fragment } from 'react';

import { ScrollView, TouchableOpacity, Text } from 'react-native';

import { DrawerItems, SafeAreaView, withNavigation } from 'react-navigation';

import Icon from 'react-native-vector-icons/Ionicons';

import styles from './styles';

class BurguerMenu extends PureComponent {
  render() {
    const { navigation } = this.props;
    return (
      <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
        <ScrollView style={styles.container}>
          <DrawerItems {...this.props} />
        </ScrollView>
        <TouchableOpacity
          style={styles.buttonContainer}
          onPress={() => navigation.navigate('SignIn')}
        >
          <Fragment>
            <Icon name="md-log-out" style={styles.buttonIcon} />
            <Text style={styles.buttonText}>Logout</Text>
          </Fragment>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }
}

export default withNavigation(BurguerMenu);

routes.js

import React from 'react';
import { Platform } from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';

import {
  createStackNavigator,
  createBottomTabNavigator,
  createSwitchNavigator,
  createDrawerNavigator,
  StackViewTransitionConfigs,
} from 'react-navigation';

import SignIn from 'pages/signIn';
import SignUp from 'pages/signUp';
import PasswordReset from 'pages/passwordReset';

import Detail from 'pages/detail';
import Home from 'pages/home';
import Loading from 'pages/loading';
import Options from 'pages/options';
import Settings from 'pages/settings';

import BurguerMenu from 'components/BurguerMenu';

const IOS_MODAL_ROUTES = ['Options'];

const dynamicModalTransition = (
  transitionProps, prevTransitionProps,
) => StackViewTransitionConfigs.defaultTransitionConfig(
  transitionProps,
  prevTransitionProps,
  IOS_MODAL_ROUTES.some(
    screenName => screenName === transitionProps.scene.route.routeName
      || (prevTransitionProps && screenName === prevTransitionProps.scene.route.routeName),
  ),
);

const HomeStack = createStackNavigator(
  { Detail, Home, Options },
  {
    initialRouteName: 'Home',
    transitionConfig: dynamicModalTransition,
  },
);

HomeStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  let drawerLockMode = 'unlocked';
  if (navigation.state.index > 0) drawerLockMode = 'locked-closed';

  return {
    tabBarLabel: 'Home',
    tabBarIcon: ({ tintColor }) => <Icon name="ios-home" color={tintColor} />,
    tabBarVisible,
    drawerLockMode,
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => <Icon name="md-home" color={tintColor} />,
  };
};

const SettingsStack = createStackNavigator({ Settings });

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ tintColor }) => <Icon name="ios-cog" color={tintColor} />,
  drawerLabel: 'Settings',
  drawerIcon: ({ tintColor }) => <Icon name="md-cog" color={tintColor} />,
};

const MainNavigator = Platform.select({
  ios: createBottomTabNavigator({ HomeStack, SettingsStack }),
  android: createDrawerNavigator({ HomeStack, SettingsStack }, { contentComponent: BurguerMenu }),
});

const LoginStack = createStackNavigator({ SignIn, PasswordReset });

LoginStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarLabel: 'SignIn',
    tabBarIcon: ({ tintColor }) => {
      const iconName = Platform.select({ ios: 'ios-log-in', android: 'md-log-in' });
      return <Icon name={iconName} color={tintColor} />;
    },
    tabBarVisible,
  };
};

const SignUpStack = createStackNavigator({ SignUp });

SignUpStack.navigationOptions = {
  tabBarLabel: 'SignUp',
  tabBarIcon: ({ tintColor }) => {
    const iconName = Platform.select({ ios: 'ios-log-out', android: 'md-log-out' });
    return <Icon name={iconName} color={tintColor} />;
  },
};

const AuthTabs = createBottomTabNavigator({ LoginStack, SignUpStack });

const Routes = createSwitchNavigator(
  { Loading, AuthTabs, MainNavigator },
  { initialRouteName: 'AuthTabs' },
);

export default Routes;