TODO: Đã dựng thành công drawer navigation email

src/routers/StackNavigation.js

@@ -29,6 +29,7 @@ import DetailSendDocument from '../screens/list_send_document/detail';
 import StatusSendDocument from '../screens/list_send_document/status';
 import ListWork from '../screens/list_work';
 import DetailListWork from '../screens/list_work/detail';
+import DrawerEmailView from '../routers/drawer_email/drawerView';
 const Stack = createStackNavigator();
 
 function MyStack(props) {
@@ -66,6 +67,7 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.STATUSSENDDOCUMENT} component={StatusSendDocument}/>
       <Stack.Screen name={ScreenName.LISTWORK} component={ListWork}/>
       <Stack.Screen name={ScreenName.DETAILWORK} component={DetailListWork}/>
+      <Stack.Screen name={ScreenName.EMAIL} component={DrawerEmailView}/>
     </Stack.Navigator>
   );
 }

src/routers/drawer_email/drawerView.js

+import { createDrawerNavigator } from "@react-navigation/drawer";
+import R from "../../assets/R";
+import { useEffect, useState } from "react";
+import styles from "./style";
+import { DeviceEventEmitter, Image, TouchableOpacity, View } from "react-native";
+import * as ScreenName from "../ScreenNames";
+import SendEmail from "../../screens/email/send";
+import DeleteEmail from "../../screens/email/delete";
+import EmailHome from "../../screens/email";
+import CustomDrawerMailContent from "./itemDrawer";
+import { connect } from "react-redux";
+
+const Drawer = createDrawerNavigator();
+const IconMenu = R.images.icMenu;
+
+const DrawerNavigatorEmailView = (props) =>{
+    const [reload, setReload] = useState(false);
+
+    const HeaderBackButton = ({onPress, canGoBack}) =>(
+        <TouchableOpacity
+            style={styles.sizeBox}
+            onPress={onPress}
+        >
+            <Image
+                source={R.images.icBack} 
+                style={styles.image}
+            />
+
+        </TouchableOpacity>
+    );
+
+    const HeaderTitle = ({navigation, route}) =>{
+        <View style={styles.headerTitleContainer}>
+            <MenuButton onPress={()=>navigation.toggleDrawer()}/>
+                <View style = {styles.avatar}>
+
+                </View>
+        </View>
+    }
+
+    useEffect(()=>{
+        const setLanguageListener = DeviceEventEmitter.addListener(
+            "setLanguage",
+            (value) => {
+                setReload(
+                    (prev) => !prev
+                );
+            }
+        );
+
+        return () => {setLanguageListener.remove();};
+    }, []);
+
+    const MenuButton = ({onPress}) =>(
+        <TouchableOpacity style={styles.sizeBox} onPress={onPress}>
+            <Image source={IconMenu} style={styles.iconMenu} tintColor={R.colors.white}/>
+        </TouchableOpacity>
+    )
+
+    return (
+        <Drawer.Navigator
+            drawerContent={(drawerProps) => <CustomDrawerMailContent {...drawerProps} />}
+            initialRouteName={ScreenName.EMAIL}
+            screenOptions={({navigation, route})=>({
+                headerLeft:() => (
+                    <View style= {styles.headerLeft}>
+                        <HeaderBackButton
+                            onPress={
+                                () => {
+                                    if(navigation.canGoBack()){
+                                        navigation.pop();
+                                    }else{
+                                        navigation.toggleDrawer();
+                                    }
+                                }
+                            }
+                            canGoBack={navigation.canGoBack()}
+                        />
+                        <MenuButton onPress={()=>navigation.toggleDrawer()}/>
+                    </View>
+                ),
+
+                headerTitle: () => (
+                    <View style={styles.headerTitleContainer}>
+                        <HeaderTitle navigation={navigation} route={route} />
+                    </View>
+                ),
+            })}
+        >
+            <Drawer.Screen
+                name={ScreenName.EMAIL}
+                component={EmailHome}
+                options={
+                    {
+                        drawerLabel : () => null,
+                        drawerIcon: () => null,
+                        drawerItemStyle: { height: 0 },
+                    }
+                }
+            />
+            <Drawer.Screen
+                name={ScreenName.SENDEMAIL}
+                component={SendEmail}
+                options={
+                    {
+                        drawerLabel : () => null,
+                        drawerIcon: () => null,
+                        drawerItemStyle: { height: 0 },
+                    }
+                }
+                />
+            <Drawer.Screen
+                name={ScreenName.TRASHEMAIL}
+                component={DeleteEmail}
+                options={
+                    {
+                        drawerLabel : () => null,
+                        drawerIcon: () => null,
+                        drawerItemStyle: { height: 0 },
+                    }
+                }
+                />
+            
+
+            
+        </Drawer.Navigator>
+    );
+
+};
+
+const mapStateToProps = (state) =>({
+    user: state.userReducer,
+})
+export default connect(mapStateToProps, {})(DrawerNavigatorEmailView);

