drawer navigation issue

gistfile1.txt

import React from 'react';
import { createStackNavigator, createDrawerNavigator, createSwitchNavigator } from 'react-navigation';
import FingerPrintScreen from './src/components/FingerPrint';
import LoginScreen from './src/components/Login';
import DrawerContainer from './src/components/DrawerContainer';
import AuthLoadingScreen from './src/components/AuthLoading';
import DashboardScreen from './src/components/Dashboard';
import { View, Image, Button, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Expo from 'expo';
import { Entypo } from '@expo/vector-icons'



const DrawerButton = (props) => {

  console.log(props)
  return (
    <View style={{ flexDirection: 'row' }}>
      <TouchableOpacity onPress={ () => props.navigation.openDrawer()
     }>
        <Entypo name='menu' color='white' size={35} />
      </TouchableOpacity>
      <Text style={{
        fontSize: 20,
        color: 'white',
        marginTop: 5
      }}>
        Converge
        </Text>
    </View>
  );
};

const MainDrawer = createDrawerNavigator({
  Dashboard: {
    screen: DashboardScreen
  },
  HR: {
    screen: FingerPrintScreen,

  },
  // Finance: {
  //   screen: DashboardScreen,
  // },
  // Innovation: {
  //   screen: DashboardScreen,

  // },
  // Payroll: {
  //   screen: DashboardScreen,

  // },
  // OfficeManagement: {
  //   screen: DashboardScreen,

  // },
  // SystemAudit: {
  //   screen: DashboardScreen,

  // },
  // FindYourColleague: {
  //   screen: DashboardScreen,

  // },
  // ConvergeReport: {
  //   screen: DashboardScreen,

  // },
  // GroupNews: {
  //   screen: DashboardScreen,

  // },
  // CompanyReport: {
  //   screen: DashboardScreen,

  // },
  // EventsCalendar: {
  //   screen: DashboardScreen,

  // }
},

  {
    drawerPosition: 'left',
    contentComponent: DrawerContainer,
  }
);



const AuthStack = createStackNavigator({
  Login: {
    screen: LoginScreen,
    navigationOptions: {
      header: null,
    }
  }
});

const AppStack = createStackNavigator({

  MainDrawer: {
    screen: MainDrawer,
    navigationOptions: ({ navigation, navigate }) => ({
      
      headerStyle: {
        backgroundColor: '#E20A17',
      },
      headerLeft: <DrawerButton navigation={navigation} />
    })
  },
  
  FingerPrint: {
    screen: FingerPrintScreen,
    navigationOptions: {
      header: null,
    }
  }
});

const AppNavigator = createSwitchNavigator(
  {

    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);



export default class App extends React.Component {
  constructor() {
    super();

    this.state = {
      isReady: false
    }
  }

  async componentWillMount() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
    });

    this.setState({
      isReady: true
    })
  }

  render() {

    if (!this.state.isReady) {
      return <Expo.AppLoading />
    }

    return (
      <View style=
        {{ flex: 1 }} >
        <AppNavigator />
        {/* // <AppStack /> */}
      </View>
    )
  }
}