rn-skia-qr

Customizable React Native QR code renderer powered by Skia.

rn-skia-qr is built for branded QR codes: styled body modules, independent eye frame and eye ball shapes, custom colors, and an optional logo wrapper.

Install

npm install @dtyptr/rn-skia-qr @shopify/react-native-skia react-native-reanimated

For Expo projects, install native peers with Expo:

npx expo install @shopify/react-native-skia react-native-reanimated
npm install @dtyptr/rn-skia-qr

Basic Usage

import { QRCode } from "@dtyptr/rn-skia-qr";

export function Example() {
  return <QRCode value="https://example.com" size={240} />;
}

Styled QR

import { QRCode } from "@dtyptr/rn-skia-qr";

export function StyledExample() {
  return (
    <QRCode
      value="https://example.com"
      size={240}
      foregroundColor="#111827"
      backgroundColor="#ffffff"
      errorCorrectionLevel="H"
      bodyShape="rounded"
      eyeFrameShape="extra-rounded"
      eyeBallShape="dot"
    />
  );
}

Logo QR

import { QRCodeWithLogo } from "@dtyptr/rn-skia-qr";

export function LogoExample() {
  return (
    <QRCodeWithLogo
      value="https://example.com"
      size={240}
      logoSource={require("./logo.png")}
      bodyShape="rounded"
      eyeFrameShape="rounded"
      eyeBallShape="dot"
    />
  );
}

QRCodeWithLogo defaults to errorCorrectionLevel="H" and uses a conservative logo size of about 17% of the QR width.

API

QRCode

| Prop | Type | Default | | --- | --- | --- | | value | string | required | | size | number | 240 | | foregroundColor | string | "#000000" | | backgroundColor | string | "#ffffff" | | errorCorrectionLevel | "L" \| "M" \| "Q" \| "H" | "M" | | bodyShape | "square" \| "dots" \| "rounded" | "square" | | eyeFrameShape | "square" \| "rounded" \| "extra-rounded" | "square" | | eyeBallShape | "square" \| "dot" \| "rounded" | "square" | | quietZone | number | 4 | | borderRadius | number | 16 | | animated | boolean | true | | containerStyle | StyleProp<ViewStyle> | undefined |

QRCodeWithLogo

Extends QRCodeProps with:

| Prop | Type | Default | | --- | --- | --- | | logoSource | ImageSourcePropType | undefined | | logoSize | number | size * 0.17 | | logoPadding | number | 6 | | logoBackgroundColor | string | "#ffffff" | | logoBorderRadius | number | 8 | | logoContainerStyle | StyleProp<ViewStyle> | undefined | | logoStyle | StyleProp<ViewStyle> | undefined |

Scan Reliability Tips

• Use high foreground/background contrast.
• Use errorCorrectionLevel="H" when rendering a logo.
• Keep logo width at or below ~17% of QR size.
• Avoid combining low contrast, bodyShape="dots", very small QR size, and a large logo.
• Test real devices under low light before shipping branded QR codes.

Exporting or Sharing Logo QR Codes

QRCodeWithLogo renders the QR with Skia and the logo with React Native views. If you want to export/share the full QR including the logo, capture the wrapper view using react-native-view-shot.

Exports

export { QRCode, QRCodeWithLogo, createQRCodeMatrix, getRecommendedLogoSize } from "@dtyptr/rn-skia-qr";
export type {
  QRBodyShape,
  QRCodeMatrix,
  QRCodeProps,
  QRCodeWithLogoProps,
  QRErrorCorrectionLevel,
  QREyeBallShape,
  QREyeFrameShape,
} from "@dtyptr/rn-skia-qr";