Need help for creating a barcode scan mask

How to add a mask on top of barcode scanner?

I have followed this link: React native camera with a transparent view for barcode scanner mask.

With react-native-camera, it worked similar to the link.

But when I tried with your library, it throws an exception like this:

Here's my code:

...

render() {

        const { HEIGHT, WIDTH } = Dimensions.get('window');
        const maskRowHeight = Math.round((HEIGHT - 300) / 20);
        const maskColWidth = (WIDTH - 300) / 2;

        return (
            <View style={styles.container}>
                    <BarcodeScanner
                        style={{flex: 1, justifyContent: 'flex-start'}}
                        cameraFillMode={CameraFillMode.COVER}
                        onBarcodeRead={this.onBarcodeRead}
                    >
                        <View style={styles.maskOutter}>
                            <View style={[{ flex: maskRowHeight  }, styles.maskRow, styles.maskFrame]} />
                            <View style={[{ flex: 30 }, styles.maskCenter]}>
                                <View style={[{ width: maskColWidth }, styles.maskFrame]} />
                                <View style={styles.maskInner} />
                                <View style={[{ width: maskColWidth }, styles.maskFrame]} />
                            </View>
                            <View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
                        </View>
                    </BarcodeScanner>
            </View>
        )

}

...

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    maskOutter: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'space-around',
    },
    maskInner: {
        width: 300,
        backgroundColor: 'transparent',
        borderColor: 'white',
        borderWidth: 1,
    },
    maskFrame: {
        backgroundColor: 'rgba(1,1,1,0.6)',
    },
    maskRow: {
        width: '100%',
    },
    maskCenter: { flexDirection: 'row' }
});

Can somebody help me? Thanks

ekreutz / react-native-barcode-scanner-google

Need help for creating a barcode scan mask #17