How do I clear center area in react native - react-native

Question

I want to create an overlay on top of react-native camera. However, I want only the center area to be clear and all other area to have some overlay with small opacity.
I have created component which acts as a wrapper and add corners, but I can't get overlay except in center. If I add overlay with background opacity it applies to whole screen including center box.
This is what I have so far.
<Camera style={[cameraStyle.camera]}>
<CustomView center style={[cameraMarkerStyles.container]}>
<CustomView
transparentBg
spaceBetween
style={[cameraMarkerStyles.cameraMarker]}
>
<CustomView row spaceBetween>
<CornerBox status={status} position="topLeft" />
<CornerBox status={status} position="topRight" />
</CustomView>
<CustomView row spaceBetween>
<CornerBox status={status} position="bottomLeft" />
<CornerBox status={status} position="bottomRight" />
</CustomView>
</CustomView>
<CustomView
style={[cameraMarkerStyles.container, cameraMarkerStyles.overlay]}
/>
</CustomView>
</Camera>
Bascially I add a View which is center area, which has 4 boxes at all corners which create the border. And then at the end there is a View which acts as overlay for whole screen. Now that last View if I change the background color to something other than transparent, it covers center area as well.
I have tried changing zIndex, set it to -1 as well. However that also did not work.
One very dirty solution that I have is I can place a View above center area and below center area and on each side of it and then give those views as some background and opacity. In that way we can add overlay just apart from center area.
Does anyone know any good way to implement such kind of layout? Even simple idea is enough, I don't need whole code.
Adding styles just in case anyone needs to see.
const markerSize = 250
const cornerBoxSize = 50
const cornerBoxBorderSize = 5
const cameraMarkerStyles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
},
overlay: {
zIndex: -1,
backgroundColor: 'rgba(0, 0, 0, 0.2)',
},
cameraMarker: {
width: markerSize,
height: markerSize,
},
cornerBox: {
width: cornerBoxSize,
height: cornerBoxSize,
},
topLeftBox: {
borderTopWidth: cornerBoxBorderSize,
borderLeftWidth: cornerBoxBorderSize,
},
})
const cameraStyle = StyleSheet.create({
camera: {
height: Dimensions.get('screen').height,
backgroundColor: 'transparent',
},
})

Answer 1

we talked about this on Twitter but I wanted to make sure the proposed solution was logged...
I suggest you create four translucent gray boxes for the four sides of the screen. The center of the screen will be blank and those four boxes will form a mask on each side of the center-area