ThreeCoins

A complete three-coin casting component for I Ching divination. Includes animated throws and result calculation.

Import

import { ThreeCoins, ThrowHistory } from '@synchronicity/react-native';

How Coin Casting Works

Three coins are thrown to determine each line:

Result	Value	Line Type	Meaning
2+2+2	6	Old Yin	Changing broken line
2+2+3	7	Young Yang	Stable solid line
2+3+3	8	Young Yin	Stable broken line
3+3+3	9	Old Yang	Changing solid line

Basic Usage

<ThreeCoins />

Interactive Throwing

const [throwing, setThrowing] = useState(false);

const handleThrow = () => setThrowing(true);

const handleComplete = (result: ThrowResult) => {
  setThrowing(false);
  console.log(result.value, result.lineType);
};

<ThreeCoins
  throwing={throwing}
  onPress={handleThrow}
  onThrowComplete={handleComplete}
  showValue
/>

Display Specific Coins

<ThreeCoins
  coins={['heads', 'tails', 'heads']}
  showValue
/>

Sizes

<ThreeCoins size="sm" />
<ThreeCoins size="md" />
<ThreeCoins size="lg" />

ThrowHistory

Display a history of throws:

<ThrowHistory
  throws={[
    { coins: ['heads', 'heads', 'tails'], value: 8, lineType: 'yin' },
    { coins: ['heads', 'heads', 'heads'], value: 9, lineType: 'changing-yang' },
    { coins: ['tails', 'tails', 'heads'], value: 7, lineType: 'yang' },
  ]}
/>

Building a Complete Reading

const [throws, setThrows] = useState<ThrowResult[]>([]);
const [throwing, setThrowing] = useState(false);

const handleThrow = () => {
  if (throws.length < 6) {
    setThrowing(true);
  }
};

const handleComplete = (result: ThrowResult) => {
  setThrowing(false);
  setThrows(prev => [...prev, result]);
};

<View>
  <ThreeCoins
    throwing={throwing}
    onPress={handleThrow}
    onThrowComplete={handleComplete}
    showValue
    disabled={throws.length >= 6}
  />
  <Text>Line {throws.length + 1} of 6</Text>
  <ThrowHistory throws={throws} />
</View>

Props

ThreeCoins

Prop	Type	Default	Description
coins	[CoinSide, CoinSide, CoinSide]	-	Current coin states
size	'sm' | 'md' | 'lg'	'md'	Size of coins
throwing	boolean	false	Whether coins are being thrown
throwDuration	number	800	Animation duration (ms)
onThrowComplete	(result: ThrowResult) => void	-	Called with result
onPress	() => void	-	Press handler
disabled	boolean	false	Disable interaction
showValue	boolean	false	Show calculated value
style	ViewStyle	-	Custom styles

ThrowHistory

Prop	Type	Default	Description
throws	ThrowResult[]	required	Array of throw results
size	'sm' | 'md'	'sm'	Display size
style	ViewStyle	-	Custom styles

ThrowResult

type ThrowResult = {
  coins: [CoinSide, CoinSide, CoinSide];
  value: 6 | 7 | 8 | 9;
  lineType: 'yin' | 'yang' | 'changing-yin' | 'changing-yang';
};