React Native Fullscreen
If you are using Expo on your project then simply add the following to your app.json
file:
{
"expo": {
...
"androidNavigationBar": {
"visible": "immersive"
}
...
}
}
The app.json
file is your go-to place for configuring parts of your app that don't belong in code. It is located at the root of your project next to your package.json. For more info about the app.json
file visit here:
https://docs.expo.io/workflow/configuration/
The androidNavigationBar
is the configuration for the bottom navigation bar on Android. Setting it to immersive
results in the navigation bar being hidden until the user swipes up from the edge where the navigation bar is hidden. For more info about the androidNavigationBar
option visit here: https://docs.expo.io/versions/latest/config/app/#androidnavigationbar
I created a package with fullscreen and more.
react-native-system-navigation-bar
Install
yarn add react-native-system-navigation-bar
or
npm install react-native-system-navigation-bar
Links
https://www.npmjs.com/package/react-native-system-navigation-bar
https://github.com/kadiraydinli/react-native-system-navigation-bar
React Native doesn't provide a way to hide the android navigation bar directly, you would have to create a native module that use the Android Immersive mode introduced in Android 4.4 or use an existing module that do just that, and I found only one: react-native-full-screen
In your project's android manifest file, select fullScreen activity.