EmptyState

Placeholder display for empty content areas with variant-specific icons and actions.

iOSAndroid

Preview EmptyState on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-empty-state

Usage

import { EmptyState } from '@/components/docyrus-native/empty-state';

<EmptyState variant="search" />

<EmptyState
  variant="default"
  title="No projects yet"
  description="Create your first project to get started."
  action={{ label: 'Create Project', onPress: () => {} }}
/>

API Reference

Prop	Type	Default	Description
`variant`	`'default' \| 'search' \| 'filter' \| 'error' \| 'offline' \| 'permission' \| 'empty-inbox' \| 'no-data'`	`'default'`	Preset variant with default icon, title, and description
`icon`	`ReactNode`	—	Custom icon to display (overrides variant emoji)
`title`	`string`	—	Custom title (overrides variant default)
`description`	`string`	—	Custom description (overrides variant default)
`action`	`EmptyStateAction`	—	Primary action button
`secondaryAction`	`EmptyStateAction`	—	Secondary action button (outline style)
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Component size
`animated`	`boolean`	`true`	Enable floating animation on the icon
`className`	`string`	—	Additional CSS classes
`accessibilityLabel`	`string`	—	Accessibility label override

EmptyStateAction

Prop	Type	Description
`label`	`string`	Button text
`onPress`	`() => void`	Button press handler

Translation Keys

Built-in copy is read through useUiTranslation() — provide these keys via <UiTranslationProvider>. Without a provider the English fallback is shown.

Key	English fallback	Used for
`ui.emptyState.defaultTitle`	No data available	Title (`title` prop wins); `no-data` uses `default`
`ui.emptyState.defaultDescription`	There's no data to display at this time.	Description (`description` prop wins)
`ui.emptyState.searchTitle`	No results found	Title (`title` prop wins); `no-data` uses `default`
`ui.emptyState.searchDescription`	Try adjusting your search terms or filters.	Description (`description` prop wins)
`ui.emptyState.filterTitle`	No matches	Title (`title` prop wins); `no-data` uses `default`
`ui.emptyState.filterDescription`	No items match your current filters.	Description (`description` prop wins)
`ui.emptyState.errorTitle`	Something went wrong	Title (`title` prop wins); `no-data` uses `default`
`ui.emptyState.errorDescription`	We encountered an error loading this content.	Description (`description` prop wins)
`ui.emptyState.offlineTitle`	You're offline	Title (`title` prop wins); `no-data` uses `default`
`ui.emptyState.offlineDescription`	Check your connection and try again.	Description (`description` prop wins)
`ui.emptyState.permissionTitle`	Access restricted	Title (`title` prop wins); `no-data` uses `default`
`ui.emptyState.permissionDescription`	You don't have permission to view this content.	Description (`description` prop wins)
`ui.emptyState.emptyInboxTitle`	Inbox zero!	Title (`title` prop wins); `no-data` uses `default`
`ui.emptyState.emptyInboxDescription`	You're all caught up. Great job!	Description (`description` prop wins)

Type Exports

Type	Description
`EmptyStateProps`	Props for EmptyState component
`EmptyStateVariant`	`'default' \| 'search' \| 'filter' \| 'error' \| 'offline' \| 'permission' \| 'empty-inbox' \| 'no-data'`
`EmptyStateSize`	`'sm' \| 'md' \| 'lg'`
`EmptyStateAction`	Action button configuration object