How to limit BarCodeScanner zone

How to / Third Party Tooling
1

Hi,
Is it possible to make BarCodeScanner to focus only on the QR inside the white rectangle and ignore all the rest ?

IMG_2362.PNG
IMG_2362.PNG1125×2436 379 KB

Thanks in advance

2

you can use ‘react-native-barcode-mas’

example

import BarcodeMask from 'react-native-barcode-mask';
<BarCodeScanner onBarCodeScanned={handleBarCodeScanned} ...>
...
<BarcodeMask edgeColor="#62B1F6" showAnimatedLine/>
</BarCodeScanner>

remember

const finderWidth = 280;
const finderHeight = 630;
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const viewMinX = (width - finderWidth) / 2;
const viewMinY = (height - finderHeight) / 2;

const handleBarCodeScanned = ({ type, data, bounds: { origin } = {}}) => {
if (x >= viewMinX && y >= viewMinY && x <= (viewMinX + finderWidth / 2) && y <= (viewMinY + finderHeight / 2)) {
       setScanned(true);
       ...
}
1 Like
3

Is it possible to get the bounds with the Camera module?

My application requires the flashMode when scanning barcodes, thus I can’t use the BarCodeScanner module.

4

This is now possible with Expo SDK 45

1 Like
5

@chaolegons What is the x and y here?