skip to Main Content

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.

enter image description here

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

  export default Sheet;

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

2

Answers


  1. You can give your bottom sheet a position of absolute and then try giving height. (if you aren’t talking about the status bar)

    Login or Signup to reply.
  2. Use Modal provided by react-native import { Modal } from 'react-native'

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search