React QR Code Component

Common errors

• Invariant Violation: View config not found for name 'RNSVGPath'. Are you sure this native component exists and was properly linked?

  cause The `react-native-svg` library, which is essential for rendering QR codes in React Native, is not installed or linked correctly.
  fix Install `react-native-svg` via `npm install react-native-svg` (or `yarn add react-native-svg`) and then navigate to your `ios` directory and run `pod install`.

• TypeError: (0, react_qr_code_1.default) is not a function

  cause Incorrect import statement. The `QRCode` component is a default export, but it's being imported as a named export.
  fix Change your import statement from `import { QRCode } from 'react-qr-code';` to `import QRCode from 'react-qr-code';`.

• QR code generated but is not scannable by common QR code readers.

  cause Insufficient or missing 'quiet zone' (the clear space) around the QR code, or poor color contrast between foreground and background.
  fix Add a white or light-colored background with adequate padding around the `<QRCode />` component (e.g., `<div style={{ background: 'white', padding: '16px' }}><QRCode ... /></div>`). Also, ensure `fgColor` and `bgColor` props provide strong contrast.

Warnings

• gotcha For React Native applications, `react-native-svg` must be installed manually. Although it was a peer dependency prior to version 2.0.15, it is now an implicit runtime requirement and will cause rendering issues if not present.
  Fix: Run `npm install react-native-svg` (or `yarn add react-native-svg`) and then `cd ios && pod install` for iOS projects.
• gotcha To ensure reliable scanning, a 'quiet zone' (a clear, light-colored border) around the QR code is crucial. Without it, some scanners may struggle to read the code.
  Fix: Always wrap the `<QRCode />` component in a container with sufficient light-colored padding, for example: `<div style={{ background: 'white', padding: '16px' }}><QRCode value='...' /></div>`.
• gotcha The `QRCode` component is exported as a default export. Attempting to import it as a named export (e.g., `import { QRCode } from 'react-qr-code';`) will result in a runtime `TypeError`.
  Fix: Use `import QRCode from 'react-qr-code';` for ES modules or `const QRCode = require('react-qr-code');` for CommonJS environments.
• breaking Version 2.0.16 included a bug fix to update the internal `render()` return type to `ReactNode` for compatibility with React 19. While this primarily affects internal types, it could potentially impact applications with highly customized rendering logic or strict TypeScript configurations when upgrading to React 19.
  Fix: Ensure your React environment and type definitions are compatible with React 19. If issues arise, consider upgrading React or adjusting custom rendering logic to match `ReactNode` return types.

Install

• npm install react-qr-code npm
• yarn add react-qr-code yarn
• pnpm add react-qr-code pnpm

Imports

• QRCode
  wrong:

  import { QRCode } from 'react-qr-code';

  correct:

  import QRCode from 'react-qr-code';

  The primary `QRCode` component is provided as the default export of the module. Attempting to use a named import will result in a runtime error.
• QRCode
  wrong:

  const { QRCode } = require('react-qr-code');

  correct:

  const QRCode = require('react-qr-code');

  For CommonJS environments, `QRCode` is the default export. Destructuring from `require()` will not work correctly.
• QRCodeProps

  import type { QRCodeProps } from 'react-qr-code';

  TypeScript users can import the `QRCodeProps` interface to correctly type the component's properties.

Quickstart

This quickstart demonstrates how to render a basic, responsive QR code component in a React application. It includes a user input field to dynamically update the QR code's content and applies essential styling to ensure a proper 'quiet zone' for scannability.

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import QRCode from 'react-qr-code';

function App() {
  const [value, setValue] = useState('https://checklist.day');

  return (
    <div style={{
      padding: '20px', 
      backgroundColor: '#f0f0f0', 
      display: 'flex', 
      flexDirection: 'column', 
      alignItems: 'center',
      minHeight: '100vh'
    }}>
      <h1>QR Code Generator</h1>
      <p>Enter text or a URL below to generate a QR code:</p>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        style={{ marginBottom: '20px', width: '300px', padding: '8px', fontSize: '16px', borderRadius: '4px', border: '1px solid #ccc' }}
        placeholder="Enter QR code content"
      />
      {value && (
        <div style={{ 
          background: 'white', 
          padding: '16px', 
          borderRadius: '8px', 
          boxShadow: '0 4px 8px rgba(0,0,0,0.1)', 
          display: 'inline-block'
        }}>
          <QRCode
            size={256}
            style={{ height: "auto", maxWidth: "100%", width: "100%" }}
            value={value}
            viewBox={`0 0 256 256`}
            level="H"
            fgColor="#333333"
            bgColor="#FFFFFF"
          />
        </div>
      )}
      {!value && <p>Please enter some content to generate a QR code.</p>}
      <p style={{ marginTop: '20px', fontSize: '14px', color: '#666' }}>Scan this QR code with your device.</p>
    </div>
  );
}

// Assuming a root HTML element with id='root' exists
const rootElement = document.getElementById('root');
if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(<App />);
} else {
  console.error("No element with ID 'root' found to render the React app. Ensure your HTML has `<div id='root'></div>`.");
}