A highly customizable QR Code scanner based on react-native-qrcode-scanner-view.
I had this issue and I didn't get any solution on this page. There is problem with scanBarStyle and somebody has recommended remove scanBarStyle property. I changed this property in original QR Scanner file instead of removing. Also there is problem with componentDidMount() and componentWillUnmount() functions. I fixed this problem with the following codes.
listener;
componentDidMount() {
listener = AppState.addEventListener("change", this.handleAppStateChange);
}
componentWillUnmount() {
listener.remove();
this.rnCamera && this.rnCamera.pausePreview();
}
- Pure JS code
- Support Android and iOS
- Support React Native 0.60+
- Support scan QR code, Bar code
- Scanning interface can be customized
| Prop | Type | Default |
|---|---|---|
| maskColor | string | #0000004D |
| rectStyle | object | height: 300, width: 300, borderWidth: 0, borderColor: '#000000', marginBottom: 0 |
| cornerStyle | object | height: 32, width: 32, borderWidth: 6, borderColor: '#E65100' |
| cornerOffsetSize | number | 0 |
| isShowCorner | bool | true |
| scanBarStyle | object | marginHorizontal: 8, borderRadius: 2, backgroundColor: '#E65100' |
| isShowScanBar | bool | true |
| scanBarAnimateTime | number | 3000 |
| scanBarAnimateReverse | bool | false |
| scanBarImage | any | |
| hintText | string | |
| hintTextStyle | object | color: '#fff', fontSize: 14, backgroundColor: 'transparent', marginTop: 32 |
| renderHeaderView | func | - |
| renderFooterView | func | - |
| onScanResult | func | - |
| scanInterval | number | 2000 |
| torchOn | bool | false |
| userFront | bool | false |