QR/Barcode Scanning
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 API will be used, and the model (2.2MB) needs to be downloaded first.
- React Native
- Expo
To download the model when the user installs your app, add this to your AndroidManifest.xml file:
<application ...>
...
<meta-data
android:name="com.google.mlkit.vision.DEPENDENCIES"
android:value="barcode" />
</application>
To download the model when the user installs your app, add the enableCodeScanner flag to your Expo config (app.json, app.config.json or app.config.js):
{
"name": "my app",
"plugins": [
[
"react-native-vision-camera",
{
// ...
"enableCodeScanner": true
}
]
]
}
Usage
To use a codescanner, simply create a CodeScanner and pass it to the <Camera>:
- Hooks API
- Imperative API
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.
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.
render() {
return <Camera {...props} codeScanner={this.codeScanner} />
}
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 callback with all detected codes (Code), including their decoded string value, and their coordinates on the screen relative to the Preview.