• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

81
Vistas
tabBarStyle strange behaviour on height for iOS

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> ```
almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda