done drawer

src/Screens/AccountVerification/AccountVerification.js

+import React from 'react';
+
+import AccountVerificationView from './AccountVerificationView';
+
+const AccountVerificaiton = (props) => {
+  return <AccountVerificationView />;
+};
+
+export default AccountVerificaiton;

src/Screens/AccountVerification/AccountVerificationView.js

+import React from 'react';
+import {View, Text} from 'react-native';
+
+const AccountVerificationView = (props) => {
+  return (
+    <View>
+      <Text>AccountVerificationView screen</Text>
+    </View>
+  );
+};
+
+export default AccountVerificationView;

src/Screens/Feedback/Feedback.js

+import React from 'react';
+
+import FeedbackView from './FeedbackView';
+
+const Feedback = (props) => {
+  return <FeedbackView />;
+};
+
+export default Feedback;

src/Screens/Feedback/FeedbackView.js

+import React from 'react';
+import {View, Text} from 'react-native';
+
+const FeedbackView = (props) => {
+  return (
+    <View>
+      <Text>FeedbackView screen</Text>
+    </View>
+  );
+};
+
+export default FeedbackView;

src/Screens/MethodPay/MethodPay.js

+import React from 'react';
+
+import MethodPayView from './MethodPayView';
+
+const MethodPay = (props) => {
+  return <MethodPayView />;
+};
+
+export default MethodPay;

src/Screens/MethodPay/MethodPayView.js

+import React from 'react';
+import {View, Text} from 'react-native';
+
+const MethodPayView = (props) => {
+  return (
+    <View>
+      <Text>MethodPayView screen</Text>
+    </View>
+  );
+};
+
+export default MethodPayView;

src/Screens/ServiceCustomer/ServiceCustomer.js

+import React from 'react';
+
+import ServiceCustomerView from './ServiceCustomerView';
+
+const ServiceCustomer = (props) => {
+  return <ServiceCustomerView />;
+};
+
+export default ServiceCustomer;

src/Screens/ServiceCustomer/ServiceCustomerView.js

+import React from 'react';
+import {View, Text} from 'react-native';
+
+const ServiceCustomerView = (props) => {
+  return (
+    <View>
+      <Text>ServiceCustomerView screen</Text>
+    </View>
+  );
+};
+
+export default ServiceCustomerView;

src/Screens/Setting/Setting.js

+import React from 'react';
+
+import SettingView from './SettingView';
+
+const Setting = (props) => {
+  return <SettingView />;
+};
+
+export default Setting;

src/Screens/Setting/SettingView.js

+import React from 'react';
+import {View, Text} from 'react-native';
+
+const SettingView = (props) => {
+  return (
+    <View>
+      <Text>SettingView screen</Text>
+    </View>
+  );
+};
+
+export default SettingView;

src/assets/images.js

@@ -17,10 +17,16 @@ const images = {
 
   iconUser: require('./images/iconUser1.png'),
   iconUserAccuracy: require('./images/iconUserAccuracy.png'),
-  iconList: require('./images/iconList.png'),
+  iconList: require('./images/iconList7.png'),
   iconRose: require('./images/iconRose2.png'),
   iconWallet: require('./images/iconWallet2.png'),
   moneyteam: require('./images/iconTeam1.png'),
+
+  iconPhone: require('./images/iconPhone1.png'),
+  iconUserCheck: require('./images/iconUserCheck.png'),
+  iconSetting: require('./images/iconSetting.png'),
+  iconMess: require('./images/iconMess.png'),
+  iconMethodPay: require('./images/iconMethodPay.png'),
 };
 
 export default images;

src/components/Header/Drawer.js

 import React from 'react';
