How can i fix bottom bar position - react navigation?

Question

I have a bottom tab bar in my app, I want to add a rounded corner for it "top - left/right" it's applied but I have an issue I got the background view "white" behind it! to remove it should I use position "absolute" but that makes the tab bar cover the other Buttons/views in the bottom because it's absolute`!

So is there a way to remove the background behind the bottom bar without using "position: absolute"

without absolute

As you see in the Top "left/right" corner there's a background

with absolute

It's covering the Button, "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!

Code snippet

<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,
        },
      }}>

     .....
  </MainTab.Navigator>

Answer 1

I don't think it's possible without absolute positioning.

As for your question how much margin to add when using position: 'absolute' on the bar, you add a bottom margin to the parent view for each tab screen equal to the height of your bar.

You can reuse the styles if you store your desired tab bar height in a variable in a file somewhere and export it.

import {Platform} from 'react-native';
export const tabBarHeight = Platform.OS === 'ios' ? 100 : 70,

Then a screen in your tab navigator could look like this:

import {tabBarHeight} from './somePath';

const Screen = () => {
  return (
    <View
      style={{
        marginBottom: tabBarHeight,
        // Other styling...
      }}>
      <Text>Content</Text>
    </View>
  );
};

You would need to repeat this for all screens in your tab navigator. But if you've set the styles up this way, you can change it for all screens by only changing the value of tabBarHeight where you've declared it.

---

If you don't know where to best put these styles or how to structure you're styling in general, there is a nice article here you could read: https://thoughtbot.com/blog/structure-for-styling-in-react-native.