TODO: Đã hoàn thiện kiểu thông báo để xem

src/screens/notification/index.js

-import React from 'react';
+import React, { useState } from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import NotificationView from './view';
 
 const Notification = (props) => {
+  //Xử lý tabView
+    const dataListTabView = [
+    { key: "All", title: "Tất cả" },
+    { key: "Study", title: "Học tập" },
+    { key: "Activity", title: "Hoạt động" },
+    { key: "Tuition", title: "Học phí" },
+  ];
+  const [activeTab, setActiveTab] = useState("All");
+  const [dataNotifi, setDataNotifi] = useState({
+    All: [
+      {
+        title_notifi: 'Thông báo nghỉ học',
+        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
+        time: '14/4/2024'
+      },
+      {
+        title_notifi: 'Thông báo nghỉ học',
+        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
+        time: '14/4/2024'
+      },
+      {
+        title_notifi: 'Thông báo nghỉ học',
+        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
+        time: '14/4/2024'
+      },
+      {
+        title_notifi: 'Thông báo nghỉ học',
+        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
+        time: '14/4/2024'
+      },
+      {
+        title_notifi: 'Thông báo nghỉ học',
+        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
+        time: '14/4/2024'
+      },
+      {
+        title_notifi: 'Thông báo nghỉ học',
+        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
+        time: '14/4/2024'
+      },
+      {
+        title_notifi: 'Thông báo nghỉ học',
+        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
+        time: '14/4/2024'
+      },
+      {
+        title_notifi: 'Thông báo nghỉ học',
+        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
+        time: '14/4/2024'
+      },
+      {
+        title_notifi: 'Thông báo nghỉ học',
+        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
+        time: '14/4/2024'
+      },
+      {
+        title_notifi: 'Thông báo nghỉ học',
+        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
+        time: '14/4/2024'
+      },
+      {
+        title_notifi: 'Thông báo nghỉ học',
+        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
+        time: '14/4/2024'
+      },
+    ],
+    Study: [],
+    Activity: [],
+    Tuition: [],
+  });
+  const handleTabChange = (tabKey) => {
+    setActiveTab(tabKey);
+  };
+  const getEmptyMessage = (tabKey) => {
+      const messages = {
+        All: "Chưa có thông báo nào",
+        Study: "Chưa có thông báo học tập",
+        Activity: "Chưa có thông báo hoạt động",
+        Tuition: "Chưa có thông báo học phí",
+      };
+      return messages[tabKey] || "Không có dữ liệu";
+    };
+
+  const [searchText, setSearchText] = useState('');
+  const handleSearchChange = (text) => {
+    setSearchText(text);
+  };
+  
+
   return (
-    <NotificationView />
+    <NotificationView 
+      dataTitleListTabView={dataListTabView}
+      activeTab={activeTab}
+      onTabChange={handleTabChange}
+      dataNotifi={dataNotifi}
+      getEmptyMessage={getEmptyMessage}
+      searchText={searchText}
+      onSearchChange={handleSearchChange}
+    />
   );
 };
 

src/screens/notification/style.js

 import { StyleSheet, Platform } from 'react-native'
+import R from '../../assets/R';
 const styles = StyleSheet.create({
     safeArea:{
         flex:1,
+        backgroundColor:R.colors.white,
+    },
+    //TabView
+    tabButtonItem:{
+        paddingHorizontal:Platform.OS === 'ios' ? 10 : 5,
+        paddingVertical:Platform.OS === 'ios' ? 5 : 2,
+        minWidth:Platform.OS === 'ios' ? 70 : 80,
+        backgroundColor:R.colors.grayButton,
+        borderRadius:10,
+        marginHorizontal:5,
+        alignItems:'center',
+        justifyContent:'center',
+    },
+    tabButtonActiveItem:{
+        backgroundColor:R.colors.blue,
+        color:R.colors.white,
+    },
+    tabButtonContainer:{
+        flexDirection:'row',
+        alignItems:'center',
+        justifyContent:'center',
+        marginVertical:2,
+        marginHorizontal:15,
+    },
+    textTabView:{
+        color:R.colors.white,
+        fontSize:R.sizes.sm,
+        fontWeight:'500',
+        fontFamily:R.fonts.fontSemiBold,
+    },
+    containerBody:{
+        marginHorizontal:15,
+        flex:1,
+        justifyContent:'center',
+    },
+    //InputText
+    containerSearchBox:{
+        borderColor:R.colors.grayBorderInputTextHeader,
+        borderWidth:1,
+        borderRadius:100,
+        marginVertical:10,
+        backgroundColor:R.colors.white,
+        flexDirection:'row',
+        maxHeight:41,
+        alignItems:'center',
+        justifyContent:'center',
+    },
+    boxIconSearch:{
+        maxWidth:35,
+        maxHeight:35,
+        alignItems:'center',
+        justifyContent:'center',
+        marginHorizontal:5,
+    },
+    inputSearch:{
+        fontSize:R.sizes.sm,
+        fontFamily:R.fonts.fontMedium,
+        fontWeight:'500',
+        flex:1,
+    },
+    //List Notification
+    containerListNotification:{
+        
+    },
+    cardItem:{
+        paddingVertical:10,
+        paddingHorizontal:15,
+        borderWidth:1,
+        borderColor:R.colors.grayBorderInputTextHeader,
+        borderRadius:10,
+        marginVertical:10,
+        backgroundColor:R.colors.white,
+        shadowColor:R.colors.black,
+        shadowOffset:{width:0.5,height:2},
+        shadowOpacity:0.25,
+        shadowRadius:5,
+        elevation:1,
+    },
+    containerEmpty:{
+        alignItems:'center',
+        justifyContent:'center',
+    },
+    text:{
+        fontSize:R.sizes.sm,
+        fontWeight:'400',
+        fontFamily:R.fonts.fontRegular,
+    },
+    textEmpty:{
+        color:R.colors.black,
+        fontSize:R.fontsize.fontSizeSubTitle,
+        fontWeight:'500',
+        fontFamily:R.fonts.fontMedium,
+    },
+    
     
-    }
 })
