← All posts

react-native-qr-camera-pro: a native QR/barcode scanner for New Architecture

Swift/Kotlin, TurboModules and Fabric, BarcodeThrottler, and zero JS frame processing—a lean module instead of a heavy camera SDK.

Tags
NewsmobileReact
react-native-qr-camera-pro: a native QR/barcode scanner for New Architecture
Contents

In brief

The author of react-native-qr-camera-pro on Dev.to describes a QR and barcode scanner for React Native built entirely in native code: Swift on iOS, Kotlin on Android, TurboModules and Fabric, with no frame processing in JavaScript. The JS bridge fires at most once every 500 ms—everything else stays in AVFoundation and CameraX + ML Kit.

What happened

Most QR libraries for React Native either lack New Architecture support or pull in a full camera SDK for a single feature. The common alternative is piping frames through JS and decoding with WASM or a JS decoder—it works but stresses the JS thread and caps frame rate.

react-native-qr-camera-pro takes a different path:

  • iOS — AVCaptureMetadataOutput: Apple detects codes; frames are not copied to user space;
  • Android — CameraX ImageAnalysis + ML Kit with hardware acceleration where available.

Architecture is three layers: a public TS API (QrCameraProView, hooks useBarcodeScanner / useCameraError, imperative startScanning / stopScanning / toggleTorch), a Codegen-driven bridge (TurboModules + Fabric), and a native platform with zero JS in the frame pipeline.

Both platforms use BarcodeThrottler to suppress duplicates: same code within 500 ms is ignored; a different code passes through immediately. The preview (AVCaptureVideoPreviewLayer / CameraX PreviewView) lives in Fabric and is decoupled from the React render cycle.

Supported formats include QR, EAN-8/13, Code 128/39/93, PDF-417, Aztec, Data Matrix, ITF, and more.

Why it matters

Scanning is a hot path: camera, 30+ fps, real time. Serializing every frame over the legacy bridge is a bottleneck. New Architecture (JSI, TurboModules without JSON, Fabric views) is built for predictable native-module performance.

The native-only pattern is a template for feature modules:

  • avoid monolithic SDKs for one job;
  • follow platform threading rules (iOS: do not call startRunning() on main; Android: analysis on a dedicated executor);
  • throttle at the JS boundary instead of flooding the bridge.

For teams on RN 0.7x+ with New Architecture enabled, this is a practical alternative to unmaintained scanner packages.

In practice

If you need QR/barcode scanning in React Native:

  1. Install react-native-qr-camera-pro; on iOS add NSCameraUsageDescription to Info.plist and run pod install.
  2. Render <QrCameraProView style={{ flex: 1 }} /> and subscribe with useBarcodeScanner.
  3. Control the session explicitly: startScanning() / stopScanning()—the throttler resets on stop.
  4. Handle camera errors via useCameraError—permissions and hardware failures come from native code.
  5. Use toggleTorch(true|false) for the torch without extra preview re-renders.

Use cases from the article: retail/inventory, event check-in, logistics, payment QR, 2FA. The roadmap mentions viewfinder crop, haptic feedback, and an Expo plugin.

Takeaway

react-native-qr-camera-pro is an example of a well-built native module for New Architecture: narrow scope, platform APIs instead of JS frame processing, deliberate bridge throttling. Worth reading the source if you design your own camera/barcode module or migrate off legacy scanner libraries.