how to limit the barcode scanning area

51 Views Asked by At

I want to limit the barcode scanning area in react native and I have used rectOfInterest but it prevents from scanning any of the barcode within the camera view.

<View style={styles.container}>
  <RNCamera
    style={styles.preview}
    type={RNCamera.Constants.Type.back}
    onBarCodeRead={this.handleScan}
    captureAudio={false}
    // rectOfInterest={{
    //     x: 0.1, y: 0.45, width: 0.8, height: 0.2
    // }}
  >
    <View style={styles.rectangleContainer}>
      <View style={styles.topOverlay}>
        <CustomButton title={"X"} style={styles.XButton} />
      </View>

      <View style={styles.row}>
        <View style={styles.leftAndRightOverlay}></View>

        <View style={styles.rectangleContainerContents}>
          <View style={styles.square1}></View>
          <View style={styles.square2}></View>
          <View style={styles.square3}></View>
          <View style={styles.square4}></View>

          <View style={styles.rectangle}></View>
        </View>

        <View style={styles.leftAndRightOverlay}></View>
      </View>

      <View style={styles.bottomOverlay}>
        <View style={styles.bottomOverlayContents}>
          <View style={styles.bottomButtonContainer}>
            <Text style={styles.bottomText1}>Unable to scan?</Text>
            <CustomButton
              title={"Enter number manually"}
              style={styles.bottomButton}
            />
          </View>
          <Text style={styles.bottomText2}>
            Scan the barcode on the SIM card packaging
          </Text>
        </View>
      </View>
    </View>
  </RNCamera>
</View>

I tried

rectOfInterest={{ 
  x: 0.1, y: 0.45, width: 0.8, height: 0.2
}}

But it prevents from scanning any barcode. I want to limit the barcode scanning area since there are other barcodes in the area where needed to be scanned.

0

There are 0 best solutions below