All components
Data Display
QRCode
beta
Since 1.2
Renders text as a scannable QR code in SVG, with error-correction levels, quiet-zone control, a bounded centre overlay, and explicit capacity reporting.
Data Display
primitive
Display
Documented
import { QRCode } from '@ivim/native/components';
When to use
Use when
Handing a link from one screen to another device — a portal URL, a check-in code.
Printing or displaying something a camera will read.
Don't use when
The value is long-form data — QR capacity is limited, and a link to it scans far more reliably.
The user is already on the device that would open the link — show the link.
Playground
Adjust the controls to preview live prop combinations. The code snippet updates to match the current selection.
size
size
sm
md
lg
xl
Error correction
errorCorrectionLevel
L
M
Q
H
Value
value
<QRCode value="https://ivim.health/portal" />
Example
Preview
Code
Sizes and correction
Sizes (sm, md, lg)
Error correction L through H
Tighter quiet zone (reduces reliability)
Content and failure
With a centre mark
IV
Over capacity (reported, never truncated)
Can’t display this code
Custom error state
Link is too long to encode
Why encoding never truncates
A code built from a silently shortened payload scans perfectly and resolves to the wrong destination, which is worse than not rendering at all. An over-capacity payload therefore renders the error state and reports through `onEncodeError`. The centre overlay is likewise bounded well under the error-correction budget, so print, glare, and camera angle still have room.
Anatomy
The parts that compose this component.
1
Quiet zone
Blank margin scanners need to find the code.
2
Module matrix
The pattern itself, drawn as SVG rects.
3
Centre overlay
Optional mark, bounded by the error-correction budget.
4
Error state
Shown when the payload cannot be encoded.
Guidelines
Do
Describe the destination in label — "Opens your patient portal", not "QR code".
Do
Raise errorCorrectionLevel before adding a centre logo; the overlay budget scales with it.
Do
Keep the default quiet zone of 4 modules unless layout genuinely forces otherwise — scanners rely on it.
Do
Always offer the same destination as tappable text as well; a code is useless on the device showing it.
Don't
Invert the colours or drop contrast for aesthetics — a low-contrast code stops scanning.
Props
Public props for this component. Required props are marked; defaults reflect the component implementation.
value
required
string
Text to encode — a URL, a token, a vCard.
label
required
string
Describes where the code leads. Required: the pattern is meaningless to a screen reader.
size
'sm' | 'md' | 'lg' | 'xl' | number
default: 'md'
Rendered side length.
errorCorrectionLevel
'L' | 'M' | 'Q' | 'H'
default: 'M'
Higher levels tolerate more damage and allow a larger centre overlay, but hold less data.
quietZone
number
default: 4
Blank margin in modules. The specification requires 4; less reduces scan reliability.
centerContent
ReactNode
Mark centred on the code, sized within the error-correction budget.
onEncodeError
(reason: string) => void
Fires when the payload cannot be encoded, e.g. it exceeds QR capacity.
errorContent
ReactNode
Replaces the default error state.
color / backgroundColor
ThemeColor
default: 'fgPrimary' / 'bgPrimary'
Module and background colors. Must stay high-contrast, or the code stops scanning.
Accessibility
Roles and screen-reader behavior this component provides, plus keyboard interactions.
•
Exposed as one image with a required label describing the destination — the module pattern itself is meaningless detail to a screen reader.
•
label is a required prop rather than optional, so an undescribed code cannot be constructed.
•
The error state is announced with its reason rather than silently rendering nothing.
•
Foreground and background come from tokens that keep contrast in both themes.
—
Not interactive. Pair it with a focusable link to the same destination.
Platform & RTL
Behavior that differs across the platforms this component runs on.
Web
SVG rects, so the code stays crisp at any size and in print.
iOS
Same SVG path via react-native-svg.
Android
Same SVG path via react-native-svg.
RTL
A QR matrix has a fixed orientation and is never mirrored.
State coverage
Interaction and visual states this component supports.
base
semantic color
density
Token references
Semantic design tokens this component page exercises. Tap one to edit it live.
Related components
Components that solve adjacent problems or compose with this one.
Iconography
Untitled UI icon set ported to react-native-svg (207 glyphs). Each renders through the shared Icon wrapper, inheriting size, theme color, and stroke.
Avatar
Person or entity representation with image, initials, and placeholder states, six sizes, presence, verified, and custom badge overlays.
Badge
Compact status or metadata label with six semantic tones plus seven non-semantic accent tones, four treatments, a pill or square shape, three sizes, dots, counts, adornments, and optional press and remove actions.
Input
Single-line text entry, with TextField for labelled fields and InputGroup for adornments, prefixes, and attached controls.