← Все статьи

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

Нативный модуль на Swift/Kotlin, без обработки кадров в JS, с TurboModules и Fabric.

Теги
НовостиmobileReact
Содержание

Коротко

Автор библиотеки 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 либо не поддерживают новую архитектуру, либо тянут полноценный 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 на каждый кадр — узкое место. Новая архитектура (JSI, TurboModules без JSON, Fabric для view) как раз про предсказуемую производительность нативных модулей.

Подход «native-only» показывает шаблон для feature-модулей:

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

Для команд на RN 0.7x+ с включённой новой архитектурой это практичная альтернатива устаревшим 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.

Кейсы из статьи: розничная торговля, инвентаризация, регистрация на мероприятиях, логистика, оплатные QR, 2FA. В планах автора — crop viewfinder, haptic feedback, Expo plugin.

Итог

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