@sourcetoad/vision-camera-plugin-barcode-scanner
v2.0.0
Published
test
Downloads
72
Readme
vision-camera-plugin-barcode-scanner
A VisionCamera v2 plugin that utilizes Google ML Kit for parsing.
- This package works at present ONLY against
vision-camera
v2. - This package works at present ONLY against
react-native-reanimated
v3.
Installation
make sure to install both the @sourcetoad/vision-camera-plugin-barcode-scanner
and react-native-reanimated
plugins
npm
npm install @sourcetoad/vision-camera-plugin-barcode-scanner react-native-reanimated
yarn
yarn add @sourcetoad/vision-camera-plugin-barcode-scanner react-native-reanimated
Setup
Edit your babel.config.js
file to include the following
plugins: [
[
'react-native-reanimated/plugin',
{
globals: ['__scanQRCodes'],
},
],
]
Usage
call the useBarcodeScanner()
hook and pass the BarcodeScannerFormat
type as a parameter. If no parameter is passed. the camera will scan for all barcodes
Note: Specifying the type of barcode you wish to scan allows for faster detection
Ex.
const [barcodeData, frameProcessor] = useBarcodeScanner(BarcodeScannerFormats.QR_CODE)
only checks for QR barcodes, resulting in faster detection
barcode types
export enum BarcodeScannerFormats {
All = 1, // -> scans for all barcodes
QR_CODE = 2,
PDF_417 = 3,
}
the useBarcodeScanner()
hooks returns a state array with the barcodeData
and the frameProcesssor
which you pass to the <Camera/>
component.
Ex.
import {useBarcodeScanner, BarcodeScannerFormats} from 'vision-camera-plugin-barcode-scanner'
const [barcodeData, frameProcessor] = useBarcodeScanner(BarcodeScannerFormats.All)
useEffect(() => {
if (barcodeData !== undefined) {
// handle barcode detection
}
}, [barcodeData])
if (device == null) return <LoadingView />
return (
<Camera
device={device}
isActive={true}
style={StyleSheet.absoluteFill}
frameProcessor={frameProcessor}
/>
)
Full usage
import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { Camera, useCameraDevices } from 'react-native-vision-camera';
import {useBarcodeScanner, BarcodeScannerFormats} from 'vision-camera-plugin-barcode-scanner'
export default function App() {
const [permsGranted, setPermsGranted] = useState(false)
const [displayCamera, setDisplayCamera] = useState(false)
const [barcodeData, frameProcessor] = useBarcodeScanner(BarcodeScannerFormats.All)
const devices = useCameraDevices()
const device = devices.back
useEffect(() => {
/**
* add code set camera permissions
* https://mrousavy.com/react-native-vision-camera/docs/guides#getting-permissions
*/
setPermsGranted(true)
})
useEffect(() => {
if (barcodeData !== undefined) {
setDisplayCamera(false)
}
}, [barcodeData])
if (device == null) {
return (<></>)
} else if (!permsGranted) {
return (<></>)
} else if (!displayCamera) {
return (
<View style={styles.container}>
<Button title='Open Camera' onPress={() => setDisplayCamera(true)}></Button>
<Text style={styles.resultsText}>Result: {barcodeData?.rawValue}</Text>
</View>
)
} else {
return (
<Camera
device={device}
isActive={true}
style={StyleSheet.absoluteFill}
frameProcessor={frameProcessor}
/>
)
}
}
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library