StackNav

import React, { Component } from 'react';
import {
  View,
  StyleSheet,
} from 'react-native';
import { StackNavigator, DrawerNavigator, withNavigation } from 'react-navigation';
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
import Root from '../pages/Root';
import Home from '../pages/Home';
import QRCodeReader from '../pages/QRCodeReader'
import Employees from '../pages/Employees';
import User from '../pages/User';
import WelcomeScreen from '../pages/WelcomeScreen';
import ScheduleStripDetails from '../pages/ScheduleStripDetails';
import RecordsMap from '../pages/RecordsMap';
import InfoNet from '../pages/InfoNet';
import About from '../pages/About';
import Help from '../pages/Help';
import PinSecurity from '../pages/PinSecurity';
import DrawerContainer from './DrawerContainer';
import DrawerButton from './DrawerButton';
import UserBackButton from './UserBackButton';
import strings from '../pages/Language';
import funcs from '../pages/functions';

let userElevation = 0;
let initialScreen = 'Home';

const StackNav = StackNavigator({
  // Root: {
  //  screen: Root,
  // 	navigationOptions:({ navigation }) => ({
	// 		header: null,
	// 		drawerLockMode: 'locked-closed',
	// 	}),
  // },
	Home: {
		screen: Home,
		navigationOptions:({ navigation }) => ({
			title: `${strings.signin_title}`,
			headerLeft: null,
			drawerLockMode: 'locked-closed',
		}),
	},
	WelcomeScreen: {
		screen: WelcomeScreen,
		navigationOptions:({ navigation }) => ({
			header: null,
			drawerLockMode: 'locked-closed',
		}),
	},
	QRCodeReader: {
		screen: QRCodeReader,
		navigationOptions: ({navigation}) => ({
			title: 'Scan QR Code',
			drawerLockMode: 'locked-closed'
		}),
	},
	Employees: {
		screen: Employees,
		navigationOptions:({ navigation }) => ({
			title:`${strings.home_title}`,
			headerLeft: <DrawerButton navigation={navigation}/>,
			// drawerLockMode: funcs.getDrawerLock()
		}),
	},
	User: {
		screen: User,
		navigationOptions:({navigation}) => ({
			headerLeft: <UserBackButton navigation={navigation}/>,
      headerStyle: {
        elevation: 0,
  			backgroundColor: '#ef9b4c',
        height: 80,
        paddingTop: 20
  		},
  		headerTintColor: '#ffffff',
  		headerTitleStyle: {
  		  width: '100%',
  		},
			drawerLockMode: 'locked-closed',
		}),
	},
	ScheduleStripDetails: {
		screen: ScheduleStripDetails,
		navigationOptions: ({navigation}) => ({
			title: `${strings.details_title}`,
      headerStyle: {
        elevation: 0,
  			backgroundColor: '#ef9b4c',
        height: 80,
        paddingTop: 20
  		},
  		headerTintColor: '#ffffff',
  		headerTitleStyle: {
  		  width: '100%',
  		},
			drawerLockMode: 'locked-closed'
		})
	},
	RecordsMap: {
		screen: RecordsMap,
		navigationOptions: ({navigation}) => ({
			drawerLockMode: 'locked-closed'
		})
	},
	PinSecurity: {
		screen: PinSecurity,
		navigationOptions:({ navigation }) => ({
      // headerLeft: <UserBackButton navigation={navigation}/>,
			title:/*'Employee Pin'*/`${strings.pin_title}`,
			drawerLockMode: 'locked-closed',
		})
	},
	About: {
		screen: About,
		navigationOptions:({ navigation }) => ({
			headerLeft: <DrawerButton navigation={navigation}/>,
			title:`${strings.about_title}`,
		})
	},
	Help: {
		screen: Help,
		navigationOptions:({navigation}) => ({
			headerLeft: <DrawerButton navigation={navigation}/>,
			title: /*'How it works?'*/`${strings.help_title}`,
		})
	}
}, {
	headerMode: 'screen',
	navigationOptions: {
		headerStyle: {
			backgroundColor: '#ef9b4c',
      height: 80,
      paddingTop: 20
		},
		headerTintColor: '#ffffff',
		headerTitleStyle: {
		  width: '100%',
		}
	},
	transitionConfig: () => ({ screenInterpolator: CardStackStyleInterpolator.forHorizontal }),
	// transitionConfig: () => ({ screenInterpolator: () => null }),
});

const DrawerNav = DrawerNavigator({
	Employees: {
		screen: StackNav,
		navigationOptions: ({navigation}) => ({
			headerStyle: {backgroundColor: '#ef9b4c'},
			title: 'Employees',
			headerTintColor: '#ffffff',
			// drawerLockMode: 'locked-closed'
		})
	},
	About: {
		screen: About,
	},
	Help: {
		screen:Help,

	},
	Home: {
		screen: Home,
		navigationOptions: {
			headerStyle: {backgroundColor: '#ef9b4c'},
			headerTintColor: '#ffffff',
		}
	},
	InfoNet: {
		screen: InfoNet,
	},
	transitionConfig: () => ({ screenInterpolator: () => null }),
}, {contentComponent: DrawerContainer});

const defaultGetStateForAction = DrawerNav.router.getStateForAction;

DrawerNav.router.getStateForAction = (action, state) => {
    //use 'DrawerOpen' to capture drawer open event
    if (state && action.type === 'Navigation/NAVIGATE' && action.routeName === 'DrawerClose') {
        // console.log('DrawerClose');
        //write the code you want to deal with 'DrawerClose' event
    }
		else if (state && action.type === 'Navigation/NAVIGATE' && action.routeName === 'DrawerOpen') {
        // console.log('DrawerOpen');
        //write the code you want to deal with 'DrawerOpen' event
				// new Employees().setDrawerOpen();
    }
    return defaultGetStateForAction(action, state);
};

export default DrawerNav;