The Notifications List module is designed to present and manage user notifications in a modal interface. The NotificationsList component displays notifications in a sorted order—with pinned items prioritized—and offers options to mark notifications as read, pin, or delete them.
Below is a snippet from the NotificationsList.tsx file demonstrating key aspects of its implementation:
tsx
import React, { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity, Modal, useColorScheme, ActionSheetIOS } from 'react-native';
import { Colors } from '@/constants/Colors';
import { Ionicons } from '@expo/vector-icons';
import { useNotification } from './notificationManager';
// ... additional imports
export const NotificationsList = ({ isVisible, onClose }) => {
const { notifications, markAllAsRead, clearAllNotifications } = useNotification();
const colorScheme = useColorScheme();
const colors = Colors.default[colorScheme ?? 'light'];
// Sort notifications: pinned notifications first, then most recent
const sortedNotifications = [...notifications].sort((a, b) => {
if (a.pinned && !b.pinned) return -1;
if (!a.pinned && b.pinned) return 1;
return b.timestamp - a.timestamp;
});
return (
<Modal visible={isVisible} animationType="slide" transparent onRequestClose={onClose}>
<View style={{ paddingTop: insets.top }}>
<View style={{ backgroundColor: colors.background }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 16 }}>
<Text style={{ fontSize: 20, fontWeight: 'bold', color: colors.text }}>Notifications</Text>
<TouchableOpacity onPress={markAllAsRead}>
<Text style={{ color: colors.primary }}>Mark all as read</Text>
</TouchableOpacity>
<TouchableOpacity onPress={clearAllNotifications}>
<Text style={{ color: colors.error }}>Clear all</Text>
</TouchableOpacity>
</View>
<ScrollView>
{sortedNotifications.map(notification => (
<TouchableOpacity key={notification.id} onPress={() => handleNotificationPress(notification)}>
<Text style={{ color: colors.text }}>{notification.title}</Text>
<Text style={{ color: `${colors.text}80` }}>{notification.message}</Text>
</TouchableOpacity>
))}
</ScrollView>
</View>
</View>
</Modal>
);
};