A pill that morphs into a card with a real, scannable QR code.
Pro<QrCodeButton />3 variantsiOS · Android · Expo Go
9:41
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
Colours, radius and light / dark come from
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| value What the code encodes: a URL, a payment link, a ticket id. | string | — |
| label Text on the pill. | string | 'Show QR Code' |
| copyLabel Copy button text. | string | 'Copy' |
| copiedLabel Shown after Copy is pressed. | string | 'Copied' |
| onCopy Wire your clipboard here (expo-clipboard). | (value: string) => void | — |
| open Controlled state. | boolean | — |
| defaultOpen Uncontrolled initial state. | boolean | false |
| onOpenChange Opened or closed. | (open: boolean) => void | — |
| size Pill height 36 / 44 / 52. | "sm" | "md" | "lg" | "md" |
| codeSize Side of the code in points; the card wraps it. | number | 168 |
| color Pill colour. The card stays white so the code scans. | string | white (dark) / primary (light) |
| accessibilityLabel Screen reader label for the pill. | string | label |
| style Root style. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Motion
- Press swells the pill; it glides into the card while its label fades out and the code fades and scales in. Close glides it back.
- Layout
- Reserves the open card's size up front, so nothing around it moves and every control stays inside its own bounds (taps work on Android).
- Code
- Encoded in the component: UTF-8 bytes, error correction M, smallest version that fits, mask chosen by the spec's penalty rules. Always dark on white so it scans in dark mode too.
- Copy
- Calls onCopy with the value and flips to a tick and "Copied" for 1.5 s.
- Haptics
- A light impact on open, a success tap on Copy, a tick on close.
- Reduced motion
- Opens and closes with a short fade.
- Screen readers
- A button with an expanded state; the code reads as "QR code for …".
Source
Did you like the content?