❤
npm
Sign UpSign In

@masumdev/rn-qrcode
TypeScript icon, indicating that this package has built-in type declarations

1.0.6 • Public • Published

@masumdev/rn-qrcode

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

Sponsor

npm version npm downloads platforms expo compatible

Demo

Toast Demo Iphone Toast Demo

Youtube Tutorial

React Native Toast Demo

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

Readme

Keywords

Package Sidebar

Install

npm i @masumdev/rn-qrcode

Repository

github.com/masumrpg/masumdev

Homepage

docs.masum.cloud/docs/category/-qrcode-pack

Fund this package

Weekly Downloads

19

Version

1.0.6

License

MIT

Unpacked Size

218 kB

Total Files

89

Last publish

Collaborators

  • devmasum
Try on RunKit
Report malware