A social-style activity feed

// Someone sends a friend request
export async function onFriendRequest(request, sender) {
  const notice = await ns.notifications.create(
    {
      audience: { type: "users", userIds: [request.toUserId] },
      category: "friends",
      contents: {
        en: { title: "{{data.name}} sent you a friend request" },
        de: { title: "{{data.name}} hat dir eine Freundschaftsanfrage geschickt" },
      },
      imageUrl: sender.avatarUrl,
      actionUrl: `acme://people/${sender.id}`,
      data: { type: "friend_request", requestId: request.id, name: sender.name },
    },
    { idempotencyKey: `friend-request:${request.id}` },
  );
  await db.friendRequests.update(request.id, { noticeId: notice.id });
}

import {
  type FeedItem,
  NotificationFeed,
  NotificationItem,
  useNotifications,
} from "@notificationstream/react-native";

export function NotificationsScreen() {
  return (
    <NotificationFeed
      renderItem={(item) =>
        item.data?.type === "friend_request" ? (
          <FriendRequestRow item={item} />
        ) : (
          <NotificationItem item={item} />
        )
      }
    />
  );
}

function FriendRequestRow({ item }: { item: FeedItem }) {
  const { archive } = useNotifications();
  const answer = async (accept: boolean) => {
    await api.answerFriendRequest(item.data?.requestId, accept); // your API
    await archive(item.id); // gone here at once; your backend cancels it everywhere
  };
  return (
    <RequestRow avatar={item.imageUrl} title={item.title} unread={!item.readAt}>
      <Button title="Confirm" onPress={() => answer(true)} />
      <Button title="Delete" onPress={() => answer(false)} />
    </RequestRow>
  );
}