React Native Tab Navigator: empty space at bottom of tab bar

Question

I'm using react-navigation@4.0.10 and react-native@0.63.5 in my React Native app, and when I use createBottomTabNavigator, there's a gap underneath the tab labels on iPhone 11 Pro. It does not do the same on iPhone 12. My code for the TabNavigatorOptions is as follows

const TabNavigatorOptions = {
    tabBarPosition: 'bottom',
    lazy: true,
    tabBarOptions: {
        activeTintColor: TabColors.activeColor,
        inactiveTintColor: TabColors.labelColor,
        bottomNavigationOptions: {
            labelColor: TabColors.labelColor,
            rippleColor: "white",
            shifting: false,
            activeLabelColor: TabColors.activeColor,
            backgroundColor: TabColors.backgroundColor
        },
        style: {
             height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0
        }
    }
        
}

I've tried adding paddingBottom: 0 to the style object, but it makes no difference.

Does anyone know how I can approach this?

UPDATE: If I add a red background in tabBarOptions -> style, with SafeAreaView I get this:

and if I remove SafeAreaView I get this

Might be `SafeAreaView` that causes extra height. Not sure tho, need to see full source code of bottom tab bar — Tarik, Feb 21 '22 at 00:28
@gkeenley yeah the problem is `SafeAreaView ` it adds some spacing from bottom and from top too, you can directly use `ScrollView` and you'll be fine — chikabala, Feb 21 '22 at 09:17
You probably had two `SafeAreaView` that are wrapping to the bottom tab bar. Make sure that you only have one. @chikabala He should use `SafeAreaView`in anyway — Tarik, Feb 21 '22 at 12:39

score 2 · Answer 1 · answered Dec 09 '22 at 10:46

The only solution I could find for now is to remove the bottom inset from SafeAreaView. It's not a good solution in my opinion but at least it works:

import * as React from "react";
import { SafeAreaView } from "react-navigation";

export default function App() {
    return (
      <SafeAreaView 
          style={{ flex: 1 }} 
          forceInset={{ top: "always", bottom: "never" }}
      >
          <AppNavigator />
      </SafeAreaView>
    )
}

And if you are using react-native-safe-area-context:

import * as React from "react";
import { SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
    return (
        <SafeAreaView 
            style={{ flex: 1 }} 
            edges={["right", "top", "left"]}
        >
            <AppNavigator />
        </SafeAreaView>
    );
}

React Native Tab Navigator: empty space at bottom of tab bar

1 Answers1