OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Not able to cover Bottom Tab Navigator in React Native

  • Thread starter Thread starter darkshadowtrail
  • Start date Start date
D

darkshadowtrail

Guest
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

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

  export default Sheet;

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

<p>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).</p>
<p>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.</p>
<p><a href="https://i.sstatic.net/xFSwv9ji.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/xFSwv9ji.png" alt="enter image description here" /></a></p>
<pre><code> const Sheet = () => {
return (
<>
<Pressable style={styles.backdrop} />
</>
);
};

export default Sheet;

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

Latest posts

I
Replies
0
Views
1
impact christian
I
Top