Añadir margen de status bar en React Native

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.

isMa

Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.