Component

Notification banner

A frosted card that drops in from the top edge, dismissed by tap or after a short timeout. Any screen in the app can raise one.

Standalone

notification banner.tsx

const { showBanner } = useNativeBanner();

showBanner({
  app: "Tolbel",
  title: "New message",
  body: "Jordan Lee sent you a note.",
  icon: <Bell size={20} weight="fill" />,
});

Example

A screen raises the live banner from deep in the flow. It appears at the top of the screen and stacks vertically when several arrive in sequence.

Inbox

2 unread

Weekly summary

Ready to review

Design review

2h ago

notification-banner-example.tsx

<NativeNotificationBannerProvider>
  <InboxScreen onSimulate={() => showBanner({ ... })} />
</NativeNotificationBannerProvider>

Capabilities

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