Skip to main content

Basic Usage

tip

The @masumdev/rn-qrcode and @masumdev/rn-qrcode-scanner packages provide simple ways to implement QR code generation and scanning functionality in your Expo React Native applications. These packages are perfect for applications that need to handle QR codes efficiently.

These packages are designed with performance and ease of use in mind, offering:

  • Simple integration with Expo and React Native projects
  • Customizable QR code generation with various styles
  • Fast and accurate QR code scanning
  • Built-in error handling and validation
Key Features
  • QR Code Generator: Create customizable QR codes with various styles and error correction levels
  • QR Code Scanner: High-performance scanner with real-time detection and customizable UI
  • Type Safety: Full TypeScript support for better development experience
  • Expo Compatible: Seamlessly works with Expo managed and bare workflow

QRCode Generator​

Basic Implementation​

QRCode @masumdev/rn-qrcode Basic Usage​

Props Description
  • variant: Visual style of the QR code ("BASIC", "DOTS", etc.)
  • value: The data to encode in the QR code (text, URL, etc.)
  • size: Size of the QR code in pixels
  • backgroundColor: Background color of the QR code
  • errorCorrectionLevel: Error correction capability (L: 7%, M: 15%, Q: 25%, H: 30%)
  • includeBackground: Whether to include a background layer
import { QRCode } from '@masumdev/rn-qrcode';

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

QRCodeScanner @masumdev/rn-qrcode-scanner Basic Usage​

Scanner Props
  • core.onSuccessfulScan: Callback function when a QR code is successfully scanned
  • core.scanInterval: Time between scans in milliseconds (default: 2000)
  • core.enableVibration: Toggle vibration feedback (default: true)
  • core.cameraProps: Additional camera configuration options
Pro Tip

Make sure to test your QR code scanner in different lighting conditions to ensure optimal performance. The scanner works best with good lighting and a steady hand!

For best results:

  • Hold the device steady
  • Ensure good lighting conditions
  • Keep the QR code within the scanning area
  • Maintain an appropriate distance (15-30cm)
import { QRCodeScanner } from '@masumdev/rn-qrcode-scanner';

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

  return (
    <QRCodeScanner
        core={{
          onSuccessfulScan: handleSuccessfulScan,
        }}
    />
  );
};

export default ScannerComponent;
Security Best Practice

When implementing QR code scanning in your application, it's recommended to validate and sanitize the scanned data before processing it to ensure safe and secure data handling.

Video Tutorial