Skip to content
Native Animation
Notification Stack Expand animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add notification-stack-expand
Glass

Notification Stack Expand

A notification stack that unfolds grouped updates, with configurable groups, background image, fonts, and blur intensity.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this animation

A notification stack that unfolds grouped updates, with configurable groups, background image, fonts, and blur intensity.

How it works

  1. The component measures its own container and derives clock scale and group spacing from that layout.
  2. One continuous shared progress value drives the featured stack's depth, card placement, stagger, opacity, and the measured height of the group. A scrollable viewport keeps every notification reachable on compact screens.
  3. A gesture-exclusive pan and tap pair lets the same surface expand, collapse, or clear a card without relying on a JavaScript press event after a native drag.
  4. Each card owns an interruptible horizontal dismissal value; release springs back or reveals the Clear action before removing the item.
  5. push() inserts a new notification at the front of a group and gives it a short arrival spring from above.

Install

npx expo install @expo/vector-icons expo-blur expo-image expo-linear-gradient react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

import NotificationStackExpand from './NotificationStackExpand';

<NotificationStackExpand
  backgroundImage={require('./assets/lock-screen.jpg')}
  groups={groups}
/>;

For a branded integration, provide the catalog's font families and control the featured transition with a ref:

const ref = useRef<NotificationStackExpandRef>(null);

<NotificationStackExpand
  ref={ref}
  backgroundImage={backgroundImage}
  groups={groups}
  blurIntensity={52}
  fontFamily="YourRegularFont"
  mediumFontFamily="YourMediumFont"
  clockFontFamily="YourLightFont"
  monoFontFamily="YourMonoFont"
/>;

Props

PropTypeDefaultDescription
backgroundImageImageSourcePropTypeRequiredImage behind the lock-screen surface.
groupsNotificationGroup[]RequiredGroups and their ordered notifications.
timestring'9:41'Clock label.
datestring'Saturday, October 11'Date below the clock.
blurIntensitynumber52Glass blur intensity from 1 to 100.
fontFamilystringSystem fontNotification body typeface.
mediumFontFamilystringSystem fontApp names, headlines, and controls.
clockFontFamilystringSystem fontLight clock typeface.
monoFontFamilystringSystem fontRelative time labels.
onDismissNotification(groupId: string, notificationId: string) => void—Called after a card leaves.
onDismissGroup(groupId: string) => void—Called after the featured group leaves.
onExpandedChange(expanded: boolean) => void—Reports the featured group's state.
accessibilityLabelstring'Notification center'Screen-reader label for the notification area.
styleStyleProp<ViewStyle>—Outer container style.
testIDstring—Outer test identifier.

Compatibility

  • Expo SDK 58, React Native 0.88, Reanimated 4.7, Worklets 0.13.
  • iOS, Android, and web are supported by the implementation.
  • expo-blur uses BlurTargetView and dimezisBlurViewSdk31Plus on Android. Older Android versions retain the translucent glass fallback.
  • Works in Expo Go because all native dependencies are already part of this project.

Accessibility

Cards expose a readable label and a swipe hint. The expand/collapse controls have 44 pt hit areas and explicit button roles. With reduced motion enabled, the same state changes use short fades and remove travel, scale, and spring overshoot. Each front card has a 44 pt Clear button. Swiping a card also reveals a tappable Clear action, and screen readers expose a dismissal action. The group header has a tappable Clear group button. The front card toggles expansion; Show less collapses it.

Why this one

The familiar grouped-notification pattern becomes a product moment: a dark editorial lock screen, invented service brands, measured glass depth, and a single continuous expansion value keep the stack legible while the lower groups make room. The collapsed front card stays fully visible above two text-free glass layers at 96% and 92% scale, offset by 8 and 16 pt. Incoming updates spring in from above while the previous update joins the stack without duplicate text showing through. The clock shrinks from 64 to 44 pt as the list unfolds into a scrollable reading area.

Icons: Lucide-compatible Feather glyphs from the bundled kit, with the used Lucide paths copied to icons.ts.

Demo timeline

Each 5.2-second cycle expands at 620 ms, receives an Aster update at 1,800 ms, and collapses at 3,400 ms. Three realistic updates rotate between cycles; reset restores the initial groups before the next cycle so the demo stays bounded. The front card and the expanded header remain interactive throughout.

Layout and performance

The component measures its container with onLayout; 112 pt cards allow two headline lines and two body lines at the demo widths of 320 and 390 pt. A ScrollView sits below the clock and ends 20 pt above the container bottom. Cards use stable notification IDs and UI-thread spring values; React updates only when groups or expansion state change. Very large notification collections should use a virtualized implementation.

Customization notes

Set groups[].brand.gradient to theme each notification brand tile.

Movement follows gestures, scroll position, or interruptible spring physics. A global duration is not exposed; reduced-motion fades retain their short fixed timing.

More animations