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.
Support On Demand!
