custom drawer

package.json

@@ -13,6 +13,7 @@
     "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/masked-view": "^0.1.10",
     "@react-navigation/bottom-tabs": "^5.11.7",
+    
     "@react-navigation/native": "^5.9.2",
     "@react-navigation/stack": "^5.14.2",
     "axios": "^0.21.1",

src/Screens/Account/AccountView.js

@@ -43,7 +43,7 @@ export default AccountView;
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    paddingHorizontal: 20,
+    paddingHorizontal: 30,
     marginTop: 20,
     justifyContent: 'space-between',
     flexWrap: 'wrap',
@@ -69,5 +69,6 @@ const styles = StyleSheet.create({
     width: WIDTHXD(216),
     height: HEIGHTXD(216),
     marginBottom: 10,
+    resizeMode: 'contain',
   },
 });

src/components/Header/Drawer.js

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

src/components/Header/HeaderDrawer.js

-import React, {useEffect} from 'react';
+import React, {useState} from 'react';
 import {
   View,
   Text,
@@ -9,23 +9,56 @@ import {
   ImageBackground,
   TouchableOpacity,
   Platform,
+  Button,
+  TouchableWithoutFeedback,
 } from 'react-native';
 import R from '../../assets/R';
 import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
 import LinearGradient from 'react-native-linear-gradient';
 import {connect} from 'react-redux';
-import {HEIGHTXD, toPriceVnd} from '../../Config/Functions';
-import Icon from 'react-native-vector-icons/AntDesign';
+import {HEIGHTXD} from '../../Config/Functions';
+import Modal from 'react-native-modal';
+import Drawer from './Drawer';
 
 const HeaderHome = (props) => {
+  const [isModalVisible, setModalVisible] = useState(false);
+
+  const toggleModal = () => {
+    setModalVisible(!isModalVisible);
+  };
+
   return (
     <ImageBackground style={styles.img} source={R.images.bgHeader}>
       <StatusBar backgroundColor="transparent" translucent={true} />
       <View style={styles.headerContainer}>
-        <Image source={R.images.iconMenu} style={styles.imgIcon} />
+        <TouchableOpacity onPress={toggleModal}>
+          <Image source={R.images.iconMenu} style={styles.imgIcon} />
+        </TouchableOpacity>
+
         <Text style={styles.txtTitle}>Tài khoản</Text>
         <View />
       </View>
+      <Modal
+        animationIn={'fadeInLeft'}
+        animationOut={'fadeOutLeft'}
+        isVisible={isModalVisible}
+        backdropOpacity={0.5}>
+        <View
+          style={[
+            {flex: 1, flexDirection: 'row'},
+            Platform.OS == 'ios' ? {paddingVertical: 15} : {},
+          ]}>
+          <View style={styles.container}>
+            <Drawer />
+          </View>
+          <TouchableWithoutFeedback onPress={toggleModal}>
+            <View
+              style={{
+                flex: 1,
+              }}></View>
+          </TouchableWithoutFeedback>
+        </View>
+      </Modal>
     </ImageBackground>
   );
 };
@@ -64,4 +97,10 @@ const styles = StyleSheet.create({
     color: R.colors.white,
     fontWeight: 'bold',
   },
+  container: {
+    backgroundColor: 'white',
+    height: '100%',
+    width: 300,
+    borderRadius: 20,
+  },
 });

src/routers/TabNavigation.js

@@ -25,60 +25,66 @@ const PayScreenComponent = () => {
 
 const TabNavigator = (props) => {
   return (
-    <Tab.Navigator
-      initialRouteName="Screen1"
-      tabBarOptions={{activeTintColor: R.colors.main}}>
-      <Tab.Screen
-        name="Screen1"
-        component={Home}
-        options={{
-          tabBarLabel: 'Overview',
-          tabBarIcon: ({color, size}) => (
-            <Icon name="landmark" size={size} color={color} />
-          ),
-        }}
-      />
+    <View style={{flex: 1}}>
+      <Tab.Navigator
+        initialRouteName="Screen1"
+        tabBarOptions={{activeTintColor: R.colors.main}}>
+        <Tab.Screen
+          name="Screen1"
+          component={Home}
+          options={{
+            tabBarLabel: 'Overview',
+            tabBarIcon: ({color, size}) => (
+              <Icon name="landmark" size={size} color={color} />
+            ),
+          }}
+        />
 
-      <Tab.Screen
-        name="Screen2"
-        component={Account}
-        options={{
-          tabBarLabel: 'Tài khoản',
-          tabBarIcon: ({color, size}) => (
-            <Icon name="user-tie" size={size} color={color} />
-          ),
-        }}
-      />
+        <Tab.Screen
+          name="Screen2"
+          component={Account}
+          options={{
+            tabBarLabel: 'Tài khoản',
+            tabBarIcon: ({color, size}) => (
+              <Icon name="user-tie" size={size} color={color} />
+            ),
+          }}
+        />
 
-      <Tab.Screen
-        name="Pay"
-        component={PayScreenComponent}
-        options={{
-          tabBarButton: () => <PlussModal />,
-        }}
-      />
+        <Tab.Screen
+          name="Pay"
+          component={PayScreenComponent}
+          options={{
+            tabBarButton: () => <PlussModal />,
+          }}
+        />
 
-      <Tab.Screen
-        name="Screen3"
-        component={Exchange}
-        options={{
-          tabBarLabel: 'Giao dịch',
-          tabBarIcon: ({color, size}) => (
-            <Icon name="chart-line" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tab.Screen
-        name="Screen4"
-        component={Notification}
-        options={{
-          tabBarLabel: 'Thông báo',
-          tabBarIcon: ({color, size}) => (
-            <MaterialIcons name="notifications-on" size={size} color={color} />
-          ),
-        }}
-      />
-    </Tab.Navigator>
+        <Tab.Screen
+          name="Screen3"
+          component={Exchange}
+          options={{
+            tabBarLabel: 'Giao dịch',
+            tabBarIcon: ({color, size}) => (
+              <Icon name="chart-line" size={size} color={color} />
+            ),
+          }}
+        />
+        <Tab.Screen
+          name="Screen4"
+          component={Notification}
+          options={{
+            tabBarLabel: 'Thông báo',
+            tabBarIcon: ({color, size}) => (
+              <MaterialIcons
+                name="notifications-on"
+                size={size}
+                color={color}
+              />
+            ),
+          }}
+        />
+      </Tab.Navigator>
+    </View>
   );
 };
 

yarn.lock

@@ -1207,6 +1207,14 @@
     query-string "^6.13.6"
     react-is "^16.13.0"
 
+"@react-navigation/drawer@^5.12.4":
+  version "5.12.4"
+  resolved "https://registry.yarnpkg.com/@react-navigation/drawer/-/drawer-5.12.4.tgz#0e0f8e0f0b6b67b45ca276212a1c80b05dc3b008"
+  integrity sha512-0O6OCTgCVnThx0XFsHd/48i6FeV7vxNvJYxeucantcdCwQMWJb46cVMsYGFYt49VwE8VX4Yg/KMZXMPfPxn7Pg==
+  dependencies:
+    color "^3.1.3"
+    react-native-iphone-x-helper "^1.3.0"
+
 "@react-navigation/native@^5.9.2":
   version "5.9.3"
   resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.3.tgz#3859f439adc9a744b79a98fbc7606bdd459574d5"