ReadingListItem

ReadingListItem displays a reading entry in lists with hexagram visual, animated transitions for changing lines, and context menu support.

Preview

Light Dark OLED

Global

1. 乾 · QiánThe Creative

Today

›

---

With Changing Lines

When a reading has changing lines, the item shows animated transitions between current and future hexagrams.

Light Dark OLED

Global

1. 乾 · Qián →The Creative

Yesterday

›

<ReadingListItem
  reading={{
    hexagramNumber: 1,
    hexagramName: "The Creative",
    changingLines: [2, 4],
    futureHexagram: 44,
    timestamp: Date.now(),
  }}
  onPress={handlePress}
/>

---

Anatomy

Light Dark OLED

Global

1

1. 乾 · QiánThe Creative

2

Today3

›4

Element	Description
1. Hexagram Visual	Tiny hexagram with optional changing line indicators
2. Reading Info	Number, Chinese name, pinyin, English name
3. Meta	Relative date (Today, Yesterday, or date)
4. Chevron	Navigation indicator

---

Animation Behavior

For readings with changing lines, text and hexagram visuals animate in sync:

1. Current state fades out and slides left
2. Future state fades in and slides from right
3. Animations loop continuously using shared Animated.Value

This creates a unified visual that shows transformation.

---

API Reference

Props

Prop	Type	Default	Description
reading	Reading	-	Reading data object
onPress	(reading: Reading) => void	-	Press handler
showDate	boolean	true	Show date in meta area
formatDate	(timestamp: number) => string	-	Custom date formatter

Reading Type

interface Reading {
  id: string;
  hexagramNumber: number;
  hexagramName: string;
  hexagramChinese: string;
  timestamp: number;
  question?: string;
  changingLines: number[];
  futureHexagram?: number;
}

---

Context Menu

Long-press triggers a context menu with quick actions:

• View Details
• Share Reading
• Delete Reading

<HexagramContextMenu
  hexagramNumber={reading.hexagramNumber}
  hexagramName={reading.hexagramName}
  changingLines={reading.changingLines}
  futureHexagramNumber={reading.futureHexagram}
  onViewDetails={handlePress}
>
  <TouchableOpacity ...>
    {/* Item content */}
  </TouchableOpacity>
</HexagramContextMenu>

---

Accessibility

• Role: accessibilityRole="button"
• Label: Full description including hexagram number, name, and transition
• Hint: Instructions for interaction

accessibilityLabel="1. The Creative, 乾 Qián, changing to Breakthrough"
accessibilityHint="Reading from Today. Tap to view details."

---

Complete Example

import { ReadingListItem } from '@synchronicity/react-native';
import { FlatList } from 'react-native';

function ReadingsList({ readings, onReadingPress }) {
  return (
    <FlatList
      data={readings}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <ReadingListItem
          reading={item}
          onPress={onReadingPress}
          showDate={true}
        />
      )}
      ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
    />
  );
}