Usage

Basic Usage

Render a vector SVG QR code by passing value and size:

BasicQRCodeExample.tsx

import React from 'react';
import { QRCode } from '@masumdev/rn-qr-code';

export function BasicQRCodeExample() {
  return (
    <QRCode
      value="https://react-native-library-docs.netlify.app/rn-qr-code/"
      size={200}
      variant="BASIC"
    />
  );
}

Preset Design Variants

Use the variant prop to apply pre-configured design styles:

PresetVariantsExample.tsx

import React from 'react';
import { QRCode } from '@masumdev/rn-qr-code';

export function PresetVariantsExample() {
  return (
    <>
      {/* Heart preset variant */}
      <QRCode value="Love QR" size={180} variant="HEART" />

      {/* Linear Gradient preset variant */}
      <QRCode value="Gradients" size={180} variant="LINEAR_GRADIENT" />

      {/* Triangle preset variant */}
      <QRCode value="Triangle" size={140} variant="TRIANGLE" />
    </>
  );
}

Non-Blocking Async Rendering

Set isAsync to generate the QR matrix off the synchronous render path, preventing UI frame drops during screen transitions:

AsyncQRCodeExample.tsx

import React from 'react';
import { QRCode } from '@masumdev/rn-qr-code';
import { Skeleton } from '@masumdev/rn-ui';

export function AsyncQRCodeExample() {
  return (
    <QRCode
      value="https://react-native-library-docs.netlify.app/rn-qr-code/"
      size={180}
      isAsync
      renderLoading={() => (
        <Skeleton style={{ width: 180, height: 180 }} radius="md" />
      )}
    />
  );
}

Props API

Prop	Type	Default	Description
value	string	—	Payload text or URL encoded in the QR code.
size	number	250	Width and height of the rendered SVG container in dp.
variant	keyof typeof QR_CODE_CONFIGS	'BASIC'	Pre-configured design preset key from QR_CODE_CONFIGS.
color	string	'#000000'	Primary foreground color for cells.
backgroundColor	string	'transparent'	Background canvas color.
piece	{ shape?: "square" | "dot" | "rounded" | "heart" | "triangle" | "rain"; color?: string; size?: number; borderRadius?: number }	—	Options for individual data module cells.
eye	Partial<{ topLeft: EyeOptions; topRight: EyeOptions; bottomLeft: EyeOptions }>	—	Shape, color, and size overrides for 3 corner eye patterns.
logo	LogoOptions	—	Center logo image source, size ratio (0.0-1.0), padding, and background color.
gradient	QRCodeGradientConfig	—	Linear or radial gradient config with color stops and mask options.
imageClip	ImageProps	—	Image href background clip fill for data modules.
isAsync	boolean	false	Enables non-blocking asynchronous calculation using setTimeout(..., 0).
errorCorrectionLevel	'L' | 'M' | 'Q' | 'H'	'M'	QR error correction level (Level H recommended when using center logos).
isLoading	boolean	false	Displays the loading placeholder view.
renderLoading	() => ReactNode	—	Custom loading placeholder component renderer.