Toast Stack

A dark glass notification stack that fans open with depth, glows on arrival, and dismisses with physical swipes.

Why this one

Most toast demos repeat one generic alert and flatten every notification into the same card. This stack gives payment, message, upload, error, and undo states distinct content while keeping one coherent material. Three compact cards recede through scale and live blur; tapping reveals the full queue at an exact 8 pt rhythm while the app content springs clear and dims, and velocity-projected swipes make dismissal feel direct rather than scripted.

How it works

1. ToastProvider owns the queue, timers, expansion progress, and public API.
2. Every card derives its compact depth, blur, and expanded 8 pt spacing from one shared progress value.
3. A pan gesture applies elastic resistance, projects release velocity, and springs the card offscreen or home.
4. The same expansion progress dims and moves app content below the readable queue, while BlurView, a one-point gradient edge, and a short-lived colored glow create the material.
5. Reduced Motion swaps spatial springs for short fades and keeps every gesture available through buttons.

Install

npx expo install expo-blur expo-linear-gradient react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

import { ToastProvider, useToast } from './toast-stack';

function SaveButton() {
  const toast = useToast();

  return (
    <Button
      title="Save"
      onPress={() =>
        toast.show({
          title: 'Payment received',
          message: '$184.00 was added to your balance',
          type: 'success',
        })
      }
    />
  );
}

export default function Screen() {
  return (
    <ToastProvider>
      <SaveButton />
    </ToastProvider>
  );
}

With personality knobs and an action:

<ToastProvider
  duration={7000}
  maxVisible={5}
  fontFamily="Geist_400Regular"
  titleFontFamily="Geist_500Medium"
  hostStyle={{ top: 72 }}
  expandedContentOffset={360}
>
  <AppContent />
</ToastProvider>

toast.show({
  title: 'Export couldn’t finish',
  message: 'Your timeline is safe.',
  type: 'error',
  actionLabel: 'Retry',
  onAction: retryExport,
});

Props

ToastProvider

ToastInput

ToastProviderRef and useToast() expose show, dismiss, dismissAll, expand, and collapse.

Compatibility

• Expo SDK 57
• React Native 0.86
• Reanimated 4.5 and Worklets 0.10
• iOS: unverified on a physical device
• Android: unverified on a physical device; native blur uses the SDK 31+ renderer and falls back to the translucent surface on older versions
• Web: verified
• Included modules work in Expo Go

Accessibility

Cards announce their title and message, actions and dismiss controls have explicit button labels, and tapping a card is an alternative to the expansion gesture. Reduced Motion replaces entrance and fan movement with short fades while preserving content and controls.