Múltiples formas de activar FullScreen en Android React Native

react native
Monday, June 7, 2021

Múltiples formas de activar FullScreen en Android React Native

El motivo principal por el cual queremos tener nuestra aplicación el fullscreen es más que todo para poder capturar el foco y el UX del usuario 100% en nuestro producto, por ejemplo en juegos, videos, también según la documentación oficial permite evitar que el usuario accidentalmente se vaya hacia otra aplicación.

El motivo principal por el cual queremos tener nuestra aplicación el fullscreen es más que todo para poder capturar el foco y el UX del usuario 100% en nuestro producto, por ejemplo en juegos, videos, también según la documentación oficial permite evitar que el usuario accidentalmente se vaya hacia otra aplicación.

android full

Beneficios exactos de tener nuestro react native app en Fullscreen:

  1. Mantiene el foco sobre el app sin distracciones.
  2. Evitar que el usuario le de click accidentalmente a otras acciones.
  3. Maximiza el espacio util de la applicacion.

Entonces, sabiendo esto vamos a aprovechar de estos beneficios, y ver los tipos de modos FullScreen que tiene Android, contrario a lo que muchos piensan, hay 3 modos: Immersive, Immersive Sticky y Lean Back.

Lean back

Usamos lean back cuando tenemos aplicaciones donde el usuario no va a estar interactuando con nuestra aplicación de react native, por ejemplo ver un streaming. Cuando el usuario hace tap en el screen, el status bar se va a volver visible.

Immersive

Normal Mode, Low Profile mode, Immersive Full screen

Immersive Sticky

Immersive Sticky Animation

Okay, ahora si vamos a la práctica después de un poco de teoría.

¡A la práctica!

A) Setting Fullscreen

Abrimos y modificamos __ROOT__/android/src/main/res/values/styles.xml y dentro del tag de <style> agregamos la siguiente linea:</style>

<item name="android:windowFullscreen">true</item>

B) Removing the Status Bar

Para remover el status bar en Android con react native podemos utilizar el método nativo de react native.


Agregamos en nuestro código StatusBar.setHidden:

Docs: https://reactnative.dev/docs/statusbar.html

C) Removing Android Hardware Navigation buttons and Immersive Mode

En el siguiente ejemplo vamos a ocultar el bottom bar que tiene Android usando react native.

Esta botonera puede ser física, virtual o con gestures.


Para completar este feature, requerimos de una librería adicional, realmente no hay muchas pero la que más hemos usado seria la siguiente: react-native-full-screen.

  1. Instalamos la librería: yarn add react-native-full-screen.
  2. Ocultamos/Mostramos con el método FullScreen.onFullScreen.

Para concluir, no recomendamos ocultar si el bottom harware button porque existen devices donde sus botones son físicos, por lo que no se puede ocultar, en ese caso lo mejor es manejar de manera pragmática y contemplarlo en nuestro diseño de UX, para ver más información visitar : Back Button Hardware Android.

james jara
james jara