ttolbel UI

Component

Share

A bottom sheet exposing Copy Link, Mail, and Message alongside any app-specific targets, with the copy button confirming itself in green for two seconds.

The primitive

share.tsx
<NativeShare
  open={open}
  onClose={() => setOpen(false)}
  data={{ title: "Payment link", text: "Send me money", url: paymentUrl }}
/>

Example

Sharing a completed transfer's receipt, with the reference and amount pre-filled into the share text.

share-example.tsx
<NativeShare
  open={open}
  onClose={() => setOpen(false)}
  data={{
    title: "Transfer receipt",
    text: `${transaction.reference}, ${transaction.amount} to ${transaction.bankName}`,
    url: transaction.receiptUrl,
  }}
/>

Capabilities

PropTypeDescription
openrequiredboolean
onCloserequired() => void
datarequiredNativeShareData
targetsNativeShareTarget[]Additional app targets shown alongside the built-in Copy / Mail / Message row