How to put a React Native app with Expo in Immersive mode (full screen) for Android

by
Tiempo de lectura: < 1 minuto

We will implement the Immersive mode for Android on an Expo React Native app today.

The Immersive mode allows us to put an app in full-screen mode on Android.

We will start by installing the necessary libraries:

Expo navigation bar:

expo install expo-navigation-bar

Expo status bar:

expo install expo-status-bar

And now to hide the status bar and navigation we add this code inside our app.js/tsx

import * as NavigationBar from 'expo-navigation-bar';import { setStatusBarHidden } from "expo-status-bar";export default function App() { useEffect(() => { NavigationBar.setPositionAsync("relative"); NavigationBar.setVisibilityAsync("hidden"); NavigationBar.setBehaviorAsync("inset-swipe"); setStatusBarHidden(true, "none"); }, []);

And inside app.json we add in the android section:

 "androidStatusBar": { "translucent": true, "hidden": true }
Post Views: 0

Leave a Comment