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.
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.
Exact benefits of having our react native app on Fullscreen:
- Keeps the focus on the app without distractions.
- Prevent the user from accidentally clicking on other actions.
- 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
Immersive Sticky
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.
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.
- We install the library: yarn add react-native-full-screen.
- 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.
