A React Native empty-state view with icon, title, description, and action for guiding mobile users.
import { EmptyState } from 'heroui-native-pro';<EmptyState>
<EmptyState.Header>
<EmptyState.Media>...</EmptyState.Media>
<EmptyState.Title>...</EmptyState.Title>
<EmptyState.Description>...</EmptyState.Description>
</EmptyState.Header>
<EmptyState.Content>...</EmptyState.Content>
</EmptyState>disable-all to animated descendants. Sub-components are fully optional.Media, Title, and Description in a centered column.variant="default" (render as-is) and variant="icon" (circular muted surface).icon variant when the active theme registers default background content (e.g. glass). Replace or remove it via the background prop.accessibilityRole="header".Compose a header with title and description for a minimal empty state.
<EmptyState>
<EmptyState.Header>
<EmptyState.Title>Inbox zero</EmptyState.Title>
<EmptyState.Description>...</EmptyState.Description>
</EmptyState.Header>
</EmptyState>Use variant="icon" to wrap the media in a circular muted surface.
<EmptyState>
<EmptyState.Header>
<EmptyState.Media variant="icon">
<BellIcon size={20} />
</EmptyState.Media>
<EmptyState.Title>No notifications yet</EmptyState.Title>
<EmptyState.Description>...</EmptyState.Description>
</EmptyState.Header>
</EmptyState>Add an action area below the header with EmptyState.Content.
<EmptyState>
<EmptyState.Header>
<EmptyState.Title>No matches found</EmptyState.Title>
<EmptyState.Description>...</EmptyState.Description>
</EmptyState.Header>
<EmptyState.Content>
<Button variant="outline">Clear search</Button>
</EmptyState.Content>
</EmptyState>Use variant="default" (the default) to render media content as-is, such as an avatar or stacked avatars.
<EmptyState>
<EmptyState.Header>
<EmptyState.Media>
<Avatar>...</Avatar>
</EmptyState.Media>
<EmptyState.Title>User is offline</EmptyState.Title>
<EmptyState.Description>...</EmptyState.Description>
</EmptyState.Header>
<EmptyState.Content>
<Button variant="secondary">Leave message</Button>
</EmptyState.Content>
</EmptyState>Apply a dashed border on the root to render an outlined empty state.
<EmptyState className="rounded-2xl border border-dashed border-border">
<EmptyState.Header>
<EmptyState.Media variant="icon">
<RocketIcon size={20} />
</EmptyState.Media>
<EmptyState.Title>Start your first automation</EmptyState.Title>
<EmptyState.Description>...</EmptyState.Description>
</EmptyState.Header>
<EmptyState.Content>
<Button size="sm" variant="outline">
Get started
</Button>
</EmptyState.Content>
</EmptyState>import { Button } from 'heroui-native';
import { EmptyState } from 'heroui-native-pro';
import { View } from 'react-native';
import { BellIcon } from './icons/bell';
export default function EmptyStateExample() {
return (
<View className="flex-1 items-center justify-center px-5">
<EmptyState>
<EmptyState.Header>
<EmptyState.Media variant="icon">
<BellIcon size={20} colorClassName="accent-default-foreground" />
</EmptyState.Media>
<EmptyState.Title>No notifications yet</EmptyState.Title>
<EmptyState.Description>
Stay in the loop by enabling push alerts for account activity and
reminders.
</EmptyState.Description>
</EmptyState.Header>
<EmptyState.Content className="w-full gap-2.5">
<Button className="w-full max-w-xs">Enable notifications</Button>
<Button className="w-full max-w-xs" variant="outline">
Settings
</Button>
</EmptyState.Content>
</EmptyState>
</View>
);
}| prop | type | default | description |
|---|---|---|---|
children | React.ReactNode | - | Compound parts rendered inside the empty state container |
className | string | - | Additional CSS classes for the root container |
animation | EmptyStateRootAnimation | - | Animation configuration for the empty state root (cascades to animated descendants) |
...ViewProps | ViewProps | - | All standard React Native View props are supported |
Animation configuration for the EmptyState root. Can be:
"disable-all": Disable all animations including children (cascades down through AnimationSettingsProvider)undefined: Use default animations| prop | type | default | description |
|---|---|---|---|
children | React.ReactNode | - | Header content (media, title, description) |
className | string | - | Additional CSS classes for the header wrapper |
...ViewProps | ViewProps | - | All standard React Native View props are supported |
| prop | type | default | description |
|---|---|---|---|
children | React.ReactNode | - | Media content to render (icon, avatar, etc.) |
variant | EmptyStateMediaVariant | 'default' | Media visual treatment |
className | string | - | Additional CSS classes for the media container |
background | React.ReactNode | - | Background layer behind the icon media circle. undefined renders the theme-aware default for the icon variant; custom node replaces it; null removes it |
...ViewProps | ViewProps | - | All standard React Native View props are supported |
| type | description |
|---|---|
'default' | 'icon' | default renders media as-is. icon wraps it in a circular muted surface |
Absolute-fill container rendered behind the icon media circle. With no children, the active library theme decides the default content (e.g. a glass blur layer); pass children to host custom content with the same positioning and clipping.
| prop | type | default | description |
|---|---|---|---|
children | React.ReactNode | - | Custom content inside the background container |
className | string | - | Additional CSS classes |
...ViewProps | ViewProps | - | All standard React Native View props are supported |
| prop | type | default | description |
|---|---|---|---|
children | React.ReactNode | - | Title text content |
className | string | - | Additional CSS classes for the title text |
...TextProps | TextProps | - | All standard React Native Text props are supported |
| prop | type | default | description |
|---|---|---|---|
children | React.ReactNode | - | Description text content |
className | string | - | Additional CSS classes for the description text |
...TextProps | TextProps | - | All standard React Native Text props are supported |
| prop | type | default | description |
|---|---|---|---|
children | React.ReactNode | - | Action content rendered below the header |
className | string | - | Additional CSS classes for the action container |
...ViewProps | ViewProps | - | All standard React Native View props are supported |