Empty State

Display

A centred layout for empty lists or zero-data screens. Combines an icon, title, description, and an optional call-to-action.

GitHub

Installation

bash

npx native-mate add empty-state

Examples

#FAFAFA

Radius100%

Usage

tsx

import { EmptyState } from '~/components/ui/empty-state'
import { InboxIcon } from 'lucide-react-native'

<EmptyState
  icon={<InboxIcon size={48} color="#71717a" />}
  title="No messages yet"
  description="When you receive messages they will appear here."
  action={{ label: 'Compose message', onPress: handleCompose }}
/>

Props

Prop	Type	Default	Description
icon	React.ReactNode	—	Illustration or icon displayed at the top.
title	string	—	Primary heading text.
description	string	—	Secondary body text explaining the empty state.
action	{ label: string; onPress: () => void }	—	Optional call-to-action button configuration.

Example

tsx

import { EmptyState } from '~/components/ui/empty-state'
import { SearchX } from 'lucide-react-native'
import { View } from 'react-native'
import { useRouter } from 'expo-router'

export function EmptyStateExample() {
  const router = useRouter()

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 32 }}>
      <EmptyState
        icon={<SearchX size={56} color="#52525b" />}
        title="No results found"
        description="We couldn't find anything matching your search. Try adjusting your filters or search term."
        action={{ label: 'Clear filters', onPress: () => router.setParams({ q: '' }) }}
      />
    </View>
  )
}

Tag

Alert