+export default styles;
\ No newline at end of file

src/screens/notification/view.js

 import React from 'react';
-import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  FlatList,
+  Image,
+  TextInput,
+} from 'react-native';
 import Header from '../../components/Header/Header';
-import styles from '../home/style';
-const NotificationView = (props) => {
-  const {  } = props;
+import styles from './style';
+import R from '../../assets/R';
+const NotificationView = props => {
+  const {
+    dataTitleListTabView,
+    activeTab,
+    onTabChange,
+    dataNotifi,
+    getEmptyMessage,
+    searchText,
+    onSearchChange,
+  } = props;
+
+  //TabView
+  const renderTabViewItem = ({item}) => {
+    const isActivity = activeTab === item.key;
+    return (
+      <TouchableOpacity
+        style={[styles.tabButtonItem, isActivity && styles.tabButtonActiveItem]}
+        onPress={() => onTabChange(item.key)}>
+        <Text style={styles.textTabView}>{item.title}</Text>
+      </TouchableOpacity>
+    );
+  };
+  const renderListTabView = () => {
+    return (
+      <View style={styles.tabButtonContainer}>
+        <FlatList
+          data={dataTitleListTabView}
+          renderItem={renderTabViewItem}
+          horizontal
+          keyExtractor={(item, index) => `${activeTab}-${index}`}
+          showsHorizontalScrollIndicator={false}
+        />
+      </View>
+    );
+  };
+  //Search
+  const renderSearchBox = () => {
+    return (
+      <View style={styles.containerSearchBox}>
+        <View style={styles.boxIconSearch}>
+          <Image
+            source={R.images.icSearchHeader}
+            maxWidth={Platform.OS === 'ios' ? 16: 20}
+            maxHeight={Platform.OS === 'ios' ? 16 : 20}
+            resizeMode="contain"
+            tintColor={R.colors.gray}
+          />
+        </View>
+        <TextInput
+          placeholder="Tìm kiếm"
+          value={searchText}
+          onChangeText={onSearchChange}
+          placeholderTextColor={R.colors.gray}
+          color={R.colors.black}
+          style={styles.inputSearch}
+        />
+      </View>
+    );
+  };
+  //List Notification
+  const renderNotificationItem = ({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.time}</Text>
+
+      </View>
+    );
+  };
+  const renderListNotification = () => {
+    return (
+        <FlatList
+          data={dataNotifi[activeTab] || []}
+          renderItem={renderNotificationItem}
+          keyExtractor={(item, index) => `${activeTab}-${index}`}
+          showsVerticalScrollIndicator={false}
+          vertical
+        />
+    );
+  };
+  //Empty
+  const renderItemEmpty = () => {
+    return (
+      <View style={styles.containerEmpty}>
+        <Image source={R.images.icNoData} maxWidth={50} maxHeight={50} />
+        <Text style={styles.textEmpty}>{getEmptyMessage(activeTab)}</Text>
+      </View>
+    );
+  };
   return (
     <View style={styles.safeArea}>
-        <Header title={'Thông báo'}/>
+      <Header title={'Thông báo'} />
+      {renderListTabView()}
+      <View style={styles.containerBody}>
+      {(dataNotifi[activeTab] && dataNotifi[activeTab].length > 0) && renderSearchBox()}
       
+      {dataNotifi[activeTab].length === 0 ? renderItemEmpty(): renderListNotification()}
+      </View>
     </View>
   );
 };