TODO:Đã fix màn hình home

src/components/Header/Header.js

@@ -25,10 +25,11 @@ const Header = props => {
   const {title, isBack} = props;
   const navigate = useNavigation();
   return (
-    <SafeAreaView>
+    <SafeAreaView style={styles.safeArea}>
       <StatusBar 
         barStyle="light-content"
-        backgroundColor={R.colors.blue500}
+        backgroundColor="transparent"
+        translucent={true}
       />
     <View style={styles.headerContainer}>
       <Text numberOfLines={1} style={styles.txtTitle}>
@@ -49,6 +50,9 @@ const Header = props => {
 export default Header;
 
 const styles = StyleSheet.create({
+  safeArea:{
+    backgroundColor:R.colors.blue,
+  },
   headerContainer: {
     height: HEIGHT(45),
     width: '100%',

src/screens/home/header.js

@@ -12,6 +12,8 @@ const HeaderHome = (props) => {
     <SafeAreaView style={styles.containerBoxHeader}>
       <StatusBar 
         barStyle="light-content"
+        backgroundColor="transparent"
+        translucent={true}
       />
       <View style={styles.boxLogo}>
         <Image

src/screens/home/view.js

@@ -10,8 +10,8 @@ import {
   Keyboard,
   SafeAreaView,
   Image,
-  StatusBar, // FEATURE: Thêm StatusBar để control status bar
-  Platform,  // FEATURE: Check platform để xử lý khác biệt iOS/Android
+  StatusBar,   
+  Platform, 
 } from "react-native";
 import HeaderCus from "../home/header";
 import R from "../../assets/R";
@@ -33,17 +33,14 @@ const HomeView = (props) => {
   } = props;
   const navigate = useNavigation();
 
-  // FUNCTIONALITY: Render menu item với tối ưu performance
   const renderMenuItem = ({ item }) => {
     return <ItemGrid item={item} onPress={() => onMenuItemPress(item)} />;
   };
 
-  // UI/UX: Card thông tin user với layout tối ưu
   const cardItemInfo = () => {
     return (
       <View style={styles.profileCard}>
         <View style={styles.profile_left}>
-          {/* FEATURE: Avatar với fallback placeholder */}
           <View style={styles.avatar}>
             {userProfile?.avatar ? (
               <Image
@@ -60,7 +57,6 @@ const HomeView = (props) => {
             )}
           </View>
           
-          {/* FEATURE: Thông tin user với null safety */}
           <View style={styles.information}>
             <Text
               style={styles.text_card_info}
@@ -79,7 +75,6 @@ const HomeView = (props) => {
           </View>
         </View>
 
-        {/* FEATURE: Button navigate tới profile */}
         <TouchableOpacity 
           style={styles.profile_btn} 
           onPress={() => navigate.navigate(SCREENNAME.PROFILE)}
@@ -89,7 +84,7 @@ const HomeView = (props) => {
           <View style={styles.iconNext}>
             <Image
               source={R.images.icNext}
-              style={{ width: 5, height: 10 }} // OPTIMIZE: Dùng style thay maxWidth/maxHeight
+              style={{ width: 5, height: 10 }} 
             />
           </View>
         </TouchableOpacity>
@@ -97,7 +92,6 @@ const HomeView = (props) => {
     );
   };
 
-  // FUNCTIONALITY: Render menu activity với FlatList tối ưu
   const renderMenuActivity = () => {
     return (
       <View style={styles.menu_container}>
@@ -110,14 +104,13 @@ const HomeView = (props) => {
           scrollEnabled={false}
           columnWrapperStyle={styles.row}
           ListEmptyComponent={renderItemEmpty}
-          removeClippedSubviews={true} // PERFORMANCE: Tối ưu memory
-          maxToRenderPerBatch={9} // PERFORMANCE: Render tối đa 9 items/batch
+          removeClippedSubviews={true} 
+          maxToRenderPerBatch={9} 
         />
       </View>
     );
   };
 
-  // FUNCTIONALITY: Render menu statistics
   const renderMenuStatistics = () => {
     return (
       <View style={styles.menu_container}>
@@ -137,7 +130,6 @@ const HomeView = (props) => {
     );
   };
 
-  // FUNCTIONALITY: Render menu notification
   const renderMenuNotification = () => {
     return (
       <View style={styles.menu_container}>
@@ -157,13 +149,12 @@ const HomeView = (props) => {
     );
   };
 
-  // UI/UX: Empty state component
   const renderItemEmpty = () => {
     return (
       <View style={styles.cardItemEmpty}>
         <Image
           source={R.images.icNoData}
-          style={{ width: 50, height: 50 }} // OPTIMIZE: Dùng style object
+          style={{ width: 50, height: 50 }} 
         />
         <Text style={[styles.menu_text, { color: R.colors.red }]}>
           Không có dữ liệu
@@ -173,17 +164,8 @@ const HomeView = (props) => {
   };
 
   return (
-    <>
-      {/* FIXME: StatusBar để control màu status bar và remove white space */}
-      <StatusBar
-        barStyle="light-content" // Text trắng trên status bar
-        backgroundColor="transparent" // Background trong suốt
-        translucent={true} // Cho phép content hiển thị dưới status bar
-      />
-      
+    <View style={styles.safeArea}>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-        {/* FIXME: Dùng View thay SafeAreaView để loại bỏ white space */}
-        <View style={[styles.safeArea, { paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight }]}>
           <View style={styles.container_body}>
             <ImageBackground
               source={R.images.igBackground}
@@ -210,9 +192,8 @@ const HomeView = (props) => {
               {renderMenuNotification()}
             </ScrollView>
           </View>
-        </View>
       </TouchableWithoutFeedback>
-    </>
+    </View>
   );
 };