EmptyState

EmptyState provides a consistent visual for screens or sections with no content. It includes an icon, title, subtitle, and optional action button.

Preview

Light Dark OLED

Global

☯No Readings YetCast your first hexagram to begin your journeyCast Hexagram

---

Variants

Full (Default)

Takes full available space, centered vertically.

Light Dark OLED

Global

📚Nothing SavedYour saved readings will appear here

Compact

For inline empty states within lists or sections.

Light Dark OLED

Global

🔎No ResultsTry a different search term

---

With Action

Light Dark OLED

Global

☯Start Your PracticeLearn the ancient wisdom of the I ChingBegin Learning

<EmptyState
  icon="☯"
  title="Start Your Practice"
  subtitle="Learn the ancient wisdom of the I Ching"
  actionLabel="Begin Learning"
  onAction={handleStartLearning}
/>

---

Common Use Cases

Light Dark OLED

Global

📋No History

🔍No Results

♡No Favorites

---

API Reference

Props

Prop	Type	Default	Description
icon	string	'☯'	Emoji or symbol to display
title	string	-	Main message
subtitle	string	-	Supporting text
actionLabel	string	-	Button text
onAction	() => void	-	Button press handler
compact	boolean	false	Use compact variant

Tokens Used

// Typography
theme.typography.fontFamily.serif  // Title font
theme.typography.fontSize.headlineS  // Title size (full)
theme.typography.fontSize.bodyL  // Title size (compact)

// Colors
theme.colors.gray300  // Title color
theme.colors.gray500  // Subtitle color
theme.colors.goldPrimary  // Action button

---

Accessibility

• Role: Container uses accessibilityRole="text"
• Title: Uses accessibilityRole="header"
• Action: Button has proper accessibilityRole="button" and accessibilityLabel

<EmptyState
  icon="📚"
  title="No Readings"
  subtitle="Your reading history will appear here"
  actionLabel="Cast First Reading"
  onAction={handleCast}
/>

---

Complete Example

import { EmptyState } from '@synchronicity/react-native';
import { View } from 'react-native';

function HistoryScreen({ readings }) {
  if (readings.length === 0) {
    return (
      <ScreenContainer>
        <EmptyState
          icon="☯"
          title="No Readings Yet"
          subtitle="Cast your first hexagram to begin your journey of self-discovery"
          actionLabel="Cast Hexagram"
          onAction={() => navigation.navigate('Cast')}
        />
      </ScreenContainer>
    );
  }

  return (
    <ScreenContainer>
      <FlatList
        data={readings}
        renderItem={({ item }) => <ReadingListItem reading={item} />}
      />
    </ScreenContainer>
  );
}