Component

Copy field

A filled row pairing a truncatable value with a one-tap copy button that confirms itself by turning green for two seconds and raising a toast.

The primitive

Account number

8842 1…6 7731

copy field.tsx

<NativeCopyField
  label="Account number"
  value="8842 1190 2256 7731"
  truncate={6}
  surface="plain"
  toast={{ type: "success", message: "Account number copied." }}
/>

Example

Each transaction reference gets its own copy field on the receipt screen, and each confirms independently with its own toast.

Reference

REF-88213-92ND

Account number

8842 1…6 7731

copy-field-example.tsx

<NativeCopyField label="Reference" value={reference} surface="plain" toast={{ type: "success", message: "Reference copied." }} />
<NativeCopyField label="Account number" value={accountNumber} truncate={6} surface="plain" toast={{ type: "success", message: "Account number copied." }} />

Capabilities

Prop	Type	Description
valuerequired	string	—
copyValue	string \| null	—
label	string	—
truncate	number	Show only first N + last N chars, useful for account or reference numbers
onCopy	(value: string) => void	—
toast	{	—
typerequired	NativeToastVariant	—
messagerequired	string	—
surface	"grouped" \| "plain" \| "transparent"	—
className	string	—