@masumdev/rn-qrcode

A powerful and easy-to-use QR code scanning and generation library for React Native applications.

Demo

Youtube Tutorial

Features

• 🎨 Rich QR Code styling with fully customizable:
  • Colors and gradients
  • Patterns and shapes
  • Corner styles and dot designs
  • Background effects
• 🖼️ Custom logo placement with adjustable size and position
• 🌈 Beautiful preset templates and themes
• 🔍 Comprehensive format support for:
  • URLs and deep links
  • Contact information (vCard, meCard)
  • Calendar events
  • Wi-Fi configurations
  • And more!
• 🎯 Adjustable error correction levels (L, M, Q, H)
• 📦 Seamless integration with React Native projects
• 💫 Cross-platform compatibility (iOS & Android)
• ⚡ High-performance QR code generation
• 🎭 Multiple design variants and styles

Installation

Prerequisites

Make sure you have these peer dependencies installed in your React Native project:

{
  "react": ">=18.3.1",
  "react-native": ">=0.76.9",
  "react-native-svg": ">=15.8.0"
}

Installing peer dependencies

npm install react-native-svg

or

yarn add react-native-svg

or

bun add react-native-svg

or

pnpm add react-native-svg

Installing @masumdev/rn-qrcode

npm install @masumdev/rn-qrcode

or

yarn add @masumdev/rn-qrcode

or

bun add @masumdev/rn-qrcode

or

pnpm add @masumdev/rn-qrcode

Usage

Basic Usage

import { QRCode } from '@masumdev/rn-qrcode';

const GeneratorComponent = () => {
  return <QRCode variant="BASIC" value="https://github.com/masumrpg" size={300} backgroundColor="white" errorCorrectionLevel="H" includeBackground />;
};

Advanced Usage

import { QRCode } from '@masumdev/rn-qrcode';
import { View } from 'react-native';

export default function App() {
  // Rain Effect
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <QRCode
        value="Rain Qr Code"
        size={qrSize}
        color="#2074a7"
        version={2}
        eye={{
          topLeft: {
            shape: 'square',
            size: {
              center: 1.2,
              inner: 1.3,
            },
            radius: {
              radiusOuter: 20,
              radiusInner: 13,
              radiusCenter: 10,
            },
          },
          topRight: {
            shape: 'square',
            size: {
              center: 1.2,
              inner: 1.3,
            },
            radius: {
              radiusOuter: 20,
              radiusInner: 13,
              radiusCenter: 10,
            },
          },
          bottomLeft: {
            shape: 'square',
            size: {
              center: 1.2,
              inner: 1.3,
            },
            radius: {
              radiusOuter: 20,
              radiusInner: 13,
              radiusCenter: 10,
            },
          },
        }}
        piece={{
          shape: 'rain',
          size: 1,
        }}
        includeBackground
      />
    </View>
  );
}

API Reference

QRCodeProps

Core properties for customizing the QR code appearance and behavior.

| Prop | Type | Default | Description | | -------------------- | ------------------------ | ------- | ---------------------------- | | value | string | - | The content to be encoded in the QR code. Can be any text, URL, or data string. | | variant | QRCodeVariant | 'BASIC' | The design variant of the QR code. Choose from predefined templates. | | size | number | 256 | The size of the QR code in pixels. Determines both width and height. | | color | string | '#000' | The main color of the QR code elements. Accepts any valid CSS color value. | | backgroundColor | string | 'transparent' | The background color behind the QR code. Set to 'transparent' for no background. | | gradient | QRCodeGradientConfig | - | Advanced gradient configuration for creating beautiful color transitions. | | logo | LogoOptions | - | Options for adding a centered logo image with customizable size and styling. | | piece | PieceOptions | - | Customize the shape and style of individual QR code elements. | | eye | EyeOptions | - | Style the three corner finder patterns (eyes) of the QR code. | | includeBackground | boolean | false | When true, adds a wrapper background element behind the QR code. | | version | QRCodeVersion | - | Set a specific QR code version (1-40). Higher versions can store more data. | | maxVersion | QRCodeVersion | - | The maximum allowed QR code version. Useful for limiting complexity. | | imageClip | ImageProps | - | Props for adding an image as a clip mask to the QR code pattern, SVG Props | | errorCorrectionLevel | QRCodeErrorCorrectionLevel | 'M' | Error correction capability: L (7%), M (15%), Q (25%), or H (30%). |

