vision-camera-barcode-scanner

VisionCamera Frame Processor Plugin to read barcodes using MLKit Vision Barcode Scanning

Installation

``sh
yarn add vision-camera-barcode-scanner
`

make sure you correctly setup react-native-reanimated and insert as a first line of your index.tsx

`sh
import 'react-native-reanimated'
`

Add this to your babel.config.js

`js
[
'react-native-reanimated/plugin',
{
globals: ['__scanBarcodes'],
},
];
`

Usage

Simply call scanBarcodes() inside of the useFrameProcessor() hook. In both cases you will need to pass an array of BarcodeFormat to specify the kind of barcode you want to detect.

> Note: The underlying MLKit barcode reader is only created once meaning that changes to the array will not be reflected in the app.

`tsx
import * as React from 'react';

import {StyleSheet, Text} from 'react-native';
import {useCameraDevices} from 'react-native-vision-camera';
import {Camera} from 'react-native-vision-camera';
import {scanBarcodes, BarcodeFormat} from 'vision-camera-barcode-scanner';

export default function App() {
const [hasPermission, setHasPermission] = React.useState(false);
const devices = useCameraDevices();
const device = devices.back;

const frameProcessor = useFrameProcessor(frame => {
'worklet';
const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE], {
checkInverted: true,
});
runOnJS(setBarcodes)(detectedBarcodes);
}, []);

React.useEffect(() => {
(async () => {
const status = await Camera.requestCameraPermission();
setHasPermission(status === 'authorized');
})();
}, []);

return (
device != null &&
hasPermission && (
<>
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
frameProcessor={frameProcessor}
frameProcessorFps={5}
zoom={device?.neutralZoom ?? 1}
/>
{barcodes.map((barcode, idx) => (

{barcode.displayValue}

))}

)
);
}

const styles = StyleSheet.create({
barcodeTextURL: {
fontSize: 20,
color: 'white',
fontWeight: 'bold',
},
});
``

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Credits

Please feel free to check out the original repo here vision-camera-code-scanner