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)',
},
});
2
Answers
You can give your bottom sheet a position of
absolute
and then try giving height. (if you aren’t talking about the status bar)Use Modal provided by react-native
import { Modal } from 'react-native'