Como poner una APP de React Native con Expo en modo Inmersivo (pantalla completa) para Android

Tiempo de lectura: < 1 minuto

Hoy vamos a implementar el modo Inmersivo para Android en una APP desarrollada con Expo React Native.

El modo inmersivo nos permite poner una aplicación en modo pantalla completa en Android.

Primero vamos a instalar las librerias necesarias:

Expo navigation bar:

expo install expo-navigation-bar

Expo status bar:

expo install expo-status-bar

Y ahora para ocultar la barra de estado y navegación añadimos este código dentro de nuestro app.js/tsx

import * as NavigationBar from 'expo-navigation-bar';
import { setStatusBarHidden } from "expo-status-bar";

export default function App() {
  useEffect(() => {
    NavigationBar.setPositionAsync("relative");
    NavigationBar.setVisibilityAsync("hidden");
    NavigationBar.setBehaviorAsync("inset-swipe");
    setStatusBarHidden(true, "none");
  }, []);

Y dentro de app.json añadimos en la parte de android:

  "androidStatusBar": {
        "translucent": true,
        "hidden": true
      }