Notification Banner

Pro

In-app notification banner that glows in from the top of the screen and fades away on its own. New banners stack neatly; tap to open them as a list, swipe one away, or reply right from it.

Preview

TSX components/ui/notification-banner/notification-banner.tsx

Pro source · 1,034 lines

Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/notification-banner writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.

See Pro

Upgrade to Pro

TSX example.tsx

import { NotificationBanner } from "@/components/ui/notification-banner/notification-banner";

export function Example() {
  return (
    <NotificationBanner />
  );
}

Installation

npx @lumioui/cli add pro/notification-banner

Install the dependencies
npx expo install react-native-reanimated react-native-svg react-native-gesture-handler react-native-safe-area-context expo-haptics
Add the components it builds on
animated-number glass icon
Copy the source from the Code tab into your project
components/ui/notification-banner/notification-banner.tsxcomponents/ui/notification-banner/index.ts
Icons it renders
message-circle x chevron-up
Update the import paths to match your project setup.

Usage

import { NotificationStack, useNotificationBanner, NotificationBanner } from "@/components/ui/notification-banner/notification-banner";

<NotificationBanner />

Also exported: NotificationStack, useNotificationBanner.

API reference

`NotificationStack`

Prop Type Default

items* NotificationItem[]

Newest first.

—

onRemove* (id: string) => void

Called once a banner has finished leaving — drop it from items.

—

onDismissAll () => void

"Clear all" in the open list. Omit to hide the button.

—

maxVisible number

Banners visible in the gathered stack. Default 3.

3

placement "overlay" | "inline"

"overlay" floats over the screen from the top (default); "inline" sits in flow and reserves its height.

"overlay"

className string —