React Native Tab Bar white space under tabs

Question

I am using a tab bar navigator with SafeAreaView.

If I comment out the tab bar nav the parent view covers the entire screen. However when I add a Tab bar it shows a small white view under the tab bar section.

const App = () => {
  return (
    <SafeAreaView style={styles.droidSafeArea}>
      <View style={{ backgroundColor: "red", flex: 1 }}>
        <TabNavigator key="MainTabNav" />
      </View>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  droidSafeArea: {
    flex: 1,
    backgroundColor: "#2F3438",
  }
});

Wichman

Have you provided the entire code segment for the above screen. It is impossible to figure out the yellow colored region from the code provided. – Aida

You can try remove flex => <View style={{ backgroundColor: "red" }}> – Lignite

Try also to check which view is creating that gap by adding a borderWidth:1 to the style of each on of them – Seethe

Did you find the solution? I am facing the same issue – Substantialize

@RomitKumar Try my answer below. – Sphygmograph

Answer 1

Try this

  screenOptions={{
                        tabBarStyle: {
                            paddingBottom:0,         
                        },
                }}

Scaliger

Answer 2

1. Please use the tab bar outside the safeAreaView else the safe area view will calculate the notch and will render the tab bar above the notch.

2.If you are using tab bar inside the safe area view use the force inset property of safe area view : <SafeAreaView forceInset = {bottom : 'never} this will make the safeareaview collide with bottom area and your tab bar will render properly. Note : by using this method you would have to be a bit accurate in providing the styles.

const App = () => {
  return (
    <SafeAreaView style={styles.droidSafeArea} forceInset = {bottom : 'never'}>
      <View style={{ backgroundColor: "red", flex: 1 }}>
        <TabNavigator key="MainTabNav" />
      </View>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  droidSafeArea: {
    flex: 1,
    backgroundColor: "#2F3438",
  }
});

Watercool

There is still a gap underneath the tab bar with this style – Wichman

I would need to make a clone of your code and then run it on my system to trouble shoot the problem. It's hard to debug the issue without running on my system. :( – Watercool

Answer 3

I had the exact same issue and what I did is not use SafeAreaView at all around the tab bar, but simply assigning the color I want the white space to have as the background color for the tab bar.

In your example that would be:

return (
    <View>
        <TabNavigator style={{ backgroundColor: "#2F3438" }} key="MainTabNav" />
    </View>
);

Sphygmograph

Answer 4

<NavigationContainer>
     <Tab.Navigator
         tabBarOptions={{
             activeTintColor: Colors.tabIconSelected,
             inactiveTintColor: Colors.tabIconDefault,
             style: styles.container
         }}/>
</NavigationContainer>

const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.darkBackgroundColor,
        borderTopWidth: 0
    }
});

Note : borderTopWidth: 0 worked for me

Winery

Answer 5

For react native navigation V5

<Tab.Navigator
 tabBarOptions={{
  style: {
   borderTopWidth: 0
}
}}
>
   <Tab.Screen/>
<Tab.Navigator>

Note: this is for bottom tab

Rey

Answer 6

When I was implementing floating button on bottomTabNavigation followed this post, I faced similar issue that tabBar has dirty white space with shadow(I used shadow in style of component).

I used React navigation v6.

issue image1, issue image2 (Sorry, It's my first Answer I post, I can't embed image yet)

I tried to remove it with borderWidth: 0, but not worked.

My case, below is worked for me.

Try this

borderRadius: 25  // some much number that near tabbar height

on

<Tab.Navigator
  tabBar={(props) => (
    <View style={styles.navigatorContainer}>
      <BottomTabBar {...props} />
      {isIphoneX() && (
        <View
          style={[
            styles.xFillLine,
            { backgroundColor: "#fff" },
          ]}
        />
      )}
    </View>
  )}
  screenOptions={{
    headerShown: false,
    tabBarShowLabel: false,
    tabBarStyle: { 
                   borderRadius: 25,                // add here
                   borderTopWidth: 0,
                   borderRadius: 25,
                   backgroundColor: "transparent",
                   elevation: 30,
    },
    tabBarItemStyle: { backgroundColor: "#fff" },
  }}
>
... 

Then result image is this.

I don't understand why It was worked, but I hope it works for someone.

Corroboration

Answer 7

I had this issue when i was using the TabBarIcon property within the Tab.Screen

Tab being const Tab = createBottomTabNavigator()

I couldn't solve the issue no matter how i used the SafeAreaView.

I solved it by not using the TabBarIcon property and instead making a custom component for the tabBar property on the higher level Tab.Navigator as outlined in the react native docs https://reactnavigation.org/docs/bottom-tab-navigator/

When i created the custom tabBar component it all worked as expected, no funky use of SafeAreaView.

Massicot

Answer 8

I faced this same issue on react-native-navigation version 6. In my case, the extra space wasn't showing on my emulator but showed on a real device.

I fixed this by simply adding safeAreaInsets={{bottom:0}} as prop to Tab.Navigator component.

  <Tab.Navigator
    safeAreaInsets={{bottom:0}}
  >
  // ...screens
  </Tab.Navigator>

Care