Añadir margen de status bar en React Native

Tiempo de lectura: < 1 minuto

Sí ocultamos el header nav (headerShown: false) en React Native, puede que tengamos este problema:

El contenido sale debajo de la barra superior de estado y no se deja visualizar correctamente con el reloj, el estado de la batería y los demás widgets que aparecen en pantalla.

Para solucionar este problema vamos a hacer lo siguiente.

Primero importamos Platform y StatutsBar:





Después añadimos esta propiedad en el estilo del contenedor principal de la pantalla:

  marginTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight

Con este margin Top podemos solucionar el problema.

Deja un comentario