App.js

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loggedIn: this.props.loggedIn
        };
    }

    componentDidMount() {
        //  Here I have some logic with local database and the 'loggedIn' prop
    }

    render() {
        return this.props.loggedIn ? <MainDrawer {...this.props} /> : <AuthStack />;
    }
}

NavHeader.js

import React from 'react';
import { View, TouchableOpacity, Image, StyleSheet, Platform } from 'react-native';
import { NavigationActions } from 'react-navigation';

const is_iOS = (Platform.OS === 'ios');

const DrawerIcon = (props) => {
    return (
        <TouchableOpacity onPress={() => {
            console.log(props);
            props.screenProps.navigation.navigate('DrawerOpen');
        }}>
            <Image style={s.navHeaderIcon} source={require('icons/menu.png')} />
        </TouchableOpacity>
    );
};

export default (props) => {
    return (
        <View style={s.navHeaderContainer}>
            <Image style={s.navHeaderIcon} source={require('assets/logo.png')} />
            {!props.subRoute ? <DrawerIcon {...props} /> : null}
        </View>
    );
};

const s = StyleSheet.create({
    navHeaderContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: 'white',
        height: is_iOS ? 76 : 60,
        paddingTop: is_iOS ? 16 : 0,
        paddingHorizontal: 20
    },
    navHeaderIcon: {
        height: 40,
        width: 40,
        resizeMode: 'contain'
    }
});

navigation.js

import React from 'react';
import { TouchableOpacity, Text, View } from 'react-native';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import { NavHeader } from 'molecules';
import { ScannerScreen, EventsScreen, TicketsScreen, LoginScreen, PassRecoveryScreen } from 'screens';
import realm from '_realm';
import store from 'store';


export const AuthStack =  StackNavigator({
    Login: {
        screen: (props) => <LoginScreen {...props} />
    },
    PassRecovery: {
        screen: () => <PassRecoveryScreen />
    }
}, {
    headerMode: 'none',
    mode: 'modal'
});

export const MainDrawer = DrawerNavigator({
    AppStack: {
        screen: (props) => <AppStack screenProps={props} />
    }
}, {
    contentComponent: () => <Logout />,
    drawerPosition: 'right'
});

const Logout = () => (
    <View style={{marginTop: 50, borderTopWidth: .5, borderBottomWidth: .5, paddingLeft: 20, paddingVertical: 10 }}>
        <TouchableOpacity onPress={() => {
            realm.write(() => { realm.delete(realm.objects('Token')); });
            store.dispatch({type: 'LOGGED_IN', payload: false });
            store.dispatch({ type: 'PUT_TOKEN', payload: '' });
        }}>
            <Text style={{fontSize: 18, fontWeight: '600'}}>LOGOUT</Text>
        </TouchableOpacity>
    </View>
);

const AppStack = StackNavigator({
    EventsScreen: {
        name: 'Events',
        screen: (props) => <EventsScreen {...props} />
    },
    ScannerStack: {
        name: 'Scanner',
        screen: (props) => <ScannerStack screenProps={props.navigation} />
    }
}, {
    navigationOptions: {
        header: (props) => <NavHeader {...props} />
    }
});

const ScannerStack = StackNavigator({
    ScannerScreen: {
        name: 'Scanner',
        screen: (props) => <ScannerScreen {...props}  />
    },
    TicketsScreen: {
        name: 'TicketsScreen',
        screen: () => <TicketsScreen  />
    }
}, {
    mode: 'modal',
    headerMode: 'none',
    navigationOptions: {
        header: () => <NavHeader subRoute />
    }
});