CoinFlip

An animated coin component for I Ching divination. Displays heads (yang/乾) or tails (yin/坤) with realistic flip animation.

Import

import { CoinFlip, CoinValue } from '@synchronicity/react-native';

Coin Values

In traditional I Ching coin casting:

• Heads (乾) = 3 points (yang side)
• Tails (坤) = 2 points (yin side)

Basic Usage

<CoinFlip side="heads" />
<CoinFlip side="tails" />

Interactive

const [side, setSide] = useState<CoinSide>('heads');
const [flipping, setFlipping] = useState(false);

const handleFlip = () => {
  setFlipping(true);
};

const handleComplete = () => {
  setFlipping(false);
  setSide(Math.random() > 0.5 ? 'heads' : 'tails');
};

<CoinFlip
  side={side}
  flipping={flipping}
  onPress={handleFlip}
  onFlipComplete={handleComplete}
/>

Sizes

<CoinFlip side="heads" size="sm" />
<CoinFlip side="heads" size="md" />
<CoinFlip side="heads" size="lg" />

With Value Display

<View style={{ alignItems: 'center' }}>
  <CoinFlip side="heads" />
  <CoinValue side="heads" />
</View>

Props

CoinFlip

Prop	Type	Default	Description
side	'heads' | 'tails'	required	Current side showing
size	'sm' | 'md' | 'lg'	'md'	Size of coin
flipping	boolean	false	Whether coin is flipping
flipDuration	number	500	Animation duration (ms)
onFlipComplete	() => void	-	Called when flip ends
onPress	() => void	-	Press handler
disabled	boolean	false	Disable interaction
style	ViewStyle	-	Custom styles

CoinValue

Prop	Type	Default	Description
side	'heads' | 'tails'	required	Coin side
size	'sm' | 'md' | 'lg'	'md'	Text size
style	ViewStyle	-	Custom styles

Accessibility

• Uses accessibilityRole="button" for interactive coins
• Provides accessibilityLabel with current side
• Disables during animation with accessibilityState