react-native-vision-camera/docs/docs/guides/CODE_SCANNING.mdx

---
id: code-scanning
title: QR/Barcode Scanning
sidebar_label: QR/Barcode Scanning
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import useBaseUrl from '@docusaurus/useBaseUrl'

<div class="image-container">
  <svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
    <image href={useBaseUrl("img/demo.gif")} x="18" y="33" width="247" height="469" />
    <image href={useBaseUrl("img/frame.png")} width="283" height="535" />
  </svg>
</div>

## What is a Code Scanner?

A Code Scanner is a separate Camera output (just like photo or video) that can detect a variety of machine-readable codes, such as:

- **QR**: Square QR codes
- **Aztec**: Square Aztec codes
- **Data Matrix**: Square Data Matrix codes
- **Barcode (EAN)**: EAN-13 or EAN-8 Barcodes
- **Barcode (Code)**: Code-128, Code-39 or Code-93 Barcodes
- **Barcode (other)**: Codabar, ITF-14, UPC-E or PDF-417 Barcodes

## Setup

On iOS, the Code Scanner uses the platform-native APIs and can be used out of the box.

On Android, the [MLKit Vision Barcode Scanning](https://developers.google.com/ml-kit/vision/barcode-scanning) API will be used, and the model (2.2MB) needs to be included into your app first.

<Tabs
  groupId="environment"
  defaultValue="rn"
  values={[
    {label: 'React Native', value: 'rn'},
    {label: 'Expo', value: 'expo'}
  ]}>
<TabItem value="rn">

Inside your `gradle.properties` file, add the `enableCodeScanner` flag:

```groovy
VisionCamera_enableCodeScanner=true
```

</TabItem>
<TabItem value="expo">

Add the `enableCodeScanner` flag to your Expo config (`app.json`, `app.config.json` or `app.config.js`):

```json
{
  "name": "my app",
  "plugins": [
    [
      "react-native-vision-camera",
      {
        // ...
        "enableCodeScanner": true
      }
    ]
  ]
}
```

</TabItem>
</Tabs>

## Usage

To scan codes, simply create a [`CodeScanner`](/docs/api/interfaces/CodeScanner) instance and pass it to the `<Camera>`:

<Tabs
  groupId="component-style"
  defaultValue="hooks"
  values={[
    {label: 'Hooks API', value: 'hooks'},
    {label: 'Imperative API', value: 'imperative'}
  ]}>
<TabItem value="hooks">

```tsx
const codeScanner = useCodeScanner({
  codeTypes: ['qr', 'ean-13'],
  onCodeScanned: (codes) => {
    console.log(`Scanned ${codes.length} codes!`)
  }
})

return <Camera {...props} codeScanner={codeScanner} />
```

The result of this will automatically be memoized.

</TabItem>
<TabItem value="imperative">

```ts
const codeScanner: CodeScanner = {
  codeTypes: ['qr', 'ean-13'],
  onCodeScanned: (codes) => {
    console.log(`Scanned ${codes.length} codes!`)
  }
}
```

Make sure to memoize the result of this, as every change in this will trigger a Camera session re-build.

```tsx
render() {
  return <Camera {...props} codeScanner={this.codeScanner} />
}
```

</TabItem>
</Tabs>

## Separate Output

Since the Code Scanner is a separate camera output (just like photo or video), it cannot be attached simultaneously with photo and video enabled.
You need to disable either `photo`, `video`, or the `codeScanner`.

## Code result

The Code Scanner will call your [`onCodeScanned`](/docs/api/interfaces/CodeScanner#oncodescanned) callback with all detected codes ([`Code`](/docs/api/interfaces/Code)), including their decoded string value, and their coordinates on the screen relative to the Preview.

<br />

## UPC-A vs EAN-13 codes

UPC-A is a special case to handle if you need to cater for it. Android's SDK officially supports UPC-A but iOS does not, instead they handle the code as EAN-13. Since EAN-13 is a superset of UPC-A, with an extra 0 digit at the front.

This means, the `upc-a` types are reported under the `ean-13` umbrella type on iOS:

```jsx
const codeScanner = useCodeScanner({
  codeTypes: ['upc-a'], // <-- ✅ We configure for 'upc-a' types
  onCodeScanned: (codes) => {
    for (const code of codes) {
      console.log(code.type); // <-- ❌ On iOS, we receive 'ean-13'
    }
  }
})
```

You will need to keep this in mind and do the conversion from EAN-13 to UPC-A yourself. This can be done by removing the front `0` digit from the code to get a UPC-A code.

#### 🚀 Next section: [Frame Processors](frame-processors)