React Native Change Child’s Opacity to be Fully Transparent

I am trying to implement BarCodeScanner‘s styles and make it more appealing by making the camera view darker and lighting up the center view of the screen. The scanner works well, but I can’t quite reach the right styling when adding the view inside of it.

My scanner without styling looks like this (top half of the screen, all good):

enter image description here

Here is how I add the center part:

<BarCodeScanner
    onBarCodeScanned={
        scanned ? undefined : handleBarCodeScanned
    }
    style={StyleSheet.absoluteFillObject}
>
    <View
        style={{
            flex: 1,
            backgroundColor: "#111",
            opacity: 0.5,
            justifyContent: "center",
            alignItems: "center",
        }}
    >
        <View
            style={{
                height: "40%",
                width: "80%",
                opacity: 1,
                //backgroundColor: "white", //this is added for testing
                borderRadius: 15,
            }}
        />
    </View>
</BarCodeScanner>

Which shows result something like this:

enter image description here

How to make the white rectangle fully transparent (as the camera view). If I remove backgroundColor: "white" the whole view is just becomes dark, no center view appears.

Source: Ask Javascript Questions

LEAVE A COMMENT