Component

Info banner

A tinted, full-width banner in one of four severities, each with its own icon and color, with optional title, action button, and dismiss.

Standalone

Couldn't sync

We sent your changes, but haven't heard back yet. You can retry or wait a little longer.

info banner.tsx

<NativeInfoBanner
  variant="warning"
  title="Couldn't sync"
  message="We sent your changes, but haven't heard back yet. You can retry or wait a little longer."
  action={{ label: "Retry", onPress: () => {} }}
/>

Example

A warning with its retry action built directly into the banner, no separate button row beneath it.

Changes saved

Your changes were saved successfully.

Couldn't sync

We sent it, but haven't heard back yet.

info-banner-example.tsx

<NativeInfoBanner variant="success" title="Changes saved" message="Your changes were saved successfully." dismissible />
<NativeInfoBanner
  variant="warning"
  title="Couldn't sync"
  message="We sent it, but haven't heard back yet."
  action={{ label: "Retry", onPress: onRetry }}
/>

Capabilities

Prop	Type	Description
variant	NativeInfoBannerVariant	-
title	string	-
messagerequired	React.ReactNode	-
dismissible	boolean	-
action	{ label: string; onPress: () => void; color?: string }	-
className	string	-