TODO: Cập nhật kiểu dáng cho tiêu đề và các mục, cải thiện bố cục và điều chỉnh…

TODO: Cập nhật kiểu dáng cho tiêu đề và các mục, cải thiện bố cục và điều chỉnh cỡ chữ cho màn hình home

.node-version

+18.20.7
\ No newline at end of file

src/screens/home/header.js

@@ -14,7 +14,7 @@ const customHeader = (props) => {
   const SearchIcon = R.images.icSearch;
   return (
 
-    <View style={styles.container}>
+    <View style={[styles.container ,{justifyContent: 'center',marginTop:20}]}>
       <Image
         source={pathLogo}
         style={{ width: width, height: height }}
@@ -72,8 +72,8 @@ const styles = StyleSheet.create({
   input: {
     fontSize: R.fontsize.fontsSize12,
     color: R.colors.white,
-    minHeight: 40,
-    flex: 1,
+    margin:0,
+    padding:0,
     fontFamily: R.fonts.InterRegular,
     fontWeight: '400',
   },

src/screens/home/item.js

@@ -38,7 +38,7 @@ const styles = StyleSheet.create({
     backgroundColor:R.colors.white,
   },
   menu_text: {
-    fontSize: R.fontsize.fontsSize10,
+    fontSize: R.fontsize.fontsSize12,
     fontWeight: "600",
     color: R.colors.black,
     fontFamily: R.fonts.InterMedium,

src/screens/home/view.js

-import React from "react";
+import React from 'react';
 import {
   View,
   Text,
@@ -11,17 +11,17 @@ import {
   SafeAreaView,
   Image,
   StatusBar, // FEATURE: Import StatusBar để control status bar
-  Platform,  // FEATURE: Check platform iOS/Android
-} from "react-native";
-import HeaderCus from "../home/header";
-import R from "../../assets/R";
-import I18n from "../../helper/i18/i18n";
-import ItemGrid from "./item";
-import styles from "./style";
-import { useNavigation } from "@react-navigation/native";
-import * as SCREENNAME from "../../routers/ScreenNames";
+  Platform, // FEATURE: Check platform iOS/Android
+} from 'react-native';
+import HeaderCus from '../home/header';
+import R from '../../assets/R';
+import I18n from '../../helper/i18/i18n';
+import ItemGrid from './item';
+import styles from './style';
+import {useNavigation} from '@react-navigation/native';
+import * as SCREENNAME from '../../routers/ScreenNames';
 
-const HomeView = (props) => {
+const HomeView = props => {
   const {
     menuDataStudy,
     menuDataIndividual,
@@ -36,9 +36,12 @@ const HomeView = (props) => {
   const ArrowRightIcon = R.images.icArrowRight;
   const navigate = useNavigation();
 
-  const renderMenuItem = React.useCallback(({ item }) => {
-    return <ItemGrid item={item} onPress={() => onMenuItemPress(item)} />;
-  }, [onMenuItemPress]);
+  const renderMenuItem = React.useCallback(
+    ({item}) => {
+      return <ItemGrid item={item} onPress={() => onMenuItemPress(item)} />;
+    },
+    [onMenuItemPress],
+  );
 
   const renderProfileCard = () => (
     <View style={styles.profile_card}>
@@ -46,42 +49,39 @@ const HomeView = (props) => {
         <View style={styles.avatar}>
           {userProfile?.avatar ? (
             <Image
-              source={{ uri: userProfile.avatar }}
+              source={{uri: userProfile.avatar}}
               style={styles.avatar_image}
               resizeMode="cover"
             />
           ) : (
             <View style={styles.avatar_placeholder}>
               <Text style={styles.avatar_text}>
-                {userProfile?.name?.charAt(0) || "U"}
+                {userProfile?.name?.charAt(0) || 'U'}
               </Text>
             </View>
           )}
         </View>
-        
+
         <View style={styles.information}>
           <Text
             style={styles.text_card_info}
             numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {userProfile?.name || "Không có tên"}
+            ellipsizeMode="tail">
+            {userProfile?.name || 'Không có tên'}
           </Text>
           <Text
             style={styles.text_card_info}
             numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {userProfile?.phone || "Không có SĐT"}
+            ellipsizeMode="tail">
+            {userProfile?.phone || 'Không có SĐT'}
           </Text>
         </View>
       </View>
 
-      <TouchableOpacity 
-        style={styles.profile_btn} 
+      <TouchableOpacity
+        style={styles.profile_btn}
         onPress={() => navigate.navigate(SCREENNAME.PROFILE)}
-        activeOpacity={0.7}
-      >
+        activeOpacity={0.7}>
         <Text style={styles.btn_text}>Hồ sở cá nhân</Text>
         <ArrowRightIcon
           width={5}
@@ -100,61 +100,59 @@ const HomeView = (props) => {
         data={data}
         renderItem={renderMenuItem}
         numColumns={3}
-        keyExtractor={(item) => item.id.toString()}
+        keyExtractor={item => item.id.toString()}
         scrollEnabled={false}
         columnWrapperStyle={styles.row}
         removeClippedSubviews={true}
         maxToRenderPerBatch={9}
-        windowSize={10} 
+        windowSize={10}
       />
     </View>
   );
 
+  const renderBody = () => {
+    return (
+      <View style={[{flex: 1}]}>
+        <View style={styles.container_body}>
+          <ImageBackground
+            source={R.images.igBackgroundSlider}
+            style={[styles.background_header]}>
+            <HeaderCus
+              pathLogo={R.images.igLogo}
+              width={75}
+              height={36}
+              textInput={R.colors.white}
+              backgroundInput={R.colors.backgroundInputSearch}
+              textLabel={I18n.t('Search')}
+              textColorLabel={R.colors.white}
+            />
+
+            {renderProfileCard()}
+          </ImageBackground>
+
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            style={styles.scroll}
+            bounces={false}
+            overScrollMode="never">
+            {renderMenuSection('Học tập', menuDataStudy)}
+            {renderMenuSection('Cá nhân', menuDataIndividual)}
+            {renderMenuSection('Dịch vụ trực tuyến', menuDataOnlineSer)}
+          </ScrollView>
+        </View>
+      </View>
+    );
+  };
+
   return (
     <SafeAreaView style={styles.container_body}>
-      <StatusBar
-        barStyle="light-content" 
-        translucent={false}
-      />
-      
-      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-        <View style={[
-          { flex: 1 },
-        ]}>
-          <View style={styles.container_body}>
-            <ImageBackground
-              source={R.images.igBackgroundSlider}
-              style={[styles.background_header, {
-              }]}
-            >
-              <HeaderCus
-                pathLogo={R.images.igLogo}
-                width={75}
-                height={36}
-                textInput={R.colors.white}
-                backgroundInput={R.colors.backgroundInputSearch}
-                textLabel={I18n.t("Search")}
-                textColorLabel={R.colors.white}
-              />
+      <StatusBar barStyle="light-content" translucent={false} />
 
-              {renderProfileCard()}
-            </ImageBackground>
-            
-            <ScrollView
-              showsVerticalScrollIndicator={false}
-              style={styles.scroll}
-              bounces={false} 
-              overScrollMode="never" 
-            >
-              {renderMenuSection("Học tập", menuDataStudy)}
-              {renderMenuSection("Cá nhân", menuDataIndividual)}
-              {renderMenuSection("Dịch vụ trực tuyến", menuDataOnlineSer)}
-            </ScrollView>
-          </View>
-        </View>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        {renderBody()}
       </TouchableWithoutFeedback>
     </SafeAreaView>
   );
 };
 
-export default HomeView;
+export default HomeView;
\ No newline at end of file