TrigramCard

TrigramCard is a flippable flashcard for learning the eight trigrams. The front shows the symbol, and the back reveals the name, element, and attributes.

Preview

Light Dark OLED

Global

☰Tap to reveal name

---

Card States

Front (Question)

Shows the trigram symbol with a hint to tap.

Light Dark OLED

Global

☰Tap to reveal name

Back (Answer)

Reveals the trigram’s full information.

Light Dark OLED

Global

☰Heaven乾 · QiánThe Creative, Strong

---

The Eight Trigrams

Light Dark OLED

Global

☰Heaven

☷Earth

☵Water

☲Fire

Light Dark OLED

Global

☳Thunder

☴Wind

☶Mountain

☱Lake

Symbol	Binary	Name	Chinese	Element	Attribute
☰	111	Qian	乾	Heaven	Creative, Strong
☷	000	Kun	坤	Earth	Receptive, Yielding
☵	010	Kan	坎	Water	Abysmal, Dangerous
☲	101	Li	離	Fire	Clinging, Bright
☳	001	Zhen	震	Thunder	Arousing, Movement
☴	110	Xun	巽	Wind	Gentle, Penetrating
☶	100	Gen	艱	Mountain	Keeping Still
☱	011	Dui	兑	Lake	Joyous, Open

---

Flip Animation

The card uses a 250ms flip animation with opacity crossfade:

Animated.timing(flipAnimation, {
  toValue: isRevealed ? 0 : 1,
  duration: 250,
  useNativeDriver: true,
}).start();

The front and back faces animate their rotation and opacity:

Phase	Front Opacity	Back Opacity
0% (front)	1	0
50% (mid-flip)	0	0
100% (back)	0	1

---

API Reference

Props

Prop	Type	Description
trigramKey	string	Binary key (e.g., ‘111’, ‘000’)
name	string	Romanized name (e.g., ‘Qian’)
chinese	string	Chinese character (e.g., ‘乾’)
element	string	Element name (e.g., ‘Heaven’)
attribute	string	Key attributes
isRevealed	boolean	Current flip state
onFlip	() => void	Called after flip animation

---

Usage

import TrigramCard from '@synchronicity/react-native';
import { useState } from 'react';

function TrigramQuiz() {
  const [isRevealed, setIsRevealed] = useState(false);

  return (
    <TrigramCard
      trigramKey="111"
      name="Qian"
      chinese="乾"
      element="Heaven"
      attribute="The Creative, Strong"
      isRevealed={isRevealed}
      onFlip={() => setIsRevealed(!isRevealed)}
    />
  );
}

---

Accessibility

• Role: accessibilityRole="button"
• Label: Describes card state and content
• Hint: Instructions for interaction
• State: accessibilityState={{ disabled: isFlipping }}

// Front state
accessibilityLabel="Trigram card showing ☰ symbol. Tap to reveal name."
accessibilityHint="Double tap to reveal the trigram name and details"

// Back state (revealed)
accessibilityLabel="Qian trigram, 乾, Heaven element, The Creative, Strong"
accessibilityHint="Card is revealed showing trigram details"

---

Complete Example

import TrigramCard from '@synchronicity/react-native';
import { useState, useCallback } from 'react';

const TRIGRAMS = [
  { key: '111', name: 'Qian', chinese: '乾', element: 'Heaven', attribute: 'The Creative, Strong' },
  { key: '000', name: 'Kun', chinese: '坤', element: 'Earth', attribute: 'The Receptive, Yielding' },
  // ... other trigrams
];

function TrigramPractice() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [revealed, setRevealed] = useState(false);

  const trigram = TRIGRAMS[currentIndex];

  const handleFlip = useCallback(() => {
    setRevealed(prev => !prev);
  }, []);

  const handleNext = useCallback(() => {
    setRevealed(false);
    setCurrentIndex(prev => (prev + 1) % TRIGRAMS.length);
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.progress}>
        {currentIndex + 1} / {TRIGRAMS.length}
      </Text>

      <TrigramCard
        trigramKey={trigram.key}
        name={trigram.name}
        chinese={trigram.chinese}
        element={trigram.element}
        attribute={trigram.attribute}
        isRevealed={revealed}
        onFlip={handleFlip}
      />

      {revealed && (
        <Button variant="primary" onPress={handleNext}>
          Next Trigram
        </Button>
      )}
    </View>
  );
}