I am using react-native-camera so I could scan QRs, this works fine. On top of the camera I would like to have white color with opacity and on the middle of the screen there should be a blank square to indicate that the user should scan the QR in the middle. I am struggling to do this because when I put the white screen layout on top than of the blank square than the blank square is not seen. When I put the blank square on top of the layout then because the blank is with opacity 0 it is not seen.
How can I create a screen where there is a color for the whole screen but a "Hole" in the middle of it?
To help you understand exactly what I need, this is where I am at right now:
I need for the part inside the border to have 0 opacity