title: Creating a "hole" with 0 opacity inside a container with color - css on react native (Layout for a QR scanner)
body: <p>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.</p>
  
  <p>How can I create a screen where there is a color for the whole screen but a "Hole" in the middle of it? </p>
  
  <p>To help you understand exactly what I need, this is where I am at right now:</p>
  
  <p><a href="https://i.stack.imgur.com/rbwKY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rbwKY.jpg" alt="enter image description here"></a></p>
  
  <p>I need for the part inside the border to have 0 opacity</p>