@masumdev/rn-qrcode-scanner

@masumdev/rn-qrcode-scanner

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

Note: Currently, this library only supports Android platform. iOS support is under development and will be available in future releases.

Demo

Youtube Tutorial

Features

• 📱 Advanced QR Code scanning with camera support
• 🔍 Multiple format support (URL, text, contact info, etc.)
• 💫 Real-time scanning with high performance
• 🎯 Customizable scanning area and frame
• 🛡️ Built-in camera permission handling
• 📳 Haptic feedback on successful scans
• 🎨 Customizable UI elements (corners, overlay, controls)
• 🔦 Torch/flashlight control support
• ⏱️ Cooldown timer between scans
• ✅ Custom validation support
• 🌓 Theme support (light/dark mode)
• ⚡ Optimized for Android platform

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",
  "expo": ">=50.0.0",
  "expo-camera": ">=14.0.0",
  "expo-haptics": ">=12.8.0",
  "expo-router": ">=3.4.0",
  "@expo/vector-icons": ">=14.0.0"
}

Add in app.json

{
  // existing confoguration
  {
  "plugins": [
    "expo-router",
    [
      "expo-camera",
      {
        "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
        "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
        "recordAudioAndroid": true
      }
    ]
  ]
}

}

Installing peer dependencies

npm install expo-camera expo-haptics expo-router @expo/vector-icons

or

yarn add expo-camera expo-haptics expo-router @expo/vector-icons

or

bun add expo-camera expo-haptics expo-router @expo/vector-icons

or

pnpm add expo-camera expo-haptics expo-router @expo/vector-icons

Installing @masumdev/rn-qrcode-scanner

npm install @masumdev/rn-qrcode-scanner

or

yarn add @masumdev/rn-qrcode-scanner

or

bun add @masumdev/rn-qrcode-scanner

or

pnpm add @masumdev/rn-qrcode-scanner

Usage

Basic Usage

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;

Advanced Usage

import {
  OnSuccessfulScanProps,
  QRCodeScanner,
  QRCodeValidator,
} from '@masumdev/rn-qrcode-scanner';
import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

const QRCodeScannerScreen = () => {
  const [scannedMember, setScannedMember] = useState<string | null>(null);

  const handleSuccessfulScan = (data: OnSuccessfulScanProps) => {
    if (data.code) {
      setScannedMember(data.code);
    }
    console.log(data);
  };

  const validateQRCode: QRCodeValidator = (code: string) => {
    // Example: Only accept URLs starting with https://
    // if (code.startsWith('https://')) {
    //   return { valid: true, code };
    // }

    // // Example: Accept product codes with specific format
    // if (/^PROD-\d{6}$/.test(code)) {
    //   return { valid: true, code };
    // }

    if (code) {
      return { valid: true, code, message: 'Success' };
    }

    return {
      valid: false,
      message:
        'Invalid QR code format. Expected HTTPS URL or product code (PROD-XXXXXX).',
    };
  };

  return (
    <View style={StyleSheet.absoluteFill}>
      <QRCodeScanner
        // Core functionality
        core={{
          onSuccessfulScan: handleSuccessfulScan,
          validate: validateQRCode,
        }}
        // Scanning behavior
        scanning={{
          cooldownDuration: 3000,
          scanningArea: {
            // tolerance: 80,∂
          },
        }}
        // UI Controls
        uiControls={{
          showControls: true,
          showStatus: true,
          showTorchButton: false, // We're using custom controls
        }}
        // Appearance
        appearance={{
          theme: 'light',
          overlayStyle: {
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            opacity: 0.9,
          },
          frameStyle: {
            width: 280,
            height: 280,
            borderRadius: 20,
          },
          cornerStyle: {
            color: '#00AAFF',
            width: 4,
            length: 30,
          },
          statusStyle: {
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            textColor: '#FFFFFF',
            borderRadius: 12,
            padding: 10,
            fontWeight: '600',
          },
        }}
      />

      {scannedMember && (
        <View style={styles.bottomContainer}>
          <View style={styles.infoContainer}>
            <Text style={styles.memberText}>{scannedMember}</Text>
          </View>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  bottomContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
  infoContainer: {
    backgroundColor: 'white',
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    padding: 24,
  },
  memberText: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 8,
  },
});

export default QRCodeScannerScreen;

API Reference

QRCodeScanner Props

QRCodeScanner component accepts several prop groups that control different aspects of its functionality:

Core Props

Prop	Type	Required	Description
onSuccessfulScan	(state: OnSuccessfulScanProps) => void	Yes	Callback function called when QR code is successfully scanned
validate	QRCodeValidator	No	Custom validation function for scanned QR codes

Scanning Props

Prop	Type	Default	Description
cooldownDuration	number	2000	Time in milliseconds between scans
scanningArea	ScanningAreaProps	-	Configure the scanning target area

ScanningAreaProps

Prop	Type	Default	Description
targetX	number	-	X coordinate of scanning target
targetY	number	-	Y coordinate of scanning target
tolerance	number	-	Tolerance area around target coordinates

UI Controls Props

Prop	Type	Default	Description
showControls	boolean	true	Show/hide control buttons
showStatus	boolean	true	Show/hide status information
showTorchButton	boolean	true	Show/hide torch control button

Appearance Props

Prop	Type	Default	Description
theme	'light' | 'dark'	'light'	UI theme selection
overlayStyle	OverlayStyle	-	Customize scanner overlay
frameStyle	FrameStyle	-	Customize scanner frame
cornerStyle	CornerStyle	-	Customize corner markers
controlButtonStyle	ControlButtonStyle	-	Customize control buttons
statusStyle	StatusStyle	-	Customize status display

OverlayStyle

Prop	Type	Description
backgroundColor	string	Background color of overlay
opacity	number	Opacity level of overlay

FrameStyle

Prop	Type	Description
width	number	Width of scanning frame
height	number	Height of scanning frame
borderRadius	number	Border radius of frame corners

CornerStyle

Prop	Type	Description
color	string	Color of corner markers
width	number	Width of corner lines
length	number	Length of corner lines

StatusStyle

Prop	Type	Description
backgroundColor	string	Background color of status box
textColor	string	Color of status text
borderRadius	number	Border radius of status box
padding	number	Padding inside status box
fontWeight	string	Font weight of status text

Callbacks Props

Prop	Type	Description
onTorchChange	(isOn: boolean) => void	Called when torch state changes
onScanStart	() => void	Called when scanning starts
onScanEnd	() => void	Called when scanning ends
onCooldownStart	(duration: number) => void	Called when cooldown period starts
onCooldownEnd	() => void	Called when cooldown period ends

Haptics Props

Prop	Type	Default	Description
enableHapticFeedback	boolean	true	Enable/disable haptic feedback
customHapticFeedback	{ success?: NotificationFeedbackType; error?: NotificationFeedbackType }	-	Custom haptic feedback settings

Navigation Props

Prop	Type	Description
onBackPress	() => void	Custom back button handler
showBackButton	boolean	Show/hide back button
backButtonIcon	string	Icon name for back button

Custom Components Props

Prop	Type	Description
renderCustomStatus	(statusInfo: StatusInfo) => React.ReactNode	Custom status component renderer
renderCustomControls	(controls: ControlsInfo) => React.ReactNode	Custom controls component renderer

Custom Styles Props

Prop	Type	Description
containerStyle	ViewStyle	Custom styles for container
statusBoxStyle	ViewStyle	Custom styles for status box
statusTextStyle	TextStyle	Custom styles for status text

License

MIT