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,
@@ -12,16 +12,16 @@ import {
   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";
+} 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 }) => {
+  const renderMenuItem = React.useCallback(
+    ({item}) => {
       return <ItemGrid item={item} onPress={() => onMenuItemPress(item)} />;
-  }, [onMenuItemPress]);
+    },
+    [onMenuItemPress],
+  );
 
   const renderProfileCard = () => (
     <View style={styles.profile_card}>
@@ -46,14 +49,14 @@ 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>
           )}
@@ -63,16 +66,14 @@ const HomeView = (props) => {
           <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>
@@ -80,8 +81,7 @@ const HomeView = (props) => {
       <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,7 +100,7 @@ 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}
@@ -110,30 +110,20 @@ const HomeView = (props) => {
     </View>
   );
 
+  const renderBody = () => {
     return (
-    <SafeAreaView style={styles.container_body}>
-      <StatusBar
-        barStyle="light-content" 
-        translucent={false}
-      />
-      
-      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-        <View style={[
-          { flex: 1 },
-        ]}>
+      <View style={[{flex: 1}]}>
         <View style={styles.container_body}>
           <ImageBackground
             source={R.images.igBackgroundSlider}
-              style={[styles.background_header, {
-              }]}
-            >
+            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")}
+              textLabel={I18n.t('Search')}
               textColorLabel={R.colors.white}
             />
 
@@ -144,14 +134,22 @@ const HomeView = (props) => {
             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)}
+            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}>
+        {renderBody()}
       </TouchableWithoutFeedback>
     </SafeAreaView>
   );