@masumdev/rn-qrcode v1.0.6

@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.

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.

GradientDirection

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

GradientColor

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

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.

ImageSource

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

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).

EyeOptions

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

EyeShapeConfig

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

QRCodeVersion

Control the size and data capacity of your QR code.

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.

License

MIT