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.
Beneficios exactos de tener nuestro react native app en Fullscreen:
- Mantiene el foco sobre el app sin distracciones.
- Evitar que el usuario le de click accidentalmente a otras acciones.
- 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
Immersive Sticky
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.
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.
- Instalamos la librería: yarn add react-native-full-screen.
- 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.
