React-native-camera limit barcode scan area

Question

I am using the barcode scanner from react-native-camera and currently if I use it and there are multiple QR-codes closely on top of each other, I point my camera at one and it reads the code above it which is outside of the display on screen but within the cameras view. If however there is no QR-code above the one I want to scan, then it scans the correct one, so it seems like it always scans the top QR-code within the cameras view.

Here's my question: Is there a way to limit the "scan area" to be the same size and area as my camera view on my display?

<View style={styles.container}>
  <Camera
    style={styles.preview}
    onBarCodeRead={this.onBarCodeRead}
    ref={cam => this.camera = cam}
    aspect={Camera.constants.Aspect.fill}>
  </Camera>
  <Button
    style={styles.buttonStyle}
    <Text>{this.state.qrcode}</Text>
  </Button>
</View>

const styles = {
  container: {
    height: 300,
    flex: 1
  },
  preview: {
    flex: 1
  },
  buttonStyle: {
    marginTop: 20,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 20,
    alignSelf: 'center'
  }
}

Versions, if needed:

"react-native": "0.42.3",
"react-native-camera": "0.6.0",

Did you get solution how to disable scanning function in masked area? — SatelBill

Edison Biba Edison Biba · Accepted Answer · 2020-03-18T17:34:31

EDIT

Since there is no fix yet I would suggest to use another library for barcode mask: https://github.com/shahnawaz/react-native-barcode-mask

You can take a look at it and implement in your project.

OLD ANSWER

Now you can limit scan area with react-native-camera just make sure to import version 3.19.2 or greater.

const CAM_VIEW_HEIGHT = Dimensions.get('screen').width * 1.5;
const CAM_VIEW_WIDTH = Dimensions.get('screen').width;

const leftMargin = 100;
const topMargin = 50;
const frameWidth = 200;
const frameHeight = 250;

const scanAreaX = leftMargin / CAM_VIEW_HEIGHT;
const scanAreaY = topMargin / CAM_VIEW_WIDTH;
const scanAreaWidth = frameWidth / CAM_VIEW_HEIGHT;
const scanAreaHeight = frameHeight / CAM_VIEW_WIDTH;

class Demo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <RNCamera
                    rectOfInterest={{
                        x: scanAreaX,
                        y: scanAreaY,
                        width: scanAreaWidth,
                        height: scanAreaHeight,
                    }}
                    cameraViewDimensions={{
                        width: CAM_VIEW_WIDTH,
                        height: CAM_VIEW_HEIGHT,
                    }}
                    >
                    <View
                        style={{
                        position: 'absolute',
                        top: leftMargin,
                        right: topMargin,
                        width: frameHeight,
                        height: frameWidth,
                        borderWidth: 2,
                        borderColor: 'red',
                        opacity: 0.5,
                        }}
                    />
                </RNCamera>
            </View>
        );
    }
}

React-native-camera limit barcode scan area

3 Answers