QRCodeVariant

Choose from a range of predefined templates to quickly style your QR code. | Value | Description | Visual Effect | |-------|-------------|---------------| | 'BASIC' | Simple, basic QR code | Minimalistic, clean | | 'TRIANGLE' | Triangle-shaped QR code | Triangular, elegant | | 'HEART' | Heart-shaped QR code | Hearty, romantic | | 'DOT' | Dotted QR code pattern | Modern, minimalist | | 'WITH_LOGO' | QR code with centered logo | Professional, branded | | 'RAIN' | Rainy QR code with falling pieces | Rainy, atmospheric | | 'LINEAR_GRADIENT' | Linear gradient colored QR code | Smooth, colorful | | 'RADIAL_GRADIENT' | Radial gradient colored QR code | Dynamic, radiant | | 'IMAGE_BACKGROUND' | QR code with image background | Creative, unique |

QRCodeGradientConfig

Create beautiful gradient effects for your QR code with these advanced configuration options.

| Prop | Type | Default | Description | | -------------------- | ---------------------------------------- | ---------- | --------------------------------------------------------------------------- | | type | 'linear' | 'radial' | 'linear' | Choose between linear (straight line) or radial (circular) gradient patterns | | maskLogo | boolean | false | When true, prevents the gradient from overlaying the logo area | | direction | GradientDirection | 'to-right' | Sets the flow direction for linear gradients (see GradientDirection below) | | colors | GradientColor[] | - | Define multiple color stops with position and opacity for smooth transitions | | cx | string | '50%' | Center X position of radial gradient (e.g. '50%' for middle) | | cy | string | '50%' | Center Y position of radial gradient (e.g. '50%' for middle) | | r | string | '50%' | Radius of the radial gradient (e.g. '50%' for half of QR code size) | | fx | string | - | Focal point X position for radial gradient (creates elliptical effects) | | fy | string | - | Focal point Y position for radial gradient (creates elliptical effects) | | x1 | string | '0%' | Starting X position for linear gradient (e.g. '0%' for left edge) | | y1 | string | '0%' | Starting Y position for linear gradient (e.g. '0%' for top edge) | | x2 | string | '100%' | Ending X position for linear gradient (e.g. '100%' for right edge) | | y2 | string | '0%' | Ending Y position for linear gradient (e.g. '0%' for top edge) |

GradientDirection

Specify the flow direction of linear gradients. This setting creates dynamic and visually appealing QR codes.

| Value | Description | Visual Effect | |-------|-------------|---------------| | 'to-right' | Gradient flows from left to right | Horizontal transition →| | 'to-left' | Gradient flows from right to left | Horizontal transition ←| | 'to-bottom' | Gradient flows from top to bottom | Vertical transition ↓| | 'to-top' | Gradient flows from bottom to top | Vertical transition ↑| | 'to-bottom-right' | Gradient flows diagonally from top-left to bottom-right | Diagonal transition ↘| | 'to-bottom-left' | Gradient flows diagonally from top-right to bottom-left | Diagonal transition ↙| | 'to-top-right' | Gradient flows diagonally from bottom-left to top-right | Diagonal transition ↗| | 'to-top-left' | Gradient flows diagonally from bottom-right to top-left | Diagonal transition ↖|

GradientColor

Define smooth color transitions by specifying multiple color stops in your gradient. Each stop controls position, color, and transparency.

| Prop | Type | Description | Example | |------|------|-------------|----------| | offset | string | Position of the color stop along the gradient (0-100%) | '0%' for start, '50%' for middle, '100%' for end | | color | string | Any valid color value (hex, rgb, named colors) | '#FF5733', 'rgb(255,87,51)', 'coral' | | opacity | number | Transparency level between 0 (invisible) and 1 (solid) | 0.8 for 80% opacity |

LogoOptions

Customize the appearance of a centered logo within your QR code. The logo can be an image from your local assets or a remote URL.

| Prop | Type | Default | Description | Notes | |--------------------|-----------|---------|--------------------------------------------------|--------| | source | ImageSource | - | Logo image source (local asset/URL) | See ImageSource below for format details | | size | number | 20% | Logo size as percentage of QR code width | Keep between 10-30% for best scanning | | backgroundColor | string | 'white' | Background color behind the logo | Use light colors for better contrast | | padding | number | 2 | Space around logo in pixels | Helps logo stand out from QR pattern | | borderRadius | number | 0 | Rounded corners for logo background | Higher values create circular shapes |

