HexagramVisual

The HexagramVisual component renders I Ching hexagrams using the traditional six-line format. It supports changing lines, animated transitions, and multiple sizes.

Preview

Light Dark OLED

Global

---

Line Types

Hexagrams are composed of two line types:

Light Dark OLED

Global

Yang (solid)

Yin (broken)

Line	Symbol	Meaning
Yang	━━━━━	Creative, active, light, masculine
Yin	━━ ━━	Receptive, passive, dark, feminine

---

Sizes

Light Dark OLED

Global

tiny

small

medium

large

Size	Line Width	Line Height	Gap	Usage
tiny	28px	2px	3px	List items, badges
small	40px	3px	3px	Cards, thumbnails
medium	60px	4px	6px	Default, detail views
large	80px	5px	8px	Hero, focus states

---

Changing Lines

When a hexagram has changing lines, they’re highlighted in gold with optional indicator dots.

Light Dark OLED

Global

<HexagramVisual
  hexagramNumber={1}
  changingLines={[2, 4]}  // Lines 2 and 4 are changing
  showChangingDots={true}
/>

Note

Changing lines indicate movement from the current hexagram to a future hexagram. Lines are numbered 1-6 from bottom to top.

---

Animated Transitions

The component supports smooth animations when transitioning between hexagrams.

Light Dark OLED

Global

Animated transition

<HexagramVisual
  hexagramNumber={1}
  futureHexagramNumber={2}
  changingLines={[2]}
  animationProgress={animatedValue}
  animated={true}
/>

The animation:

1. Current line shrinks to the right
2. Future line grows from the right
3. Changing dots fade out during transition

---

API Reference

Props

Prop	Type	Default	Description
hexagramNumber	number	-	Hexagram number (1-64)
size	'tiny' | 'small' | 'medium' | 'large'	'medium'	Visual size
changingLines	number[]	[]	Line positions that are changing (1-6)
showChangingDots	boolean	false	Show indicator dots
animated	boolean	false	Enable animations
futureHexagramNumber	number	-	Target hexagram for animation
animationProgress	Animated.Value	-	Animation progress (0-1)

Tokens Used

// Line colors
theme.colors.textPrimary   // Standard lines
theme.colors.goldPrimary   // Changing lines

// Geometry
theme.radius.subtle        // Line border radius (1px)

---

Usage Guidelines

Do

• Use appropriate sizes for context (tiny for lists, large for focus)
• Show changing lines when they’re relevant to the reading
• Use animation for meaningful transitions
• Maintain consistent sizing across related views

Don’t

• Mix different sizes in the same context
• Animate without purpose
• Show changing dots without changing lines
• Use hexagram visuals purely decoratively

Tip

The hexagram visual is a sacred symbol. Display it with appropriate reverence and context.

---

Complete Example

import { HexagramVisual } from '@synchronicity/react-native';
import { useRef, useEffect } from 'react';
import { Animated } from 'react-native';

function ReadingTransition({ currentHex, futureHex, changingLines }) {
  const animationProgress = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // Animate from current to future hexagram
    Animated.timing(animationProgress, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  }, [futureHex]);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Your Reading</Text>

      <HexagramVisual
        hexagramNumber={currentHex}
        futureHexagramNumber={futureHex}
        changingLines={changingLines}
        animationProgress={animationProgress}
        showChangingDots={true}
        size="large"
        animated
      />

      <View style={styles.legend}>
        <View style={styles.legendItem}>
          <View style={styles.normalLine} />
          <Text>Static line</Text>
        </View>
        <View style={styles.legendItem}>
          <View style={styles.changingLine} />
          <Text>Changing line</Text>
        </View>
      </View>
    </View>
  );
}