Component

Amount input

A large, centered numeric field that shrinks its own font as the value grows, with a converted-currency line beneath it and a MAX shortcut tied to an available balance.

The primitive

USD

≈ 230.00 EURAvailable: 4,280 USD

amount input.tsx

<NativeAmountInput
  value={value}
  onValueChange={setValue}
  currency="USD"
  converted="≈ 3,940.00 EUR"
  max={4280}
  onMax={() => setValue("4280")}
/>

Example

On a send-payment screen, this is the centerpiece: a card frames the input, and the MAX shortcut is wired to the sender's actual available balance.

USD

≈ 230.00 EURAvailable: 4,280 USD

amount-input-example.tsx

<div className="rounded-2xl border p-6">
  <NativeAmountInput
    value={value}
    onValueChange={setValue}
    currency="USD"
    converted="≈ 230.00 EUR"
    max={4280}
    onMax={() => setValue("4280")}
  />
</div>

Capabilities

Prop	Type	Description
valuerequired	string	—
onValueChangerequired	(value: string) => void	—
currency	string	—
converted	string	Shown below the amount — e.g. "≈ $1,234.56 USD"
max	number	Max available balance
onMax	() => void	—
error	string	—
disabled	boolean	—
className	string	—