React Native Scan Barcode with Vision Camera

For scanning a QR code/ Barcode using vision camera:

You need to install the below packages:

• yarn add react-native-vision-camera
• Lyarn add vision-camera-code-scanner

After installing the package, you can proceed further by creating a new component
And by adding the vision camera configurations in it. Basically we will be using some hooks which are predefined in react-native-vision-camera.

The below example shows how to use it

import React, { useState } from 'react';
import { Camera, useScanBarcodes } from 'react-native-vision-camera';
import { BarcodeFormat } from 'vision-camera-code-scanner';

const App = () => {
const [barcodes, setBarcodes] = useState([]);

const scanBarcodes = useScanBarcodes({
format: [BarcodeFormat.QR_CODE],
});

scanBarcodes.subscribe((barcodes) => {
setBarcodes(barcodes);
});

return (
<Camera
style={{ width: 200, height: 200 }}
onFrameCaptured={(frame) => {
scanBarcodes(frame);
}}
/>
);
};

export default App;

The above code will help you in configuring a simple and ready to use component which will allow you to scan qr codes. You will get the result if you will scan a qr code and you can configure it accordingly.