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.

Standalone

No items yetItems you add will appear in this list.

empty state.tsx

<NativeEmpty
  icon={<Tray size={48} weight="thin" />}
  title="No items yet"
  body="When something shows up here, you'll see it in this list."
  action={{ label: "Add item", 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	Optional icon above the title
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	-