ImageSource

Specify the source of your logo image. The component supports both local project assets and remote image URLs.

| Type | Description | Example | Best Practices | |------|-------------|----------|----------------| | number | Local image from project assets | require('./assets/logo.png') | Use for bundled images | | string | Remote image from URL | 'https://example.com/logo.png' | Ensure reliable hosting |

Important Guidelines:

• Local assets: Use require() for images in your project directory
• Remote URLs: Provide complete HTTPS URLs for security
• Supported formats: PNG (recommended), JPG, JPEG
• Optimal size: 50-100 pixels for best balance of clarity and scanning
• File size: Keep under 50KB to maintain performance

PieceOptions

Customize the appearance of individual QR code elements (the small squares that make up the pattern).

| Prop | Type | Default | Description | Visual Impact | |---------|--------------------|---------|--------------------------------------------------|---------------| | shape | 'square'|'dot'|'triangle'|'heart'|'rain' | 'square' | Shape of each QR code element | Changes overall pattern style | | size | number | 1 | Scale factor for element size (0.5-2.0) | Affects density and readability | | spacing | number | 0 | Gap between elements in pixels | Creates breathing room in pattern |

EyeOptions

Style the three finder patterns (eyes) in the corners of the QR code. These are crucial for scanner orientation.

| Prop | Type | Default | Description | Impact | |-------------|-----------------------------------|---------|--------------------------------------------------|--------| | topLeft | EyeShapeConfig | {} | Style for top-left corner pattern | Affects scanning reliability | | topRight | EyeShapeConfig | {} | Style for top-right corner pattern | Must remain distinct | | bottomLeft | EyeShapeConfig | {} | Style for bottom-left corner pattern | Helps orientation |

EyeShapeConfig

Detailed configuration for each QR code eye (finder pattern).

| Prop | Type | Default | Description | Best Practice | |-----------|----------------------------------|---------|--------------------------------------------------|---------------| | shape | 'square'|'circle'|'rounded' | 'square' | Overall shape of the eye pattern | Keep distinctive | | size | { center: number, inner: number }| - | Size multiplier for center and inner components | Maintain proportions | | radius | { radiusOuter: number, radiusInner: number, radiusCenter: number } | - | Corner rounding for each part | Balance style with function | | color | string | - | Main color of the eye pattern | Use high contrast | | innerColor| string | - | Color of the inner eye component | Complement main color |

QRCodeVersion

Control the size and data capacity of your QR code.

| Type | Description | Use Case | |------------|------------------------------------------|----------| | number (1-40) | QR code version number | Higher versions = more data, larger size |

Version Guide:

• 1-10: Best for short URLs and text (up to 174 characters)
• 11-20: Medium content (up to 1,663 characters)
• 21-40: Large content like vCards or detailed data

ImageProps

Advanced SVG image properties for creating custom QR code patterns. | Prop | Type | Default | Description | Notes | |--------------------|-----------|---------|--------------------------------------------------|--------| | x | number | - | Horizontal position of the image | Position from left | | y | number | - | Vertical position of the image | Position from top | | width | number | - | Width of the image | In pixels or percentage | | height | number | - | Height of the image | In pixels or percentage | | xlinkHref | ImageSource | string | - | Source of the image (legacy attribute) | Use href instead | | href | ImageSource | string | - | Source of the image | Preferred over xlinkHref | | preserveAspectRatio | string | - | How image should scale (e.g., 'xMidYMid meet') | Controls image fitting | | opacity | number | 1 | Transparency of the image (0-1) | 0 = transparent, 1 = solid | | onLoad | function | - | Callback when image loads | Handles load completion |

QRCodeErrorCorrectionLevel

Balance between data redundancy and error correction capability.

| Level | Error Correction Capacity | Best Used For | |-------|----------------------------|---------------| | L | ~7% damage recovery | Clean environments, maximum data capacity | | M | ~15% damage recovery | Standard use, good balance | | Q | ~25% damage recovery | Public display, some wear expected | | H | ~30% damage recovery | Outdoor use, high reliability needed |

License

MIT