TODO: Đã hoàn thiện phần khai báo giao diện màn hình thông báo

src/components/Header/Header.js

@@ -21,11 +21,15 @@ import {
 } from '../../config/Functions';
 import Icon from 'react-native-vector-icons/AntDesign';
 import {useNavigation} from '@react-navigation/native';
-import SnackBar from '../SnackBar';
 const Header = props => {
   const {title, isBack} = props;
   const navigate = useNavigation();
   return (
+    <SafeAreaView>
+      <StatusBar 
+        barStyle="light-content"
+        backgroundColor={R.colors.blue500}
+      />
     <View style={styles.headerContainer}>
       <Text numberOfLines={1} style={styles.txtTitle}>
         {title}
@@ -38,6 +42,7 @@ const Header = props => {
         </TouchableOpacity>
       )}
     </View>
+    </SafeAreaView>
   );
 };
 
@@ -51,15 +56,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginBottom: 2,
     justifyContent: 'center',
-    backgroundColor: R.colors.white,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 5,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 5,
-    elevation: 5,
+    backgroundColor: R.colors.blue, 
   },
 
   txtTitle: {
@@ -67,7 +64,7 @@ const styles = StyleSheet.create({
     fontSize: getFontSize(16),
     textAlign: 'center',
     fontWeight: 'bold',
-    color: R.colors.black,
+    color: R.colors.white,
   },
   btnBack: {
     position: 'absolute',

src/routers/TabNavigation.js

@@ -4,6 +4,7 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import i18n from '../helper/i18/i18n';
 import {connect} from 'react-redux';
 import R from '../assets/R';
+import Notification from '../screens/notification';
 
 import Account from '../screens/account';
 
@@ -59,19 +60,20 @@ const TabNavigator = props => {
       />
 
       <Tab.Screen
-        name="AccountScreen"
-        component={Account}
+        name="NotificationScreen"
+        component={Notification}
         options={{
-          tabBarLabel: i18n.t('Account'),
+          tabBarLabel: 'Notification',
           tabBarIcon: ({color, size}) => (
             <Image
-              source={R.images.icAccount}
+              source={R.images.icNotification}
               style={{width: size, height: size - 3, tintColor: color}}
               resizeMode={'contain'}
             />
           ),
         }}
       />
+    
     </Tab.Navigator>
   );
 };

src/screens/notification/index.js

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

src/screens/notification/style.js

+import { StyleSheet, Platform } from 'react-native'
+const styles = StyleSheet.create({
+    safeArea:{
+        flex:1,
+        
+    }
+})
\ No newline at end of file

src/screens/notification/view.js

 import React from 'react';
-import {Text, View, TouchableOpacity} from 'react-native';
+import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+import Header from '../../components/Header/Header';
+import styles from '../home/style';
+const NotificationView = (props) => {
+  const {  } = props;
+  return (
+    <View style={styles.safeArea}>
+        <Header title={'Thông báo'}/>
   
-const LoginView = ({params}) => (
-  <View
-    style={{
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-    }}>
-    <TouchableOpacity>
-      <Text>Login</Text>
-    </TouchableOpacity>
     </View>
-);
+  );
+};
 
-export default LoginView;
+export default NotificationView;