← Усі статті

react-native-qr-camera-pro: нативний QR/штрихкод-сканер під New Architecture

Swift/Kotlin, TurboModules і Fabric, BarcodeThrottler і нульова обробка кадрів у JS — lean-модуль замість важкого camera SDK.

Теги
НовиниmobileReact
react-native-qr-camera-pro: нативний QR/штрихкод-сканер під New Architecture
Зміст

Коротко

Автор бібліотеки react-native-qr-camera-pro на Dev.to описав сканер QR і штрихкодів для React Native, зібраний цілком на нативному коді: Swift на iOS, Kotlin на Android, TurboModules і Fabric, без обробки кадрів у JavaScript. Міст до JS спрацьовує не частіше раз на 500 ms — решта залишається в AVFoundation і CameraX + ML Kit.

Що сталося

Більшість QR-бібліотек для React Native або не підтримують New Architecture, або тягнуть повноцінний camera SDK заради однієї функції. Альтернатива — гнати кадри через JS і декодувати WASM/JS-декодером: працює, але тисне на JS thread і ріже frame rate.

react-native-qr-camera-pro вирішує інакше:

  • iOS — AVCaptureMetadataOutput: Apple сама детектує коди, буфери не копіюються в user space;
  • Android — CameraX ImageAnalysis + ML Kit з апаратним прискоренням де доступно.

Архітектура — три шари: публічний TS API (QrCameraProView, хуки useBarcodeScanner / useCameraError, imperative startScanning / stopScanning / toggleTorch), Codegen-driven bridge (TurboModules + Fabric), нативна платформа з zero JS у pipeline кадрів.

На обох платформах BarcodeThrottler пригнічує дублікати: той самий код протягом 500 ms — ігнор, інший код — одразу проходить. Preview (AVCaptureVideoPreviewLayer / CameraX PreviewView) живе в Fabric і не прив’язаний до циклу рендера React.

Підтримуються QR, EAN-8/13, Code 128/39/93, PDF-417, Aztec, Data Matrix, ITF та інші формати.

Чому це важливо

Сканування — типовий «гарячий» сценарій: камера, 30+ fps, real-time. Будь-яка серіалізація через legacy bridge на кожен кадр — вузьке місце. New Architecture (JSI, TurboModules без JSON, Fabric для view) якраз про передбачувану продуктивність нативних модулів.

Підхід «native-only» показує шаблон для feature-модулів:

  • не тягнути monolithic SDK заради однієї задачі;
  • тримати threading за документацією платформи (iOS: startRunning() не на main; Android: analysis на dedicated executor);
  • throttle на межі JS, а не «шлемо все підряд».

Для команд на RN 0.7x+ з увімкненою New Architecture це практична альтернатива застарілим scanner-пакетам.

На практиці

Якщо потрібен QR/штрихкод у React Native:

  1. Встановіть react-native-qr-camera-pro, на iOS додайте NSCameraUsageDescription у Info.plist, виконайте pod install.
  2. Рендеріть <QrCameraProView style={{ flex: 1 }} /> і підпишіться через useBarcodeScanner.
  3. Керуйте сесією явно: startScanning() / stopScanning() — throttler скидається при stop.
  4. Обробляйте помилки камери через useCameraError — permission і hardware failures приходять із нативної сторони.
  5. Для torch використовуйте toggleTorch(true|false) — без зайвих re-render preview.

Кейси зі статті: retail/inventory, event check-in, logistics, payment QR, 2FA. У roadmap автора — crop viewfinder, haptic feedback, Expo plugin.

Підсумок

react-native-qr-camera-pro — приклад «правильного» нативного модуля під New Architecture: lean scope, platform APIs замість JS frame processing, свідомий throttling на мосту. Має сенс дивитися вихідники, якщо проєктуєте свій camera/barcode-модуль або мігруєте з legacy scanner-бібліотек.