Component

Notification banner

A frosted card that drops in from the top edge to mimic a system push notification, dismissed by tap or after a short timeout, driven by a context hook rather than a singleton.

The primitive

notification banner.tsx

const { showBanner } = useNativeBanner();

showBanner({
  app: "Wallet",
  title: "Payment received",
  body: "$120.00 from Jordan Lee.",
  icon: <Bell size={20} weight="fill" />,
});

Example

An incoming deposit raises this the instant it clears, without needing the user to be looking at any particular screen.

notification-banner-example.tsx

const { showBanner } = useNativeBanner();

showBanner({
  app: "Wallet",
  title: "Transfer complete",
  body: "Your deposit of $450.00 has cleared.",
  icon: <Bell size={20} weight="fill" />,
});

Capabilities

Prop	Type	Description
titlerequired	string	—
body	string	—
icon	ReactNode	—
app	string	App name shown in small text at top
duration	number	—
onPress	() => void	—