The Barcode Scanner

Using the Barcode Scanner view, output or plugin to detect Barcodes and QR codes

The Barcode Scanner allows detecting machine readable codes (like Barcodes or QR codes) using MLKit. It ships a simple <CodeScanner /> view, a Barcode Scanner Frame Processor Plugin, and a Barcode Scanner CameraOutput via the react-native-vision-camera-barcode-scanner library.

Unlike the Object Output (which is iOS-only), the Barcode Scanner works on both iOS and Android.

Dependency Required

The Barcode Scanner requires react-native-vision-camera-barcode-scanner to be installed.

Using the Barcode Scanner

The <CodeScanner /> view is a simple view component to scan Barcodes:

function App() {
  const isFocused = useIsFocused()

  return (
    <CodeScanner
      isActive={isFocused}
      barcodeFormats={['all']}
      onBarcodeScanned={(barcodes) => {
        console.log(`Scanned ${barcodes.length} barcodes!`)
      }}
      onError={(error) => {
        console.error(`Error scanning barcodes:`, error)
      }}
    />
  )
}

For more control around the <Camera /> or CameraSession, you can also create a Barcode Scanner CameraOutput via useBarcodeScannerOutput(...), which can then be attached to a session:

function App() {
  const barcodeOutput = useBarcodeScannerOutput({
    barcodeFormats: ['all'],
    onBarcodeScanned(barcodes) {
      console.log(`Scanned ${barcodes.length} barcodes!`)
    },
    onError(error) {
      console.error(`Failed to scan barcodes!`, error)
    }
  })

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

For full control over scanning and coordinate system conversions, create a BarcodeScanner directly via useBarcodeScanner(...), which can then be used inside a Frame Processor (see "The Frame Output") to scan Barcodes in a Frame:

function App() {
  const barcodeScanner = useBarcodeScanner({
    barcodeFormats: ['all'],
  })
  const frameOutput = useFrameOutput({
    onFrame(frame) {
      'worklet'
      const barcodes = barcodeScanner.scanCodes(frame)
      console.log(`Detected ${barcodes.length} barcodes!`)
      frame.dispose()
    }
  })

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

Configuring Barcode Formats

The code example above are configured to detect all BarcodeFormats. To improve performance, you should narrow barcodeFormats down to only the formats you need - for example 'code-128' - which is a common Barcode Format, or 'qr-code' for square QR codes.

Test it

To verify your <CodeScanner /> works, try scanning this example 'code-128' Barcode:

An example Barcode 128

Tip

See "A Barcode" for more information about a Barcode.

On this page

Using the Barcode ScannerConfiguring Barcode FormatsTest it