CustomDrawer.js 1.47 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
import React, {useEffect, useState} from 'react';
import {
  ImageBackground,
  Image,
  TouchableOpacity,
  Text,
  View,
} from 'react-native';
import {
  DrawerContentScrollView,
  DrawerItemList,
} from '@react-navigation/drawer';
import {IMAGES} from '../../values/images';
import styles from './style';
import {useDispatch, useSelector} from 'react-redux';
import {logoutApp} from '../../store/actions/CommonAction';
const CustomDrawer = props => {
  const userDetails = useSelector(state => state.UserInfo.userInfo);
  const dispatch = useDispatch();
  const navigateToLogout = () => {
    dispatch(logoutApp());
  };
  return (
    <View style={{flex: 1}}>
      <DrawerContentScrollView {...props}>
        <ImageBackground style={{padding: 20}} source={IMAGES.BgProfile}>
          <Image
            style={styles.iconUser}
            source={{uri: 'https://meu.anawork.com' + userDetails.avatar}}
          />
          <Text style={styles.text}>{`${userDetails.first_name} ${
            userDetails.middle_name ? userDetails.middle_name : ''
          } ${userDetails.last_name}`}</Text>
        </ImageBackground>
        <DrawerItemList {...props} />
      </DrawerContentScrollView>
      <TouchableOpacity onPress={navigateToLogout} style={styles.btnLogout}>
        <Image
          source={IMAGES.IcLogout}
          style={{width: 20, height: 20, marginRight: 10}}
        />
        <Text>Đăng xut</Text>
      </TouchableOpacity>
    </View>
  );
};

export default CustomDrawer;