React Native TBS QR

Modern QR generate + scan + permissions for React Native — TypeScript-first, New Architecture, part of the TBS lineup from thebinarysolution.

Status: implementation through adapters + optional renderers. Design: docs/design/MASTER-DESIGN.md.

Why this library

• Unified scan + generate + permissions under one typed API
• Adapter-first scanning (VisionCamera V5 / Expo Camera / Web) — no owned camera stack in v1
• Pure matrix encoder + safe styling validators (contrast, logo caps, ECC H for logos)
• QR-only v1; New Architecture only (RN 0.79+)
• Zero required native peers for generation

Install

npm install react-native-tbs-qr

Expo

{
  "expo": {
    "plugins": ["react-native-tbs-qr/config"]
  }
}

Optional peers

| Feature | Install | |---------|---------| | VisionCamera scan | react-native-vision-camera react-native-vision-camera-barcode-scanner react-native-nitro-modules react-native-nitro-image | | Expo scan | expo-camera | | SVG component | react-native-svg | | Skia component | @shopify/react-native-skia |

Generate

import { QRCode, encode, encodeStyled, wifi } from 'react-native-tbs-qr';

const value = wifi({ ssid: 'Home', password: 'secret', security: 'WPA' });
<QRCode value={value} size={220} />

const { svg, report } = encodeStyled({
  value: 'https://example.com',
  qrStyle: { moduleShape: 'rounded', color: '#111', backgroundColor: '#fff' },
});

Scan

import { useCameraPermission } from 'react-native-tbs-qr';
import { VisionCameraQRScanner } from 'react-native-tbs-qr/scan/vision-camera';
// or: import { ExpoCameraQRScanner } from 'react-native-tbs-qr/scan/expo-camera';

const { status, request } = useCameraPermission();
<VisionCameraQRScanner mode="one-shot" onScan={(r) => console.log(r.value)} />

Subpaths

| Subpath | Purpose | |---------|---------| | . | Types, encode, SVG helpers, QRCode, payloads, permissions, scan policy | | /generate | Encoder | | /render/svg | Zero-dep SVG / data-URI | | /render/rn-svg | Optional react-native-svg | | /render/skia | Optional Skia | | /scan | Provider-neutral policy | | /scan/vision-camera | VisionCamera adapter | | /scan/expo-camera | Expo Camera adapter | | /scan/web | BarcodeDetector | | /payloads | Payload serializers | | /permissions | Permission helpers | | /config | Expo config plugin |

Scripts

npm run typescript
npm test
npm run build

License

MIT