TODO: Đã fix xong giao diện android

src/components/Header/Header.js

@@ -23,7 +23,7 @@ const Header = props => {
 
   return (
     <SafeAreaView style={styles.safeArea}>
-      <StatusBar barStyle="light-content" backgroundColor={R.colors.blue500} />
+      <StatusBar translucent={false} barStyle="light-content" backgroundColor={R.colors.blue500} />
 
       <View style={styles.headerContainer}>
         {isSearch && (
@@ -57,7 +57,7 @@ const styles = StyleSheet.create({
     backgroundColor: R.colors.blue500, 
   },
   headerContainer: {
-    height: HEIGHT(30),
+    height: HEIGHT(40),
     width: '100%',
     flexDirection: 'row',
     alignItems: 'center',

src/screens/home/view.js

@@ -33,20 +33,16 @@ const HomeView = (props) => {
     onSearchChange,
   } = props;
 
-  // OPTIMIZE: Move icon reference outside render để tránh re-create
   const ArrowRightIcon = R.images.icArrowRight;
   const navigate = useNavigation();
 
-  // PERFORMANCE: Memoized render function
   const renderMenuItem = React.useCallback(({ item }) => {
     return <ItemGrid item={item} onPress={() => onMenuItemPress(item)} />;
   }, [onMenuItemPress]);
 
-  // UI/UX: Profile card component với null safety
   const renderProfileCard = () => (
     <View style={styles.profile_card}>
       <View style={styles.profile_left}>
-        {/* FEATURE: Avatar với fallback */}
         <View style={styles.avatar}>
           {userProfile?.avatar ? (
             <Image
@@ -63,7 +59,6 @@ const HomeView = (props) => {
           )}
         </View>
         
-        {/* FEATURE: User information với null safety */}
         <View style={styles.information}>
           <Text
             style={styles.text_card_info}
@@ -82,7 +77,6 @@ const HomeView = (props) => {
         </View>
       </View>
 
-      {/* FEATURE: Profile button với better UX */}
       <TouchableOpacity 
         style={styles.profile_btn} 
         onPress={() => navigate.navigate(SCREENNAME.PROFILE)}
@@ -99,7 +93,6 @@ const HomeView = (props) => {
     </View>
   );
 
-  // FUNCTIONALITY: Render menu section với reusable logic
   const renderMenuSection = (title, data) => (
     <View style={styles.menu_container}>
       <Text style={styles.menu_title}>{title}</Text>
@@ -110,34 +103,28 @@ const HomeView = (props) => {
         keyExtractor={(item) => item.id.toString()}
         scrollEnabled={false}
         columnWrapperStyle={styles.row}
-        removeClippedSubviews={true} // PERFORMANCE: Memory optimization
-        maxToRenderPerBatch={9} // PERFORMANCE: Render batch size
-        windowSize={10} // PERFORMANCE: Window size optimization
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={9}
+        windowSize={10} 
       />
     </View>
   );
 
   return (
-    <>
-      {/* FIXME: StatusBar configuration để loại bỏ white space */}
+    <SafeAreaView style={styles.container_body}>
       <StatusBar
-        barStyle="light-content" // Text trắng trên dark background
-        backgroundColor="transparent" // Background trong suốt
-        translucent={true} // Cho phép content extend lên status bar
+        barStyle="light-content" 
+        translucent={false}
       />
       
       <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-        {/* FIXME: Dùng View với manual padding thay SafeAreaView */}
         <View style={[
           { flex: 1 },
-          { paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight }
         ]}>
           <View style={styles.container_body}>
             <ImageBackground
               source={R.images.igBackgroundSlider}
               style={[styles.background_header, {
-                // FIXME: Extend background để cover status bar area
-                paddingTop: Platform.OS === 'ios' ? 50 : (StatusBar.currentHeight || 0) + 10,
               }]}
             >
               <HeaderCus
@@ -156,10 +143,9 @@ const HomeView = (props) => {
             <ScrollView
               showsVerticalScrollIndicator={false}
               style={styles.scroll}
-              bounces={false} // OPTIMIZE: Tắt bounce trên iOS
-              overScrollMode="never" // OPTIMIZE: Tắt over scroll trên Android
+              bounces={false} 
+              overScrollMode="never" 
             >
-              {/* FUNCTIONALITY: Render các menu sections */}
               {renderMenuSection("Học tập", menuDataStudy)}
               {renderMenuSection("Cá nhân", menuDataIndividual)}
               {renderMenuSection("Dịch vụ trực tuyến", menuDataOnlineSer)}
@@ -167,7 +153,7 @@ const HomeView = (props) => {
           </View>
         </View>
       </TouchableWithoutFeedback>
-    </>
+    </SafeAreaView>
   );
 };