Barcode Scanner vs Object Output

Understanding the differences between the Barcode Scanner (cross-platform, MLKit) and the Object Output (iOS only, native)

Both the Barcode Scanner and the Object Output allow scanning codes in the Camera. While they are similar, there are a few subtle differences between the two.

Implementation detail

The Object Output is a native Camera feature built into iOS via AVCaptureMetadataOutput, which has very little overhead and is used throughout the OS - even in the stock Camera app. Since Android does not have a native Object Output, the Object Output is iOS only.

The Barcode Scanner on the other hand is a custom Frame Processing pipeline using MLKit, which is a third-party dependency and contains the ~2.4MB ML Model - see MLKit: Barcode scanning for more information. It works on both iOS and Android.

Platform Agnostic

Since the Barcode Scanner uses the same MLKit implementation on iOS and Android, the scanned codes are platform-agnostic. In previous versions of VisionCamera, there were some codes readable on iOS but not on Android (like 'upc-a' vs 'ean-13') - this is solved by using the Barcode Scanner on iOS too.

For most apps that only need to scan QR codes and Barcodes, the leanest setup is to use the Object Output on iOS and the Barcode Scanner on Android. This keeps MLKit and its ~2.4 MB model out of the iOS app, and avoids iOS Simulator build failures because the MLKit Barcode Scanning dependency does not ship Simulator binaries.

React Native can select the implementation automatically when you split the scanner into two platform-specific files, for example Scanner.ios.tsx using useObjectOutput(...) and Scanner.android.tsx using useBarcodeScannerOutput(...).

Since native dependencies are autolinked independently of JavaScript imports, also exclude react-native-vision-camera-barcode-scanner from iOS autolinking:

On Expo SDK 54 and newer, exclude the package through Expo Autolinking in your app's package.json:

package.json
{
  "expo": {
    "autolinking": {
      "ios": {
        "exclude": ["react-native-vision-camera-barcode-scanner"]
      }
    }
  }
}

On older Expo SDK versions, use the react-native.config.js setup from the React Native tab instead.

Create or update react-native.config.js in your app's root directory:

react-native.config.js
module.exports = {
  dependencies: {
    'react-native-vision-camera-barcode-scanner': {
      platforms: {
        ios: null,
      },
    },
  },
}

After changing the autolinking configuration, reinstall your iOS Pods. This requires a little more setup than using the Barcode Scanner on both platforms, but is usually the best option when the Object Output supports all code formats and result data your app needs.

Different Object/Code Types

The Object Output supports scanning more than just Barcodes - it allows detecting Faces ('face'), Bodies ('human-body', 'dog-body' or 'cat-body') and more.

The Barcode Scanner is optimized for machine-readable codes like 'qr-code' or 'code-128'.

Custom Decoding

The Barcode Scanner allows reading the code's value both as a raw string as well as a raw ArrayBuffer. Additionally, it provides a human-friendly display value, useful for codes that are not human-friendly like 'wifi'.

Usage in a Frame Processor

The Barcode Scanner can be imperatively called inside a Frame Processor (see "The Frame Output"), which offers more flexibility for customization.