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

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

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