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';
 
@@ -107,13 +107,31 @@ const Notification = (props) => {
     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 (
     <NotificationView 
       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,7 +31,7 @@ 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';
@@ -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>
     );
@@ -123,18 +129,24 @@ const NotificationView = props => {
               {item.time_send}
             </Text>
             <View style={styles.sizedBox}></View>
-        <Text style={[styles.text, {color: statusColor}]} numberOfLines={1} ellipsizeMode="tail">
+            <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>
-     
+            {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>
     );
   };
@@ -163,13 +175,27 @@ const NotificationView = props => {
   return (
     <View style={styles.safeArea}>
       <Header title={'Thông báo'} />
+      
+      <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>