src/routers/drawer_email/index.js

+import DrawerNavigator from "../drawer_email";
+
+export {default as CustomDrawerMailContent} from "./itemDrawer";
+
+export default DrawerNavigator;
\ No newline at end of file

src/routers/drawer_email/itemDrawer.js

+import { DrawerContent, DrawerContentScrollView, useDrawerProgress } from "@react-navigation/drawer"
+import { useMemo } from "react";
+import {
+    View,
+    Text,
+    Image,
+    TouchableOpacity,
+  } from "react-native";
+import * as ScreenName from "../ScreenNames"
+import R from "../../assets/R";
+import { useCallback } from "react";
+import styles from "./style";
+const CustomDrawerMailContent = (props) => {
+    const {navigation, state} = props; 
+    const progress = useDrawerProgress();
+    const configScreen = useMemo(() => [
+        {
+            label: 'Hộp thư đến',
+            screenName: ScreenName.EMAIL,
+            icon: R.images.icMail
+        },
+        {
+            label:'Đã gửi',
+            screenName: ScreenName.SENDEMAIL,
+            icon: R.images.icSend
+        },
+        {
+            label:'Thùng rác',
+            screenName: ScreenName.TRASHEMAIL,
+            icon: R.images.icTrash
+        }
+    ],[]);
+
+    const currentRouteName = state.routes[state.index]?.name;
+
+    const handleScreenNavigation = useCallback((screenName) =>{
+            navigation.navigate(screenName);
+            navigation.closeDrawer();
+        }, [navigation]
+    );
+
+    const renderItem = useCallback(
+        (item) => {
+            const isSel = currentRouteName === item.screenName;
+            return(
+                <TouchableOpacity
+                    key={item.screenName}
+                    style={[styles.itemContainer, isSel && styles.itemSel]}
+                    onPress={() => handleScreenNavigation(item.screenName)}
+                >
+                    <Image
+                        source={item.icon}
+                        style={styles.icon}
+                        resizeMode="contain"
+                        tintColor={isSel ? R.colors.blue : R.colors.white}
+                    />
+                    <Text style={[
+                        styles.label,
+                        isSel && styles.labelSel
+                    ]}>{item.label}</Text>
+
+                </TouchableOpacity>
+            );
+        },
+        [currentRouteName, handleScreenNavigation]
+    );
+
+    return(
+        <DrawerContentScrollView
+            {...props}
+            contentContainerStyle= {styles.scrollView}
+        >
+            <View style ={styles.logoContainer}>
+                <Image
+                    source={R.images.igLogo}
+                    style={styles.logo}
+                    resizeMode="contain"
+                />
+            </View>
+
+            <View style={styles.itemSection}>
+                {configScreen.map(renderItem)}
+            </View>
+            
+
+        </DrawerContentScrollView>
+    )
+}
+export default CustomDrawerMailContent;
\ No newline at end of file

src/routers/drawer_email/style.js

