TODO: Đã dựng thành công header và drawer navigaiton

src/routers/drawer_email/drawerView.js

@@ -52,8 +52,8 @@ const DrawerNavigatorEmailView = (props) =>{
     }, []);
 
     const MenuButton = ({onPress}) =>(
-        <TouchableOpacity style={styles.sizeBox} onPress={onPress}>
-            <Image source={IconMenu} style={styles.iconMenu} tintColor={R.colors.white}/>
+        <TouchableOpacity style={[styles.sizeBox, {marginLeft:10}]} onPress={onPress}>
+            <Image source={IconMenu} style={styles.iconMenu} tintColor={R.colors.gray2}/>
         </TouchableOpacity>
     )
 
@@ -62,8 +62,10 @@ const DrawerNavigatorEmailView = (props) =>{
             drawerContent={(drawerProps) => <CustomDrawerMailContent {...drawerProps} />}
             initialRouteName={ScreenName.EMAIL}
             screenOptions={({navigation, route})=>({
-                headerLeft:() => (
-                    <View style= {styles.headerLeft}>
+
+                header: ()=>(
+                    <View style={styles.headerTitleContainer}>
+                        <View>
                         <HeaderBackButton
                             onPress={
                                 () => {
@@ -76,15 +78,22 @@ const DrawerNavigatorEmailView = (props) =>{
                             }
                             canGoBack={navigation.canGoBack()}
                         />
-                        <MenuButton onPress={()=>navigation.toggleDrawer()}/>
-                    </View>
-                ),
-
-                headerTitle: () => (
-                    <View style={styles.headerTitleContainer}>
-                        <HeaderTitle navigation={navigation} route={route} />
+                        
+                        </View>
+                        <View style={styles.headerRight}>
+                            <MenuButton onPress={()=>navigation.toggleDrawer()}/>
+                                <View 
+                                    style={styles.avatar}
+                                ></View>
+                        </View>
+                        
+                      
                     </View>
                 ),
+                headerStyle: {
+                    backgroundColor: R.colors.blue,
+                  },
+                
             })}
         >
             <Drawer.Screen

src/routers/drawer_email/itemDrawer.js

@@ -52,7 +52,7 @@ const CustomDrawerMailContent = (props) => {
                         source={item.icon}
                         style={styles.icon}
                         resizeMode="contain"
-                        tintColor={isSel ? R.colors.blue : R.colors.white}
+                        tintColor={isSel ? R.colors.white : R.colors.black}
                     />
                     <Text style={[
                         styles.label,

src/routers/drawer_email/style.js

 import { StyleSheet, Text, View } from 'react-native'
+import R from '../../assets/R'
 
 const styles = StyleSheet.create({
     sizeBox:{
@@ -8,24 +9,27 @@ const styles = StyleSheet.create({
         width:25,
         height:20
     },
-    iconMenu: {
-        width: 25,
-        height: 20
-    },
-    headerLeft: {
-        flexDirection: 'row',
-        alignItems: 'center'
-    },
     headerTitleContainer:{
+        height:56,
         flexDirection:'row',
-        alignItems: 'center',
-        justifyContent: 'center'
+        alignItems:'center',
+        backgroundColor:R.colors.blue,
     },
-    avatar: {
-        width: 30,
-        height: 30,
-        borderRadius: 15,
-        backgroundColor: '#ccc'
+    logoContainer:{
+        paddingLeft:15,
+        marginVertical:10
+    },
+    headerRight:{
+        flex:1,
+        flexDirection:'row',
+        alignItems:'center',
+        backgroundColor:R.colors.white,
+        borderRadius:105,
+        padding:5,
+        marginRight:15,
+        marginLeft:5,
+        justifyContent:'space-between',
+        width:'100%'
     },
     itemContainer:{
         flexDirection:'row',
@@ -34,36 +38,39 @@ const styles = StyleSheet.create({
         paddingHorizontal:15,
         marginVertical:5
     },
-    itemSel: {
-        backgroundColor: 'rgba(0, 122, 255, 0.1)'
+    itemSel:{
+        backgroundColor:R.colors.blue,
+        marginHorizontal:15,
+        borderRadius:15,
     },
-    icon: {
-        width: 24,
-        height: 24,
-        marginRight: 10
+    logo:{
+        width:49,
+        height:40
     },
-    label: {
-        fontSize: 16,
-        color: '#333'
+    scrollView:{
+        flex:1,
+        backgroundColor:R.colors.white
     },
-    labelSel: {
-        color: '#007AFF',
-        fontWeight: 'bold'
+    headerLeft:{
+        flexDirection:'row',
     },
-    scrollView: {
-        flex: 1
+    iconMenu:{
+        width:25,
+        height:20,
     },
-    logoContainer: {
-        alignItems: 'center',
-        paddingVertical: 20
+    avatar:{
+        width:25,
+        height:25,
+        borderRadius:15,
+        backgroundColor:R.colors.black,
+        marginRight:5
     },
-    logo:{
-        width:49,
-        height:24
+    icon:{
+        width:25,
+        height:25,
     },
-    itemSection: {
-        flex: 1,
-        paddingTop: 10
+    label:{
+        marginLeft:8
     }
 })
 

src/screens/email/style.js

@@ -8,8 +8,8 @@ const styles = StyleSheet.create({
     },
     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';
+import Header from '../../components/Header/Header';
 
 const EmailHomeView = (props) => {
   const {  } = props;
   return (
     <View
       style={styles.container}>
-      <TouchableOpacity>
-        <Text>EmailHome</Text>
-      </TouchableOpacity>
+        <View>
+            
+        </View>
     </View>
   );
 };