Component
Empty state
A centered icon, title, and optional body copy, with up to two call-to-action buttons, shown wherever a list or screen has nothing in it yet.
The primitive
No transactions yetOnce you send or receive a payment, it will show up here.
empty state.tsx
<NativeEmpty
icon={<Tray size={48} weight="thin" />}
title="No transactions yet"
body="Once you send or receive a payment, it will show up here."
action={{ label: "Send a payment", onPress: () => {} }}
/>Example
Fills the space where search results would normally render, when a query turns up nothing.
No resultsTry a different search term.
empty-example.tsx
<NativeEmpty
icon={<Tray size={40} weight="thin" />}
title="No results"
body="Try a different search term."
secondaryAction={{ label: "Clear search", onPress: onClearSearch }}
/>Capabilities
| Prop | Type | Description |
|---|---|---|
| icon | React.ReactNode | SF Symbol-style icon (any ReactNode — use lucide or img) |
| titlerequired | string | — |
| body | string | — |
| action | { | Primary CTA |
| labelrequired | string | — |
| onPressrequired | () => void | — |
| variant | "primary" | "tinted" | "plain" | "secondary" | "destructive" | — |
| secondaryAction | { | Secondary CTA |
| labelrequired | string | — |
| onPressrequired | () => void | — |
| className | string | — |