vision-camera-barcode-scanner

• NEW: With Inverted Scanning Feature - Scan inverted barcodes and QR codes

Features

High performance barcode scanner for React Native using VisionCamera.

• Modern and future-proof: Built on react-native-vision-camera with minimal native dependencies for each platforms to minimize future build-failure risk.

• Minimal footprint: Leverages Google's MLKit BarcodeScanner on Android and Apple's Vision VNDetectBarcodesRequest.

• Powerful & Performant: The implementation has been tailored for advanced use cases where performance is critical. Scanning barcodes is butter smooth at 30fps, and you can customize the detection speed loop (detection fps).

• Hooks based: Exposes easy-to-use hooks useBarcodeScanner to quickly get started

Demo

A working project can be found at vision-camera-barcode-scanner-example

Install

[!WARNING] The project is currently trying to closely track the react-native-vision-camera v4, The latest 0.11+ releases are made to work with the latest react-native-vision-camera release only (currently 4.0.0)

npm i @kaizer433/vision-camera-barcode-scanner
# or
yarn add @kaizer433/vision-camera-barcode-scanner

Dependencies

This package relies on:

• react-native-vision-camera@>=3
• react-native-worklets-core

You must add them as dependencies to your project:

npm install react-native-vision-camera react-native-worklets-core
# or
yarn add react-native-vision-camera react-native-worklets-core
# or
pnpm add react-native-vision-camera react-native-worklets-core

Then you must follow their respective installation instructions:

• react-native-worklets-core

Quickstart

import {
  CameraHighlights,
  useBarcodeScanner,
} from "@kaizer433/vision-camera-barcode-scanner";
import type { FunctionComponent } from "react";
import { StyleSheet } from "react-native";

export const App: FunctionComponent = () => {
  // @NOTE you must properly ask for camera permissions first!
  // You should use `PermissionsAndroid` for Android and `Camera.requestCameraPermission()` on iOS.

  const { props: cameraProps, highlights } = useBarcodeScanner({
    fps: 5,
    barcodeTypes: ["qr", "ean-13"], // optional
    checkInverted:true,//if you want to scan inverted
    onBarcodeScanned: (barcodes) => {
      "worklet";
      console.log(
        `Scanned ${barcodes.length} codes with values=${JSON.stringify(
          barcodes.map(({ value }) => value),
        )} !`,
      );
    },
  });

  const devices = useCameraDevices();
  const device = devices.find(({ position }) => position === "back");
  const format = useCameraFormat(device, [
    { videoResolution: { width: 1920, height: 1080 } },
  ]);
  if (!device) {
    return null;
  }

  return (
    <View style={{ flex: 1 }}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive
        {...cameraProps}
      />
      <CameraHighlights highlights={highlights} color="peachpuff" />
    </View>
  );
};