title: How can i fix bottom bar position - react navigation?
body: <p>I have a bottom tab bar in my app,
  I want to add a rounded corner for it &quot;top - left/right&quot; it's applied but I have an issue I got the background view &quot;white&quot; behind it!
  to remove it should I use position &quot;absolute&quot; but that makes the tab bar cover the other Buttons/views in the bottom because it's absolute`!</p>
  <p>So is there a way to remove the background behind the bottom bar without using <code>&quot;position: absolute&quot;</code></p>
  <p>without absolute</p>
  <blockquote>
  <p>As you see in the Top &quot;left/right&quot; corner there's a background</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/NEEzQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NEEzQ.png" alt="without" /></a></p>
  <p>with absolute</p>
  <blockquote>
  <p>It's covering the Button, &quot;And i don't want to add a bottom - padding/margin for every screen I have, also I don't know what the correct value should I set for them!</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/oXtnf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oXtnf.png" alt="with" /></a></p>
  <p>Code snippet</p>
  <pre><code>&lt;MainTab.Navigator
        tabBarOptions={{
          activeTintColor: Theme.PrimaryColor,
          labelStyle: {
            paddingBottom: 5,
            fontSize: 14,
          },
          style: {
            borderTopLeftRadius: 30,
            borderTopRightRadius: 30,
            backgroundColor: '#ff0',
            height: Platform.OS === 'ios' ? 100 : 70,
             //  position: 'absolute',
             //  bottom: 0,
             //  left: 0,
             //  right: 0,
          },
        }}&gt;
  
       .....
    &lt;/MainTab.Navigator&gt;
  </code></pre>