React Fancy QR Code Generator

Common errors

• Invariant Violation: `react-native-svg` module not found.

  cause `react-native-svg` is a required peer dependency but was not installed or linked correctly in a React Native project.
  fix Install `react-native-svg` via `npm install --save react-native-svg` or `yarn add react-native-svg`. For iOS, also run `npx pod-install ios` and rebuild the app.

• TypeError: undefined is not a function (evaluating 'require("./assets/fire.png")')

  cause Attempting to use `require()` for local image assets (e.g., `logo={require("...")}`) in a web environment without proper bundler configuration for asset handling, or in specific React Native setups where `require` might not resolve the asset.
  fix For web, ensure your bundler (Webpack, Vite) is configured to handle image imports. For React Native, verify the image path is correct relative to the component and the Metro bundler is running. Alternatively, use a base64 string or a URL for the `logo` prop.

• Property 'dotScale' does not exist on type 'IntrinsicAttributes & QRCodeProps'.

  cause This TypeScript error often indicates a mismatch between the installed library version and its type definitions. This can happen if an older version's types are being used, or the project's TypeScript configuration isn't correctly picking up the latest type definitions.
  fix Ensure `react-fancy-qrcode` is updated to the latest version (`npm update react-fancy-qrcode` or `yarn upgrade react-fancy-qrcode`). If the problem persists, clear your `node_modules` and `package-lock.json`/`yarn.lock` and reinstall dependencies, then restart your TypeScript language server or IDE.

Warnings

• gotcha When embedding a `logo`, ensure `logoSize` does not exceed approximately 20% of the `size` prop. Larger logos can obscure critical QR code data, rendering the code unscannable, especially with lower `errorCorrection` levels.
  Fix: Adjust `logoSize` to be no more than 20% of the `size` prop and test the QR code's scannability thoroughly across different error correction levels.
• gotcha For React Native iOS projects, after installing `react-fancy-qrcode` and its peer dependency `react-native-svg`, you must run `npx pod-install ios` to link the native modules. Failing to do so will result in runtime errors related to `react-native-svg`.
  Fix: Navigate to your React Native project root and execute `npx pod-install ios`. Rebuild your iOS application afterwards.
• gotcha The `errorCorrection` prop (default 'M') significantly impacts a QR code's resilience to damage (e.g., logos, smudges). 'L' offers the least robustness, while 'H' offers the most. Choose an appropriate level based on your application's requirements and expected usage environment.
  Fix: Adjust the `errorCorrection` prop (e.g., `errorCorrection='H'`) to match the level of resilience needed. Higher levels may result in slightly denser QR codes.

Install

• npm install react-fancy-qrcode npm
• yarn add react-fancy-qrcode yarn
• pnpm add react-fancy-qrcode pnpm

Imports

• QRCode
  wrong:

  const QRCode = require('react-fancy-qrcode');

  correct:

  import { QRCode } from 'react-fancy-qrcode';

  The primary component for generating QR codes. While CommonJS `require` can work in some setups, ESM `import` is the recommended and type-safe approach, especially for React/React Native projects.
• QRCodeProps

  import type { QRCodeProps } from 'react-fancy-qrcode';

  Type definition for the `QRCode` component's props, useful for TypeScript projects to ensure correct prop usage and IDE auto-completion.
• QRCodeErrorCorrection

  import type { QRCodeErrorCorrection } from 'react-fancy-qrcode';

  Type definition for the `errorCorrection` prop, enumerating the possible error correction levels ('L', 'M', 'Q', 'H').

Quickstart

This example demonstrates how to render a highly customized QR code using the `QRCode` component. It includes custom dot shapes, gradient colors for both the QR code and its position markers, and an embedded logo, illustrating a wide range of available props.

import React from 'react';
import { QRCode } from 'react-fancy-qrcode';
import { View } from 'react-native'; // Use 'div' for web React

// For demonstration purposes, assuming 'fire.png' exists in './assets/'
// In a real application, ensure the image path is correct for your bundler (web) or Metro (React Native).
// Or use a base64 encoded string for the logo prop directly.
const FireImage = require('./assets/fire.png');

function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0' }}>
      <QRCode
        value={"https://checklist.day/package/react-fancy-qrcode?utm_source=demo"}
        size={300}
        dotScale={0.75}
        dotRadius="40%"
        positionRadius={["6%", "2%"]}
        errorCorrection="H"
        logo={FireImage}
        logoSize={60} // Explicitly set to avoid obscuring too much data
        backgroundColor="white"
        color={["#00008b", "#4169e1"]} // Example: Navy to Royal Blue linear gradient
        colorGradientDirection={['0%', '0%', '100%', '100%']}
        positionColor={["#8b0000", "#dc143c"]} // Example: Dark Red to Crimson linear gradient
        positionGradientDirection={['0%', '100%', '100%', '0%']}
        margin={10}
      />
    </View>
  );
}

export default App;