ReactNativeDrawer

import React, {Component} from 'react';
import {StyleSheet, SafeAreaView} from 'react-native';
import {connect} from 'react-redux';
import {ApplicationProvider, Divider, Icon, ListItem} from "@ui-kitten/components";
import {light as theme, mapping} from "@eva-design/eva";
import {LOGOUT} from "../constants/actionTypes";
import {store} from '../store';
import AsyncStorage from "@react-native-community/async-storage";

const HomeIcon = (style) => (
    <Icon {...style} name='home'/>
);

const LoginIcon = (style) => (
    <Icon {...style} name='log-in-outline'/>
);

const LogoutIcon = (style) => (
    <Icon {...style} name='log-out-outline'/>
);

const UserMenu = (style) => (
    <Icon {...style} name='people-outline'/>
);

const ShoppingCart = (style) => (
    <Icon {...style} name='shopping-cart-outline'/>
);

let user = '';
const _retrieveData = async () => {
    try {
        const value = await AsyncStorage.getItem('user');
        if (value !== null) {
            user = JSON.parse(value);
        }
    } catch (error) {
        // Error retrieving data
    }
};


const logout = (navigation) => {
    console.log('logout function');
    store.dispatch({type: LOGOUT});
    //navigation.navigate('Login');
    this.forceUpdate();
};

class Drawer extends Component {

    logoutFunction() {
        console.log('LOGOUT FUNCTION');
        this.props.dispatch({type: LOGOUT});
    }
    render() {
        _retrieveData();
        const {navigation} = this.props;
        return (
            <ApplicationProvider mapping={mapping} theme={theme}>
                <SafeAreaView style={styles.menu}>
                    <ListItem title='Home' icon={HomeIcon} onPress={e => navigation.navigate('Home')}/>
                    <Divider/>
                    {!user ?
                        <ListItem title='Login' icon={LoginIcon} onPress={e => navigation.navigate('Login')}/> : null}
                    <Divider/>
                    {user ? <ListItem title={user.name} icon={UserMenu}
                                      onPress={() => logout()}/> : null}
                    <ListItem title="My Cart" icon={ShoppingCart}/>
                    {user ? <ListItem title='Logout' icon={LogoutIcon}
                                      onPress={() => this.logoutFunction()}/> : null}
                </SafeAreaView>
            </ApplicationProvider>

        )
    }
}

const mapStateToProps = (state) => {
    return {
        currentUser: state.common.currentUser
    };
};

const mapDispatchToProps = (dispatch) => {
    //
};

const styles = StyleSheet.create({
    container: {
        //flex: 1,
        backgroundColor: '#FFFFFF',
        alignItems: 'center',
        justifyContent: 'center',
    },
    menu: {
        flex: 1,
    },
    header: {
        fontSize: 20,
        marginVertical: 20,
    },
});

export default connect(mapStateToProps, '')(Drawer);