I currently spent some time on solving an issue in my app, but can't find an answer.

There is a custom bottomTabNavigator, which has a height in %, currently height:'8%'. On iPhone simulator 8 ( that does not have 'notch') the height work correctly with no issues and lets tabBarItems to be located in centre vertically.

BUT, on all iPhones after 8, i.e. the ones with 'notch', the height is set in the wrong way and icons located incorrectly as it is shown on this picture: https://imgur.com/a/KKrDBB4

In order to find out an issue, I gave a backgroundcolor: 'green' to tabBarItemStyle to check what positions it take, and that's what I found out: https://imgur.com/a/4JAZ7K8

In Iphone 8 and below, the yellow collar is filling blue and that's why there is no issue, but on iPhones with 'notch' this issue is present. I have no idea how to change that.

If anyone has an advice I will appreciate it!

This is the code:

<Tab.Navigator
screenOptions={{
tabBarShowLabel: false,
tabBarHideOnKeyboard: true,
tabBarActiveTintColor: '#FF9C33',
safeAreaInset: { bottom: 0 },
headerShown: false,
tabBarStyle: {

position: 'absolute',
bottom: 25,
left: 70,
right: 70,
borderRadius: 35,
height: '8%',
backgroundColor: 'blue',
elevation: 0,
borderTopWidth: 0, // TO GET RID OFF WHITE LINE ON TOP
},
tabBarItemStyle:{
backgroundColor:'yellow'
}
}}
>
<Tab.Screen name='Home' component={Home} options={{
tabBarIcon: ({color}) => <Icon name='home' size={32} color={color} />,
tabBarIconStyle: {left: -20}
}}/>

<Tab.Screen name='Logout' component={signOut} options={{
tabBarIcon: ({color}) => <MaterialIcons name='logout' size={31} color={color} />,
tabBarIconStyle: {left: 20},

}}/>
</Tab.Navigator> ```