+import { StyleSheet, Text, View } from 'react-native'
+
+const styles = StyleSheet.create({
+    sizeBox:{
+        marginLeft:15
+    },
+    image:{
+        width:25,
+        height:20
+    },
+    iconMenu: {
+        width: 25,
+        height: 20
+    },
+    headerLeft: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    headerTitleContainer:{
+        flexDirection:'row',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    avatar: {
+        width: 30,
+        height: 30,
+        borderRadius: 15,
+        backgroundColor: '#ccc'
+    },
+    itemContainer:{
+        flexDirection:'row',
+        alignItems:'center',
+        paddingVertical:10,
+        paddingHorizontal:15,
+        marginVertical:5
+    },
+    itemSel: {
+        backgroundColor: 'rgba(0, 122, 255, 0.1)'
+    },
+    icon: {
+        width: 24,
+        height: 24,
+        marginRight: 10
+    },
+    label: {
+        fontSize: 16,
+        color: '#333'
+    },
+    labelSel: {
+        color: '#007AFF',
+        fontWeight: 'bold'
+    },
+    scrollView: {
+        flex: 1
+    },
+    logoContainer: {
+        alignItems: 'center',
+        paddingVertical: 20
+    },
+    logo:{
+        width:49,
+        height:24
+    },
+    itemSection: {
+        flex: 1,
+        paddingTop: 10
+    }
+})
+
+export default styles
\ No newline at end of file

src/screens/email/delete/index.js

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

src/screens/email/delete/style.js

+import { StyleSheet, Text, View } from 'react-native'
+
+
+export default styles
+
+const styles = StyleSheet.create({})
\ No newline at end of file

src/screens/email/detail/index.js

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

src/screens/email/detail/style.js

+import { StyleSheet, Text, View } from 'react-native'
+
+export default styles
+
+const styles = StyleSheet.create({})
\ No newline at end of file

src/screens/email/detail/view.js

+import React from 'react';
+import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+
+const DetailEmailView = (props) => {
+  const {  } = props;
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <TouchableOpacity>
+        <Text>DetailEmail</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default DetailEmailView;
+
+const styles = StyleSheet.create({})
\ No newline at end of file

src/screens/email/inbox/index.js

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

src/screens/email/inbox/style.js

+import { StyleSheet, Text, View } from 'react-native'
+
+export default styles
+
+const styles = StyleSheet.create({})
\ No newline at end of file

src/screens/email/inbox/view.js

+import React from 'react';
+import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+
+const InboxEmailView = (props) => {
+  const {  } = props;
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <TouchableOpacity>
+        <Text>InboxEmail</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default InboxEmailView;
+
+const styles = StyleSheet.create({})
\ No newline at end of file

src/screens/email/index.js

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

src/screens/email/send/index.js

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

src/screens/email/send/view.js

+import React from 'react';
+import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+
+const SendEmailView = (props) => {
+  const {  } = props;
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <TouchableOpacity>
+        <Text>SendEmail</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default SendEmailView;
+
+const styles = StyleSheet.create({})
\ No newline at end of file

src/screens/email/style.js

+import { StyleSheet, Text, View } from 'react-native'
+import R from '../../assets/R'
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,  
+      backgroundColor:R.colors.white
+    },
+    body:{
+        flex: 1,
+        backgroundColor:R.colors.white
+    }
+})
+
+export default styles
\ No newline at end of file

src/screens/email/view.js

+import React from 'react';
+import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+import styles from './style';
+
+const EmailHomeView = (props) => {
+  const {  } = props;
+  return (
+    <View
+      style={styles.container}>
+      <TouchableOpacity>
+        <Text>EmailHome</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default EmailHomeView;

src/screens/home/index.js

@@ -107,7 +107,7 @@ const Home = props => {
       title: 'Mail',
       icon: R.images.icDChiThu,
       screenName: SCREENNAME.EMAIL,
-      aciton: 'NAVIGATE',
+      action: 'NAVIGATE',
     },
   ];