4. Props and composition

Components receive data through `props`, exactly like React on the web. Typing them with TypeScript catches mistakes before runtime — critical when a prop is a wallet address or a token amount.

type BalanceProps = { symbol: string; amount: number };

function Balance({ symbol, amount }: BalanceProps) {
  return <Text>{amount.toFixed(4)} {symbol}</Text>;
}

function Portfolio() {
  return (
    <View>
      <Balance symbol="ETH" amount={1.2345} />
      <Balance symbol="USDC" amount={500} />
    </View>
  );
}

Favor small, focused components (a `TokenRow`, a `WalletHeader`) over one giant screen component — it makes testing and reuse far easier.

Check your understanding