Empty State

An icon, a title, an optional description and action button for empty lists and screens.

ReanimatedNativeWindSource

Prerequisites

Empty State needs an icon set for the optional glyph and Reanimated for its one-off entrance.


npx expo install @hugeicons/react-native react-native-reanimated

Install


npx @rslab/cli add empty-state

Usage


import { InboxIcon } from '@hugeicons/core-free-icons';

import { EmptyState } from '@/components/ui/EmptyState';



<EmptyState icon={InboxIcon} title="No messages" />



<EmptyState

  icon={InboxIcon}

  title="No messages"

  description="When you get a new message, it'll show up here."

/>

Add an action and it renders a Button underneath the description, the same button used everywhere else in your app:

<EmptyState
  icon={FolderLibraryIcon}

  title="No projects yet"

  description="Create your first project to get started."

  action={{ label: 'New project', onPress: () => router.push('/new') }}
/>

Props

PropTypeDefault

icon?

HugeIcon

-

Shown large and muted above the title, in a soft circular background.

title

string

-

The only required prop, everything else is optional.

description?

string

-

Supporting copy, centered and muted, wraps at roughly 30 characters per line.

action?

{ label: string; onPress: () => void }

-

Renders a secondary Button below the description.

className?

string

-

Extend or override the outer container.

How it works

Motion here is a courtesy, not a feature. On mount it fades in and rises 8px with a single withTiming, no spring, no repeat, no gesture. An empty state is usually the absence of content, so it shouldn't compete for attention, the entrance just softens the pop-in when a list finishes loading and swaps to this state.
The action button reuses Button, not a new one. The optional action renders <Button variant="secondary"> under the hood, so it inherits that component's press feedback and haptic for free. An empty state's button isn't a new interaction pattern, it's just a button.
The icon circle is muted on purpose. A neutral background with a dimmer neutral icon keeps the glyph present but visually quiet, it should read as "nothing here yet," not draw the eye the way an active icon would.
Everything but title is conditional. icon, description, and action are all optional, so the same component covers a bare "No results" line all the way up to a full empty-list-with-CTA state.

Tuning

the 8px rise and 280ms duration on mount, keep this subtle, it's meant to be felt more than seen
the icon circle size and glyph size, scale both together if you need a denser layout
swap variant="secondary" for outline on the underlying Button if the surrounding screen already has a strong secondary button elsewhere

See exactly how this works with an RSLAB subscription.

Get Pro

Empty State

Prerequisites

Install

Usage

Props

On this page