Skip to main content

Tutorial

🚀 Step-by-Step Guide to implementing QR Code generation and scanning in React Native using @masumdev/rn-qrcode and @masumdev/rn-qrcode-scanner packages.

Video Tutorial​

Watch our detailed video guide for a hands-on implementation walkthrough:

Features​

QR Code Generator (@masumdev/rn-qrcode)​

  • 🎨 Rich QR Code styling with customizable colors and patterns
  • 🖼️ Custom logo placement support
  • 🌈 Beautiful preset templates and themes
  • 🔍 Comprehensive format support
  • 🎯 Adjustable error correction levels
  • 📦 Seamless React Native integration

QR Code Scanner (@masumdev/rn-qrcode-scanner)​

  • 📱 Advanced camera-based QR scanning
  • 🔍 Multiple format support
  • 💫 Real-time scanning
  • 🎯 Customizable scanning area
  • 🔦 Torch/flashlight control
  • 🌓 Theme support (light/dark)

Prerequisites​

Before you begin, make sure you have:

  • React Native project set up
  • Basic understanding of React Native
  • Camera permissions configured (for scanner)

Installation​

Follow our detailed installation guide to set up both packages.

Basic Implementation​

QR Code Generator​

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

const GeneratorComponent = () => {
  return (
    <QRCode
      value="https://example.com"
      size={200}
      variant="BASIC"
      backgroundColor="white"
    />
  );
};

QR Code Scanner​

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

const ScannerComponent = () => {
  const handleScan = (data) => {
    console.log('Scanned:', data.code);
  };

  return (
    <QRCodeScanner
      core={{
        onSuccessfulScan: handleScan
      }}
      uiControls={{
        showControls: true,
        showTorchButton: true
      }}
    />
  );
};

Advanced Usage​

Custom Styling​

Customize QR code appearance:

<QRCode
  value="https://example.com"
  size={250}
  variant="LINEAR_GRADIENT"
  gradient={{
    type: 'linear',
    colors: ['#FF0080', '#7928CA'],
    rotation: 45
  }}
  eye={{
    topLeft: { shape: 'circle', color: '#FF0080' },
    topRight: { shape: 'circle', color: '#7928CA' },
    bottomLeft: { shape: 'circle', color: '#FF0080' }
  }}
/>

Validation​

Implement custom validation for scanned codes:

const validateQRCode = (code) => {
  if (!code) {
    return {
      valid: false,
      message: 'Empty QR code detected'
    };
  }

  if (code.startsWith('https://')) {
    return {
      valid: true,
      code,
      message: 'Valid URL detected'
    };
  }

  return {
    valid: false,
    message: 'Invalid QR code format'
  };
};

<QRCodeScanner
  core={{
    onSuccessfulScan: handleScan,
    validate: validateQRCode
  }}
/>

For more advanced features and customization options, check our Advanced Usage Guide.