Using RNHoleView on Android with position: "absolute" doesn't work

[EagleVee]

I'm using RNHoleVIew as an overlay over my RNCamera component. This code below works perfectly on iOS, but in Android the overlay is rendered only on top of the screen instead of covering all screen as intended.

<View>
  <RNCamera
      captureAudio={false}
      ref={cameraRef}
      style={styles.camera}
      autoFocus={true}
      flashMode={
        state.flashOn
          ? RNCamera.Constants.FlashMode.torch
          : RNCamera.Constants.FlashMode.off
      }
    />
    <RNHoleView
      style={styles.overlay}
      holes={[
        {
          x: 25 * WIDTH_RATIO,
          y: 164 * HEIGHT_RATIO,
          width: 364 * WIDTH_RATIO,
          height: 364 * WIDTH_RATIO,
          borderRadius: 182 * WIDTH_RATIO,
        },
      ]}>
      <View style={styles.bar}>
      </View>
    </RNHoleView>
<View />

const WIDTH_RATIO = Dimension.get("width") / 414
const HEIGHT_RATIO = Dimension.get("height") / 896

const styles = StyleSheet.create({
  camera: {
    flex: 1,
  },
  overlay: {
    ...StyleSheet.absoluteFill,
    justifyContent: "flex-end",
    backgroundColor: "rgba(0, 0, 0, 0.6)",
  },
  bar: {
    position: "absolute",
    bottom: 28 * WIDTH_RATIO,
    left: 16 * WIDTH_RATIO,
    width: deviceWidth - 32 * WIDTH_RATIO,
    paddingHorizontal: 16 * WIDTH_RATIO,
    height: 80 * WIDTH_RATIO,
    paddingVertical: 8 * WIDTH_RATIO,
    borderRadius: 20 * WIDTH_RATIO,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#262331",
  },
});

The result on Android:

On iOS:

I use react-native@0.63.3, react-native-hole-view@2.0.2

Thank you very much!

[stephenkopylov]

Hey @EagleVee !

As I understand, you are trying to put this component inside your RNHoleView-container and this is the problem - you don't need to cut the hole from this bar

So firstly I'd try to move it outside - somehow like this:

<View>
  <RNCamera/>
  <RNHoleView/>
  <View style={position:'absolute', width:100%, height:100%} poinderEvents='boxNone'> <------- here is it
    <View style={styles.bar}>
    </View>
  </View>
<View />

[EagleVee]

@stephenkopylov okay, I'll try it. Thank you!

[stephenkopylov]

@EagleVee you're welcome! Please let us know if it works or not

[EagleVee]

@stephenkopylov It worked! Thanks again.