I’m trying to create a sheet/modal that, when open, has a backdrop. The issue I’m facing is that my Bottom Tab Navigator and its header are not being overlayed by the Pressable component. I would like for this component to basically ignore any styling constraints from the parent (which is what I thought position absolute would do).

Is it possible to make the Sheet component take up the entire height of the screen? I have tried setting it’s height manually, but this did not work.

  const Sheet = () => {
    return (
      <>
        <Pressable style={styles.backdrop} />
      </>
    );
  };

  export default Sheet;

  const styles = StyleSheet.create({
    backdrop: {
      ...StyleSheet.absoluteFillObject,
      backgroundColor: 'rgba(0, 0, 0, 0.3)',
    },
  });