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.
The primitive
Payment couldn't be confirmed
We sent it, but haven't heard back yet. You can retry or wait a little longer.
info banner.tsx
<NativeInfoBanner
variant="warning"
title="Payment couldn't be confirmed"
message="We sent it, but haven't heard back yet. You can retry or wait a little longer."
action={{ label: "Retry", onPress: () => {} }}
/>Example
An unconfirmed-payment warning with its retry action built directly into the banner, no separate button row beneath it.
Payment sent
Your payment is on its way.
Payment couldn't be confirmed
We sent it, but haven't heard back yet.
info-banner-example.tsx
<NativeInfoBanner variant="success" title="Payment sent" message="Your payment is on its way." dismissible />
<NativeInfoBanner
variant="warning"
title="Payment couldn't be confirmed"
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 | — |