react-native-wayscanner

Super-sensitive barcode & QR code scanner for React Native.

Pipeline: Vision Camera → Frame Processor → C++ preprocess → MLKit decode → ZXing fallback

100% Gratis — Tanpa Biaya Lisensi

Semua komponen open-source, tidak ada SDK berbayar:

| Komponen | Lisensi | Biaya | |----------|---------|-------| | Vision Camera V5 | MIT | Gratis | | Google MLKit Barcode | Free (bundled ~2.4MB) | Gratis | | zxing-cpp (Android) | MIT | Gratis | | ZXingObjC (iOS) | Apache 2.0 | Gratis | | C++ Preprocessor | MIT | Gratis | | npm publish | Public package | Gratis |

OpenCV opsional (juga gratis) — default memakai preprocessor C++ built-in tanpa dependency tambahan.

Features

• Multi-pass C++ preprocessing (histogram equalize, adaptive threshold, sharpen)
• Google MLKit as primary decoder (iOS + Android)
• ZXing fallback for edge cases
• Three sensitivity levels: normal | high | ultra
• Drop-in <WayScanner /> component or headless useWayScanner() hook
• Built on Vision Camera V5 + Nitro Modules

Installation

npm install react-native-wayscanner \
  react-native-vision-camera \
  react-native-vision-camera-worklets \
  react-native-worklets \
  react-native-nitro-modules \
  react-native-nitro-image

iOS

cd ios && pod install

Add to Info.plist:

<key>NSCameraUsageDescription</key>
<string>Camera is needed to scan barcodes</string>

Android

Add to AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

Quick Start

import { WayScanner } from 'react-native-wayscanner';

export default function App() {
  return (
    <WayScanner
      isActive={true}
      formats={['qr-code', 'ean-13']}
      sensitivity="ultra"
      onBarcodeScanned={(codes) => {
        console.log('Scanned:', codes[0]?.rawValue);
        console.log('Engine:', codes[0]?.decodeEngine);
        console.log('Pass:', codes[0]?.preprocessPass);
      }}
      style={{ flex: 1 }}
    />
  );
}

Advanced — Frame Processor

import { Camera, useFrameOutput } from 'react-native-vision-camera';
import { useWayScanner } from 'react-native-wayscanner';
import { useRunOnJS } from 'react-native-worklets';

function CustomScanner() {
  const scanner = useWayScanner({
    formats: ['qr-code'],
    sensitivity: 'ultra',
    enableZXingFallback: true,
  });

  const onScan = useRunOnJS((value: string) => console.log(value));

  const frameOutput = useFrameOutput({
    onFrame(frame) {
      'worklet';
      const codes = scanner.scanCodes(frame);
      if (codes.length > 0 && codes[0]?.rawValue) {
        onScan(codes[0].rawValue);
      }
      frame.dispose();
    },
  });

  return (
    <Camera device="back" isActive outputs={[frameOutput]} style={{ flex: 1 }} />
  );
}

API

<WayScanner />

| Prop | Type | Default | Description | |------|------|---------|-------------| | isActive | boolean | — | Enable/disable scanning | | formats | TargetBarcodeFormat[] | — | Barcode types to detect | | sensitivity | 'normal' \| 'high' \| 'ultra' | 'high' | Preprocessing intensity | | enableZXingFallback | boolean | true | Use ZXing when MLKit fails | | enableMultiPass | boolean | true | Enable OpenCV preprocessing | | minConfidence | number | 0.7 | Minimum confidence threshold | | debounceMs | number | 500 | Debounce duplicate scans | | onBarcodeScanned | (codes) => void | — | Scan callback |

Sensitivity Levels

| Level | Passes | Engines | ~Latency | |-------|--------|---------|----------| | normal | Original frame | MLKit | ~10ms | | high | + CLAHE | MLKit | ~20ms | | ultra | + threshold + sharpen + invert | MLKit → ZXing | ~33ms |

Development

npm install --legacy-peer-deps
npm run build
npm run specs

# Setup & run example app (gratis)
npm run example:setup
cd example && npx react-native run-android

Enable OpenCV (optional, recommended for production)

Android — add to android/build.gradle:

implementation 'org.opencv:opencv:4.9.0'

And in android/CMakeLists.txt set WAYSCANNER_USE_OPENCV=ON.

iOS — add to Podfile:

pod 'OpenCV', '~> 4.3'

Architecture

┌─────────────────────────────────────────────────┐
│  React Native (JS)                              │
│  WayScanner / useWayScanner / useFrameOutput    │
└────────────────────┬────────────────────────────┘
                     │ JSI (Nitro)
┌────────────────────▼────────────────────────────┐
│  Native (Kotlin / Swift)                        │
│  HybridWayScanner.scanCodes(frame)              │
└────────────────────┬────────────────────────────┘
                     │
┌────────────────────▼────────────────────────────┐
│  C++ Engine (shared iOS + Android)              │
│  Preprocessor → multi-pass image enhancement    │
└────────────────────┬────────────────────────────┘
                     │
          ┌──────────┴──────────┐
          ▼                     ▼
    ┌──────────┐         ┌──────────┐
    │  MLKit   │         │  ZXing   │
    │ (primary)│         │(fallback)│
    └──────────┘         └──────────┘

License

MIT