Multiple ways to activate FullScreen in Android React Native

react native
Friday, August 6, 2021

Multiple ways to activate FullScreen in Android React Native

The main reason why we want to have our application fullscreen is above all to be able to capture the focus and the UX of the user 100% in our product, for example in games, videos, also according to the official documentation it allows to prevent the user from accidentally go to another application.
Nearshoring and Agile Software Development Company

The main reason why we want to have our application fullscreen is above all to be able to capture the focus and the UX of the user 100% in our product, for example in games, videos, also according to the official documentation it allows to prevent the user from accidentally go to another application.

Nearshoring and Agile Software Development Company
android full

Exact benefits of having our react native app on Fullscreen:

  1. Keeps the focus on the app without distractions.
  2. Prevent the user from accidentally clicking on other actions.
  3. Maximize the useful space of the application.

So, knowing this, we are going to take advantage of these benefits, and see the types of FullScreen modes that Android has, contrary to what many think, there are 3 modes: Immersive, Immersive Sticky and Lean Back.

Read back

We use lean back when we have applications where the user will not be interacting with our react native application, for example watching a streaming. When the user taps on the screen, the status bar will become visible.

Immersive

Nearshoring and Agile Software Development Company
Normal Mode, Low Profile mode, Immersive Full screen

Immersive Sticky

Nearshoring and Agile Software Development Company
Immersive Sticky Animation

Okay, now if we go to practice after a little theory.

To practice!

A) Setting Fullscreen

We open and modify __ROOT __ / android / src / main / res / values ​​/ styles.xml and inside the <style> tag we add the following line: </style>

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

B) Removing the Status Bar

To remove the status bar in Android with react native we can use the native method of react native.


We add in our StatusBar.setHidden code:

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

C) Removing Android Hardware Navigation buttons and Immersive Mode

In the following example we are going to hide the bottom bar that Android has using react native.

Nearshoring and Agile Software Development Company
This keypad can be physical, virtual or with gestures.


To complete this feature, we require an additional library, there really aren't many but the one we have used the most would be the following: react-native-full-screen.

  1. We install the library: yarn add react-native-full-screen.
  2. We hide / show with the FullScreen.onFullScreen method.

To conclude, we do not recommend hiding if the bottom hardware button because there are devices where its buttons are physical, so it cannot be hidden, in that case it is best to handle it in a pragmatic way and contemplate it in our UX design, to see more information visit: Back Button Hardware Android.

james jara
August 6, 2021