Actualmente dediqué algún tiempo a resolver un problema en mi aplicación, pero no puedo encontrar una respuesta.

Hay un bottomTabNavigator personalizado, que tiene una altura en %, actualmente altura: '8%'. En el simulador de iPhone 8 (que no tiene 'muesca'), la altura funciona correctamente sin problemas y permite que tabBarItems se ubique en el centro verticalmente.

PERO, en todos los iPhones posteriores al 8, es decir, los que tienen 'muesca', la altura está configurada de manera incorrecta y los íconos están ubicados incorrectamente como se muestra en esta imagen: https://imgur.com/a/KKrDBB4

Para encontrar un problema, le di un color de fondo: 'verde' a tabBarItemStyle para verificar qué posiciones toma, y eso es lo que descubrí: https://imgur.com/a/4JAZ7K8

En el Iphone 8 y anteriores, el collar amarillo se llena de azul y es por eso que no hay problema, pero en los iPhone con 'muesca' este problema está presente. No tengo idea de cómo cambiar eso.

Si alguien tiene un consejo se lo agradeceré!

Este es el código:

 <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> ```