@masumdev/react-native-qr-code-gen

A powerful and highly customizable QR code generation library for React Native and Expo applications, built with react-native-svg.

Features

• 🎨 Rich QR Code styling with fully customizable:
  • Colors and gradients (Linear & Radial)
  • Patterns and shapes (Square, Dot, Triangle, Heart, Rain)
  • Corner styles (Eyes) and dot designs
  • Background effects
• 🖼️ Custom logo placement with adjustable size, padding, and border radius.
• 🌈 Beautiful preset templates (HEART, RAIN, LINEAR_GRADIENT, etc.)
• 🎯 Adjustable error correction levels (L, M, Q, H)
• 📦 Seamless integration with React Native & Expo.
• ⚡ High-performance SVG rendering.

Installation

1. Install the package

npm install @masumdev/react-native-qr-code-gen react-native-svg

Or using yarn/bun:

bun add @masumdev/react-native-qr-code-gen react-native-svg

2. Expo Users

Make sure to install the compatible SVG library:

npx expo install react-native-svg

Usage

Basic Usage

import { QRCode } from '@masumdev/react-native-qr-code-gen';

const MyComponent = () => {
  return (
    <QRCode
      variant="BASIC"
      value="https://github.com/masumrpg"
      size={300}
    />
  );
};

Using Presets (Variants)

import { QRCode } from '@masumdev/react-native-qr-code-gen';

// Just change the variant prop
<QRCode variant="HEART" value="Love QR" size={250} />
<QRCode variant="RAIN" value="Rainy QR" size={250} />
<QRCode variant="LINEAR_GRADIENT" value="Modern QR" size={250} />

API Reference

QRCodeProps

| Prop | Type | Default | Description | | -------------------- | ------------------------ | ------- | ---------------------------- | | value | string | - | The content to be encoded. | | variant | QRCodeVariant | 'BASIC' | Predefined templates. | | size | number | 256 | Size in pixels. | | color | string | '#000' | Main color. | | backgroundColor | string | 'transparent' | Background color. | | logo | LogoOptions | - | Center logo configuration. | | gradient | QRCodeGradientConfig | - | Gradient configuration. | | piece | PieceOptions | - | Customizing QR dots. | | eye | EyeOptions | - | Customizing corner squares. | | isLoading | boolean | false | Force loading state. | | renderLoading | () => ReactNode | - | Custom loading component. |

QRCodeVariant

'BASIC' | 'TRIANGLE' | 'HEART' | 'DOT' | 'WITH_LOGO' | 'RAIN' | 'LINEAR_GRADIENT' | 'RADIAL_GRADIENT' | 'IMAGE_BACKGROUND'

License

MIT © Ma'sum