React native: transparent view inside opaque view

Question

I want to show view from camera with opaque frame and transparent center. Something like in the picture (black part is a view from camera). I'm looking for solution with pure react-native components, no additional libs (like https://github.com/gilbox/react-native-masked-view), without adding fullscreen image with transparent center or other hacks.

Answer 1

I found simple solution, I added View, transparent inside with opaque border, something like this:

let {width, height} = Dimensions.get('window');
<View
  style={{

    position: 'absolute',
    top: -width/2 + 100,
    left: -width/2 + 50,
    right: -width/2 + 50,
    bottom: -width/2 + 200,
    backgroundColor: 'transparent',

    borderWidth: width/2,
    borderRadius: width,
    borderColor: 'red',
    opacity: 0.3,
  }}
/>