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.