QRCode

Encodes a string as a scannable QR code. Built on react-native-svg, so it renders the same on iOS, Android, and the web. The code stays a fixed dark-on-white card so any camera can read it, whatever the app theme.
iOS
Android
Web
tsx
<QRCode value="https://canvas.nannier.com" />

Props

Prop
Description
value
required
string
The string to encode: a URL, plain text, a token, etc.
small
boolean
A compact 96px code.
large
boolean
A large 200px code.
accessibilityLabel
string
Spoken equivalent for screen readers. A QR code is camera-only content, so without a label assistive tech announces nothing. Defaults to `QR code encoding ${value}`; pass a generic label (e.g. "QR code") when surfacing the raw value is undesirable.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

Keep it scannable

Don’t
Shrinking a data-dense value to the small size drops the modules below a reliably scannable density.
Do
Leave the fixed dark-on-white card in place so the code stays high-contrast for any camera.
← Progress
Radio →