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

Question

I'm using [email protected] and [email protected] 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

Answer 1

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>
    );
}