---
title: The Barcode Scanner
description: Using the Barcode Scanner view, output or plugin to detect Barcodes and QR codes
---

import { Tab, Tabs } from 'fumadocs-ui/components/tabs'

The Barcode Scanner allows detecting machine readable codes (like Barcodes or QR codes) using [MLKit](https://developers.google.com/ml-kit).
It ships a simple [`<CodeScanner />`](/api/react-native-vision-camera-barcode-scanner/views/CodeScanner) view, a Barcode Scanner Frame Processor Plugin, a Barcode Scanner [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput), and still image scanning for [`Image`](https://github.com/mrousavy/react-native-nitro-image) instances via the [react-native-vision-camera-barcode-scanner](/api/react-native-vision-camera-barcode-scanner) library.

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

> [!DEPENDENCY]
> The Barcode Scanner requires [react-native-vision-camera-barcode-scanner](/api/react-native-vision-camera-barcode-scanner) to be installed.

> [!TIP]
> If you only need a one-shot native QR/Barcode scanner, use [react-native-data-scanner](https://github.com/mrousavy/react-native-data-scanner) instead.
> See ["VisionCamera vs Data Scanner"](visioncamera-vs-data-scanner) for more information.

### Using the Barcode Scanner

<Tabs items={["<CodeScanner /> (view)", "CameraOutput", "Frame Processor Plugin", "Still Images"]} groupId="barcode-api-style" persist>
<Tab value="<CodeScanner /> (view)">
The [`<CodeScanner />`](/api/react-native-vision-camera-barcode-scanner/views/CodeScanner) view is a simple view component to scan Barcodes:

```tsx
function App() {
  const isFocused = useIsFocused()

  return (
    <CodeScanner
      isActive={isFocused}
      barcodeFormats={['all-formats']}
      onBarcodeScanned={(barcodes) => {
        console.log(`Scanned ${barcodes.length} barcodes!`)
      }}
      onError={(error) => {
        console.error(`Error scanning barcodes:`, error)
      }}
    />
  )
}
```
</Tab>
<Tab value="CameraOutput">
For more control around the [`<Camera />`](/api/react-native-vision-camera/views/Camera) or [`CameraSession`](/api/react-native-vision-camera/hybrid-objects/CameraSession), you can also create a Barcode Scanner [`CameraOutput`](/api/react-native-vision-camera/hybrid-objects/CameraOutput) via [`useBarcodeScannerOutput(...)`](/api/react-native-vision-camera-barcode-scanner/functions/useBarcodeScannerOutput), which can then be attached to a session:

```tsx
function App() {
  // [!code ++:9]
  const barcodeOutput = useBarcodeScannerOutput({
    barcodeFormats: ['all-formats'],
    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"
      // [!code ++]
      outputs={[barcodeOutput]}
    />
  )
}
```
</Tab>
<Tab value="Frame Processor Plugin">
For full control over scanning and coordinate system conversions, create a [`BarcodeScanner`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/BarcodeScanner) directly via [`useBarcodeScanner(...)`](/api/react-native-vision-camera-barcode-scanner/functions/useBarcodeScanner), which can then be used inside a Frame Processor (see ["The Frame Output"](frame-output)) to scan Barcodes in a [`Frame`](/api/react-native-vision-camera/hybrid-objects/Frame):
```tsx
function App() {
  // [!code ++:3]
  const barcodeScanner = useBarcodeScanner({
    barcodeFormats: ['all-formats'],
  })
  const frameOutput = useFrameOutput({
    onFrame(frame) {
      'worklet'
      // [!code ++]
      const barcodes = barcodeScanner.scanCodes(frame)
      console.log(`Detected ${barcodes.length} barcodes!`)
      frame.dispose()
    }
  })

  return (
    <Camera
      style={{ flex: 1 }}
      isActive={true}
      device="back"
      outputs={[frameOutput]}
    />
  )
}
```
</Tab>
<Tab value="Still Images">
To scan objects in a still [`Image`](https://github.com/mrousavy/react-native-nitro-image), create a [`BarcodeScanner`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/BarcodeScanner) and use [`scanCodesInImageAsync(...)`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/BarcodeScanner#scancodesinimageasync):

```ts
import { loadImage } from 'react-native-nitro-image'
import { createBarcodeScanner } from 'react-native-vision-camera-barcode-scanner'

async function scanBarcodeImage() {
  const image = await loadImage({ url: 'https://example.com/barcode.png' })
  const barcodeScanner = createBarcodeScanner({
    barcodeFormats: ['all-formats'],
  })

  try {
    const barcodes = await barcodeScanner.scanCodesInImageAsync(image)
    console.log(`Detected ${barcodes.length} barcodes!`)
  } finally {
    image.dispose()
    barcodeScanner.dispose()
  }
}
```
</Tab>
</Tabs>

### Configuring Barcode Formats

The examples above are configured to detect **all** [`BarcodeFormat`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat)s.
To improve performance, you should narrow [`barcodeFormats`](/api/react-native-vision-camera-barcode-scanner/interfaces/BarcodeScannerOptions#barcodeformats) down to only the formats you need - for example [`'code-128'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat) - which is a common Barcode Format, or [`'qr-code'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat) for square QR codes.

### Test it

To verify your [`<CodeScanner />`](/api/react-native-vision-camera-barcode-scanner/views/CodeScanner) works, try scanning this example [`'code-128'`](/api/react-native-vision-camera-barcode-scanner/type-aliases/BarcodeFormat) Barcode:

![An example Barcode 128](/img/barcode-example.png)

> [!TIP]
> See ["A Barcode"](a-barcode) for more information about a [`Barcode`](/api/react-native-vision-camera-barcode-scanner/hybrid-objects/Barcode).
