TODO: Đã fix giao diện thành search thành công

src/screens/notification/index.js

-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import NotificationView from './view';
 
@@ -106,6 +106,24 @@ const Notification = (props) => {
   const handleSearchChange = (text) => {
     setSearchText(text);
   };
+
+  const fitlerSearch = useMemo(() => {
+    const list = dataNotifi[activeTab] || [];
+    if (!searchText.trim()) return list;
+
+    const searchLower = searchText.toLowerCase();
+    
+    return list.filter( item =>{
+      if (item.title_notifi) {
+        return item.title_notifi.toLowerCase().includes(searchLower)
+      }
+      if (item.title_notifi_tuition) {
+        return item.title_notifi_tuition.toLowerCase().includes(searchLower)
+      }
+      return false;
+    });
+      
+  }, [dataNotifi, activeTab, searchText])
   
 
   return (
@@ -113,7 +131,7 @@ const Notification = (props) => {
       dataTitleListTabView={dataListTabView}
       activeTab={activeTab}
       onTabChange={handleTabChange}
-      dataNotifi={dataNotifi}
+      dataNotifi={{[activeTab]:fitlerSearch}}
       getEmptyMessage={getEmptyMessage}
       searchText={searchText}
       onSearchChange={handleSearchChange}

src/screens/notification/style.js

@@ -46,8 +46,6 @@ const styles = StyleSheet.create({
         backgroundColor:R.colors.white,
         flexDirection:'row',
         maxHeight:41,
-        alignItems:'center',
-        justifyContent:'center',
     },
     boxIconSearch:{
         maxWidth:35,
@@ -62,6 +60,13 @@ const styles = StyleSheet.create({
         fontWeight:'500',
         flex:1,
     },
+    
+    // boxSearch:{
+    //     position:'relative',
+    //     top:0, 
+    //     right:0, 
+    //     left:0,
+    // },
     //List Notification
     containerListNotification:{
         paddingVertical:15,

src/screens/notification/view.js

@@ -31,14 +31,14 @@ const NotificationView = props => {
     }
   };
   //Xử lý màu trạng thái khi ở tab view
-  const getStatusColor = (status) => {
+  const getStatusColor = status => {
     switch (status) {
       case 'Đã gửi':
-        return R.colors.green || '#4CAF50'; 
+        return R.colors.green || '#4CAF50';
       case 'Chưa gửi':
-        return R.colors.brown || '#8D6E63'; 
+        return R.colors.brown || '#8D6E63';
       default:
-        return R.colors.gray || '#9E9E9E'; 
+        return R.colors.gray || '#9E9E9E';
     }
   };
   //TabView
@@ -72,7 +72,7 @@ const NotificationView = props => {
         <View style={styles.boxIconSearch}>
           <Image
             source={R.images.icSearchHeader}
-            maxWidth={Platform.OS === 'ios' ? 16: 20}
+            maxWidth={Platform.OS === 'ios' ? 16 : 20}
             maxHeight={Platform.OS === 'ios' ? 16 : 20}
             resizeMode="contain"
             tintColor={R.colors.gray}
@@ -93,10 +93,16 @@ const NotificationView = props => {
   const renderNotificationItemView = ({item}) => {
     return (
       <View style={styles.cardItem}>
-        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.title_notifi}</Text>
-        <Text style={styles.text} numberOfLines={2} ellipsizeMode="tail">{item.message}</Text>
+        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">
+          {item.title_notifi}
+        </Text>
+        <Text style={styles.text} numberOfLines={2} ellipsizeMode="tail">
+          {item.message}
+        </Text>
         <View style={styles.boxTimeView}>
-        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.time}</Text>
+          <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">
+            {item.time}
+          </Text>
         </View>
       </View>
     );
@@ -107,48 +113,54 @@ const NotificationView = props => {
     return (
       <TouchableOpacity style={[styles.cardItem, styles.cardItemTution]}>
         <View style={styles.boxLeft}>
-        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">
-          <Text style={styles.text}>Tiêu đề: </Text>
-          {item.title_notifi_tuition}
-        </Text>
-
-        <Text style={styles.text} numberOfLines={2} ellipsizeMode="tail">
-          <Text style={styles.text}>Ngày tạo: </Text>
-          {item.date_create}
-        </Text>
+          <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">
+            <Text style={styles.text}>Tiêu đề: </Text>
+            {item.title_notifi_tuition}
+          </Text>
 
-        <View style={styles.boxTimeTution}>
-        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">
-          <Text style={styles.text}>Thời gian gửi: </Text>
-          {item.time_send}
-        </Text>
-        <View style={styles.sizedBox}></View>
-        <Text style={[styles.text, {color: statusColor}]} numberOfLines={1} ellipsizeMode="tail">
-           {item.status}
+          <Text style={styles.text} numberOfLines={2} ellipsizeMode="tail">
+            <Text style={styles.text}>Ngày tạo: </Text>
+            {item.date_create}
           </Text>
-        </View>
 
-        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">
-          <Text style={styles.text}>Loại thông báo: </Text>
-          {item.style}</Text>
-     
+          <View style={styles.boxTimeTution}>
+            <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">
+              <Text style={styles.text}>Thời gian gửi: </Text>
+              {item.time_send}
+            </Text>
+            <View style={styles.sizedBox}></View>
+            <Text
+              style={[styles.text, {color: statusColor}]}
+              numberOfLines={1}
+              ellipsizeMode="tail">
+              {item.status}
+            </Text>
+          </View>
+
+          <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">
+            <Text style={styles.text}>Loại thông báo: </Text>
+            {item.style}
+          </Text>
         </View>
-          <Image source={R.images.icNext} resizeMode="contain" style={{width: 10, height: 15, alignSelf:'center'}} />
-    
+        <Image
+          source={R.images.icNext}
+          resizeMode="contain"
+          style={{width: 10, height: 15, alignSelf: 'center'}}
+        />
       </TouchableOpacity>
     );
   };
 
   const renderListNotification = () => {
     return (
-        <FlatList
-          data={dataNotifi[activeTab] || []}
-          renderItem={getRenderItemFunction()}
-          keyExtractor={(item, index) => `${activeTab}-${index}`}
-          showsVerticalScrollIndicator={false}
-          contentContainerStyle={styles.containerListNotification}
-          vertical
-        />
+      <FlatList
+        data={dataNotifi[activeTab] || []}
+        renderItem={getRenderItemFunction()}
+        keyExtractor={(item, index) => `${activeTab}-${index}`}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.containerListNotification}
+        vertical
+      />
     );
   };
   //Empty
@@ -163,13 +175,27 @@ const NotificationView = props => {
   return (
     <View style={styles.safeArea}>
       <Header title={'Thông báo'} />
-      {renderListTabView()}
+      
+      <View>
+       {renderListTabView()}
+
+      {renderSearchBox()}
+      </View>
+      
       <View style={styles.containerBody}>
-      {(dataNotifi[activeTab] && dataNotifi[activeTab].length > 0) && renderSearchBox()}
-      {dataNotifi[activeTab].length === 0 ? renderItemEmpty(): renderListNotification()}
+
+
+        {/* {(dataNotifi[activeTab] && dataNotifi[activeTab].length > 0) && renderSearchBox()} */}
+
+  {dataNotifi[activeTab].length === 0
+          ? renderItemEmpty()
+          : renderListNotification()}
+      
       </View>
       <View style={styles.containerFooter}>
-        <TouchableOpacity style={styles.btnFooter} onPress={() => navigate.navigate(SCREENNAME.PROFILE)}>
+        <TouchableOpacity
+          style={styles.btnFooter}
+          onPress={() => navigate.navigate(SCREENNAME.PROFILE)}>
           <Text style={styles.textBtnFooter}>Tạo thông báo mới</Text>
         </TouchableOpacity>
       </View>