NotificationStack

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-notification-stack

pnpm add react-native-gesture-handler react-native-reanimated react-native-worklets react-native-svg

The stack uses react-native-gesture-handler, so the app must be wrapped in <GestureHandlerRootView> (Expo Router apps already are).

Usage

import { NotificationStack } from '@/components/docyrus-native/notification-stack';
import type { NotificationItem } from '@/components/docyrus-native/notification-stack';

<NotificationStack
  notifications={unread}
  onDismiss={id => markAsRead(id)}
  onClick={id => openNotification(id)}
  onAction={(id, action) => runAction(id, action)}
  onLoadMore={() => fetchNextPage()}
/>

The top card is interactive; the cards behind it are scaled down (5 % per level), offset 10 px lower and faded (15 % per level), and the container reserves bottom padding for those offsets. Dismissing the top card:

• Swipe it left or right past 100 px, or fling it faster than 500 px/s — it rotates (±8°) and fades while dragged, then flies out. A shorter swipe springs back. Vertical drags are ignored so a parent ScrollView keeps scrolling.
• Skip it with the ✕ button in its top-right corner.
• Act on it — pressing an action button fires the action's onClick, then onAction, then dismisses the card.

Every dismissal calls onDismiss(id). The stack tracks dismissed ids internally, so it works without removing items from notifications. When the remaining cards drop to loadMoreThreshold, onLoadMore fires once; it re-arms after more notifications arrive. New cards enter with a fade-down, dismissed ones leave with a fade-right (Reanimated layout animations).

Single card

import { NotificationStackCard } from '@/components/docyrus-native/notification-stack';

<NotificationStackCard
  notification={notification}
  onDismiss={id => remove(id)}
  onAction={(id, action) => handle(id, action)}
/>

API Reference

NotificationStackProps

NotificationStackCardProps

Components

Type Exports

Breaking changes