-import {View, Text} from 'react-native';
+import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
+import R from '../../assets/R';
+import {HEIGHTXD, getFontXD, WIDTHXD} from '../../Config/Functions';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import {
+  AccountVerification,
+  METHODPAY,
+  SERVICECUSTOMER,
+  FEEDBACK,
+  SETTING,
+} from '../../routers/ScreenNames';
+import {useNavigation} from '@react-navigation/native';
+
+const menus = [
+  {
+    id: '1',
+    title: 'Xác minh tài khoản',
+    icon: R.images.iconUserCheck,
+    screen: AccountVerification,
+  },
+  {
+    id: '2',
+    title: 'Cài đặt phương thức thanh toán',
+    icon: R.images.iconMethodPay,
+    screen: METHODPAY,
+  },
+  {
+    id: '3',
+    title: 'Liên hệ với dịch vụ khách hàng',
+    icon: R.images.iconPhone,
+    screen: SERVICECUSTOMER,
+  },
+  {
+    id: '4',
+    title: 'Phản hồi',
+    icon: R.images.iconMess,
+    screen: FEEDBACK,
+  },
+  {
+    id: '5',
+    title: 'Cài đặt',
+    icon: R.images.iconSetting,
+    screen: SETTING,
+  },
+];
 
 const Drawer = (props) => {
+  const navigate = useNavigation();
   return (
-    <View>
-      <Text>Drawer view</Text>
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Image source={R.images.avartar} style={styles.imgAvatar} />
+        <Text style={styles.txtTitle}>NGUYEN VAN A</Text>
+      </View>
+
+      <View style={styles.body}>
+        {menus.map((e) => (
+          <TouchableOpacity
+            onPress={() => {
+              navigate.navigate(e.screen);
+              props.toggleModal();
+            }}
+            key={e.id}
+            style={styles.containerItem}>
+            <Image source={e.icon} style={styles.imgIcon} />
+            <Text style={styles.txtTitle}>{e.title}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+
+      <TouchableOpacity
+        onPress={() => console.log('Hello')}
+        style={styles.footer}>
+        <Icon name={'logout'} size={25} color={'#F81515'} />
+        <Text style={styles.txtTitle}>Đăng xuất</Text>
+      </TouchableOpacity>
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+  },
+  header: {
+    paddingVertical: 10,
+    borderWidth: 1,
+    borderRadius: WIDTHXD(64),
+    borderColor: '#C9D3FF',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+  },
+  body: {
+    flex: 1,
+
+    marginVertical: 30,
+  },
+  imgAvatar: {
+    width: WIDTHXD(140),
+    height: WIDTHXD(140),
+    borderRadius: WIDTHXD(100),
+  },
+  imgIcon: {
+    width: WIDTHXD(62),
+    height: HEIGHTXD(52),
+    resizeMode: 'contain',
+  },
+  txtTitle: {
+    fontSize: getFontXD(36),
+    marginLeft: 10,
+    color: '#0C0D2C',
+  },
+  footer: {
+    paddingVertical: 10,
+    backgroundColor: '#EEEEEE',
+    borderRadius: WIDTHXD(75),
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  containerItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 10,
+    borderRadius: WIDTHXD(75),
+
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+  },
+});
+
 export default Drawer;

src/components/Header/HeaderDrawer.js

@@ -49,7 +49,7 @@ const HeaderHome = (props) => {
             Platform.OS == 'ios' ? {paddingVertical: 15} : {},
           ]}>
           <View style={styles.container}>
-            <Drawer />
+            <Drawer toggleModal={toggleModal} />
           </View>
           <TouchableWithoutFeedback onPress={toggleModal}>
             <View

src/routers/ScreenNames.js

@@ -13,3 +13,11 @@ export const DETAIL_WITHDRAW = 'DETAIL_WITHDRAW';
 
 export const ADD_CUSTOMER = 'ADD_CUSTOMER';
 export const WITHDRAW = 'WITHDRAW';
+
+export const AccountVerification = 'AccountVerification';
+export const FEEDBACK = 'FEEDBACK';
+
+export const METHODPAY = 'METHODPAY';
+export const SERVICECUSTOMER = 'SERVICECUSTOMER';
+
+export const SETTING = 'SETTING';

src/routers/StackNavigation.js

@@ -6,6 +6,12 @@ import {createStackNavigator} from '@react-navigation/stack';
 import TabNavigator from './TabNavigation';
 import Login from '../Screens/Login/Login';
 
+import AccountVerificaiton from '../Screens/AccountVerification/AccountVerification';
+import Feedback from '../Screens/Feedback/Feedback';
+import MethodPay from '../Screens/MethodPay/MethodPay';
+import ServiceCustomer from '../Screens/ServiceCustomer/ServiceCustomer';
+import Setting from '../Screens/Setting/Setting';
+
 import * as ScreenName from './ScreenNames';
 
 const Stack = createStackNavigator();
@@ -17,6 +23,18 @@ function MyStack(props) {
       initialRouteName={ScreenName.TABNAVIGATOR}>
       <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
+
+      <Stack.Screen
+        name={ScreenName.AccountVerification}
+        component={AccountVerificaiton}
+      />
+      <Stack.Screen name={ScreenName.FEEDBACK} component={Feedback} />
+      <Stack.Screen name={ScreenName.METHODPAY} component={MethodPay} />
+      <Stack.Screen
+        name={ScreenName.SERVICECUSTOMER}
+        component={ServiceCustomer}
+      />
+      <Stack.Screen name={ScreenName.SETTING} component={Setting} />
     </Stack.Navigator>
   );
 }