TODO: Đã tối ưu hoá lại phần màn hình home và thêm chức năng tìm kiếm cho màn hình home

src/assets/fonts.js

@@ -4,3 +4,4 @@ const fonts = {
   InterSemiBold:'Inter_18pt-SemiBold',
 };
 export default fonts;
+

src/screens/home/header.js

-import { Image, SafeAreaView, StatusBar, StyleSheet, TextInput, View } from "react-native";
-import React from "react";
-import R from "../../assets/R";
-const customHeader = (props) => {
+import {
+  Image,
+  SafeAreaView,
+  StatusBar,
+  StyleSheet,
+  TextInput,
+  View,
+} from 'react-native';
+import React from 'react';
+import R from '../../assets/R';
+import styles from './style';
+const customHeader = props => {
   const {
     pathLogo,
     width,
@@ -13,24 +21,17 @@ const customHeader = (props) => {
   } = props;
   const SearchIcon = R.images.icSearch;
   return (
-
-    <View style={[styles.container ,{justifyContent: 'center',marginTop:20}]}>
-      <Image
-        source={pathLogo}
-        style={{ width: width, height: height }}
-      />
+    <View style={[styles.container_header, styles.spacing_header]}>
+      <Image source={pathLogo} style={{width: width, height: height}} />
       <View style={styles.size_box}></View>
-      <View
-        style={styles.search_box}
-      >
+      <View style={styles.search_box}>
         <SearchIcon
-          width={25}
-          height={25}
+          width={20}
+          height={20}
           stroke={R.colors.white}
           stroke-width={2}
         />
         <View style={styles.size_box_2}></View>
-
         <TextInput
           value={value}
           onChangeText={onChangeText}
@@ -44,37 +45,3 @@ const customHeader = (props) => {
 };
 
 export default customHeader;
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    marginHorizontal: 15,
-  },
-  size_box:{
-    width: '20%',
-  },
-  size_box_2:{
-    width: '2.5%',
-  },
-  search_box: {
-    flex: 3,
-    flexDirection: "row",
-    backgroundColor: R.colors.black250,
-    alignItems: "center",
-    borderColor: R.colors.gray280,
-    borderRadius: 100,
-    borderWidth: 1,
-    maxHeight:40,
-    paddingHorizontal: 14,
-    paddingVertical: 5
-  },
-
-  input: {
-    fontSize: R.fontsize.fontsSize12,
-    color: R.colors.white,
-    margin:0,
-    padding:0,
-    fontFamily: R.fonts.InterRegular,
-    fontWeight: '400',
-  },
-});

src/screens/home/index.js

@@ -72,17 +72,25 @@ const Home = (props) => {
   const handleSearchChange = (text) => {
     setSearchText(text);
   };
+  const handleNavigationProfile = () => {
+    navigation.navigate(SCREENNAME.PROFILE);
+  };
+
+  const filterMenuData = (menuData) =>{
+    return menuData.filter(item => item.title.toLowerCase().includes(searchText.toLowerCase()));
+  }
 
   return (
     <Homeview
-      menuDataStudy={menuDataStudy}
-      menuDataIndividual={menuDataIndividual}
-      menuDataOnlineSer={menuDataOnlineSer}
+      menuDataStudy={filterMenuData(menuDataStudy) || menuDataStudy}
+      menuDataIndividual={filterMenuData(menuDataIndividual) || menuDataIndividual}
+      menuDataOnlineSer={filterMenuData(menuDataOnlineSer) || menuDataOnlineSer}
       selectedMenuItem={selectedMenuItem}
       searchText={searchText}
       userProfile={userProfile}
       onMenuItemPress={handleMenuItemPress}
       onSearchChange={handleSearchChange}
+      onNavigationProfile={handleNavigationProfile}
     />
   );
 };

src/screens/home/item.js

 import React from "react";
 import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
-import R from "../../assets/R";
+import styles from "./style";
 const ItemGrid = ({ item ,onPress }) => {
    const IconComponent = item.icon;
   return (
@@ -21,27 +21,3 @@ const ItemGrid = ({ item ,onPress }) => {
 
 export default ItemGrid;
 
-const styles = StyleSheet.create({
-  menu_item: {
-    alignItems: "center", 
-    paddingVertical: 10,
-    paddingHorizontal: 5,
-    marginHorizontal: 5,
-    marginVertical: 5,
-    flex: 1,
-    maxWidth: "30%",
-    minHeight:"30%"
-  },
-  icon_container: {
-    width: 35,
-    height: 35,
-    backgroundColor:R.colors.white,
-  },
-  menu_text: {
-    fontSize: R.fontsize.fontsSize12,
-    fontWeight: "600",
-    color: R.colors.black,
-    fontFamily: R.fonts.InterMedium,
-    textAlign: "center",
-  },
-});

src/screens/home/style.js

-import { StyleSheet } from "react-native";
-import R from "../../assets/R";
+import {StyleSheet} from 'react-native';
+import R from '../../assets/R';
 
 const styles = StyleSheet.create({
+  container_header: {
+    flexDirection: 'row',
+    marginHorizontal: 15,
+  },
+  spacing_header: {
+    justifyContent: 'center',
+    marginTop: 20,
+  },
+  size_box: {
+    width: '20%',
+  },
+  size_box_2: {
+    width: '2.5%',
+  },
+  search_box: {
+    flex: 3,
+    flexDirection: 'row',
+    backgroundColor: R.colors.black250,
+    alignItems: 'center',
+    borderColor: R.colors.gray280,
+    borderRadius: 100,
+    height:35,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+
+  input: {
+    fontSize: R.fontsize.fontsSize12,
+    color: R.colors.white,
+    margin: 0,
+    padding: 0,
+    fontFamily: R.fonts.InterRegular,
+    fontWeight: '400',
+  },
+  /* -------------------------------------------------------------------------- */
+  /*                                    Body                                    */
+  /* -------------------------------------------------------------------------- */
   container_body: {
     flex: 1,
     backgroundColor: R.colors.white,
@@ -13,22 +50,22 @@ const styles = StyleSheet.create({
   profile_card: {
     position: 'absolute',
     bottom: -30,
-      flexDirection: "row",
-      alignItems: "center",
+    flexDirection: 'row',
+    alignItems: 'center',
     backgroundColor: R.colors.white,
     paddingVertical: 10,
     paddingHorizontal: 15,
     marginHorizontal: 15,
     borderRadius: 15,
     shadowColor: R.colors.black,
-      shadowOffset: { width: 0, height: 2 },
+    shadowOffset: {width: 0, height: 2},
     shadowOpacity: 0.22,
     shadowRadius: 2.22,
     elevation: 3,
   },
   profile_left: {
-      flexDirection: "row",
-      alignItems: "center",
+    flexDirection: 'row',
+    alignItems: 'center',
     flex: 3,
   },
 
@@ -48,7 +85,7 @@ const styles = StyleSheet.create({
     height: '100%',
     justifyContent: 'center',
     alignItems: 'center',
-      backgroundColor: R.colors.grey,
+    backgroundColor: R.colors.blue500,
   },
   avatar_text: {
     fontSize: R.fontsize.fontsSize16,
@@ -62,11 +99,11 @@ const styles = StyleSheet.create({
   },
   text_card_info: {
     fontSize: R.fontsize.fontsSize12,
-      fontWeight: "400",
+    fontWeight: '600',
     color: R.colors.black,
-      fontFamily: R.fonts.InterRegular,
+    fontFamily: R.fonts.InterMedium,
     numberOfLines: 1,
-      ellipsizeMode: "tail",
+    ellipsizeMode: 'tail',
   },
   profile_btn: {
     paddingVertical: 5,
@@ -75,16 +112,15 @@ const styles = StyleSheet.create({
     minHeight: 21,
     maxWidth: 108,
     borderRadius: 15,
-      flexDirection: "row",
+    flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
   },
   btn_text: {
     fontSize: R.fontsize.fontsSize10,
-      fontWeight: "400",
+    fontWeight: '400',
     color: R.colors.black,
     fontFamily: R.fonts.InterRegular,
-      
   },
   icon: {
     marginLeft: 5,
@@ -95,13 +131,37 @@ const styles = StyleSheet.create({
   menu_title: {
     color: R.colors.txtMain,
     fontSize: R.fontsize.fontsSize14,
-      fontWeight: "600",
+    fontWeight: '600',
     color: R.colors.black,
     fontFamily: R.fonts.InterMedium,
   },
   scroll: {
     flex: 1,
     marginTop: 35,
-    }
-  });
-  export default styles;
+  },
+
+  /* ---------------------------------- ITEM ---------------------------------- */
\ No newline at end of file
+  menu_item: {
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 5,
+    marginHorizontal: 5,
+    marginVertical: 5,
+    flex: 1,
+    maxWidth: '30%',
+    minHeight: '30%',
+  },
+  icon_container: {
+    width: 35,
+    height: 35,
+    backgroundColor: R.colors.white,
+  },
+  menu_text: {
+    fontSize: R.fontsize.fontsSize12,
+    fontWeight: '600',
+    color: R.colors.black,
+    fontFamily: R.fonts.InterMedium,
+    textAlign: 'center',
+  },
+});
+export default styles;

src/screens/home/view.js

@@ -20,6 +20,7 @@ import ItemGrid from './item';
 import styles from './style';
 import {useNavigation} from '@react-navigation/native';
 import * as SCREENNAME from '../../routers/ScreenNames';
+import TextSearchView from '../../components/Input/TextSearch/TextSearch';
 
 const HomeView = props => {
   const {
@@ -31,6 +32,7 @@ const HomeView = props => {
     userProfile,
     onMenuItemPress,
     onSearchChange,
+    onNavigationProfile,
   } = props;
 
   const ArrowRightIcon = R.images.icArrowRight;
@@ -80,8 +82,7 @@ const HomeView = props => {
 
       <TouchableOpacity
         style={styles.profile_btn}
-        onPress={() => navigate.navigate(SCREENNAME.PROFILE)}
-        activeOpacity={0.7}>
+        onPress={() => onNavigationProfile()}>
         <Text style={styles.btn_text}>Hồ sở cá nhân</Text>
         <ArrowRightIcon
           width={5}
@@ -110,13 +111,9 @@ const HomeView = props => {
     </View>
   );
 
+  const renderBodyView1 = () => {
     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]}>
@@ -128,10 +125,22 @@ const HomeView = props => {
             backgroundInput={R.colors.backgroundInputSearch}
             textLabel={I18n.t('Search')}
             textColorLabel={R.colors.white}
+            value={searchText}
+            onChangeText={onSearchChange}
           />
 
           {renderProfileCard()}
         </ImageBackground>
+      </>
+    );
+  };
+
+  const renderBody = () => {
+    return (
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        <View style={[{flex: 1}]}>
+          <View style={styles.container_body}>
+            {renderBodyView1()}
 
             <ScrollView
               showsVerticalScrollIndicator={false}
@@ -145,6 +154,13 @@ const HomeView = props => {
           </View>
         </View>
       </TouchableWithoutFeedback>
+    );
+  };
+
+  return (
+    <SafeAreaView style={styles.container_body}>
+      <StatusBar barStyle="light-content" translucent={false} />
+      {renderBody()}
     </SafeAreaView>
   );
 };

src/screens/training_program/style.js

+import { StyleSheet, Dimensions } from 'react-native'
+const { width, height } = Dimensions.get('window')
+
+const styles = StyleSheet.create({
+    container:{
+        flex: 1,
+        backgroundColor:'white'
+    },
+    body:{
+        flex: 1,
+        marginHorizontal: 15
+    }
+    
+})
+
+export default styles
\ No newline at end of file