QRCode

Atom
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.
src/atoms/qrcode
View in Surfaces & data

Playground

Every control sets a real prop of QRCodeProps. The JSX below updates as you go.
Props
value
string
Size
pick one
JSX · QRCodeProps
<QRCode value="https://canvas.nannier.com" />

Variants

2 examples from src/atoms/qrcode/qrcode.md, each rendered live from its own JSX.
Small
<QRCode value="https://canvas.nannier.com" small />
Large
<QRCode value="https://canvas.nannier.com" large />

Sizes

small
default
large

Anatomy

1
Code
2
Quiet zone
Dimmed parts appear only in some states or variants.

Props

6 props on QRCodeProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
1 prop
value *
string
–
The string to encode: a URL, plain text, a token, etc.
Size axis
pick one
5 props
small
boolean
false
A compact 96px code.
large
boolean
false
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.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
Roles
image
img
ARIA on web
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<QRCode value="https://canvas.nannier.com" />

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft

Related components