In mobile app development, creating a full-screen experience is essential for immersive applications like games, media viewers. For React Native apps, the goal is to hide the status bar and navigation bar to offer an uninterrupted full-screen mode for users.
One of the easiest ways to achieve this is by using the react-native-immersive-mode library. This library allows you to hide both the status bar and navigation bar, making your app look and feel like a true full-screen experience.It also offers mutiple variations like sticky navigation, bar color and styling etc.
Step 1: Setting Up a New React Native Project
Create a react native app using the command below, if you have already a project you can skip this step
npx react-native init FullScreenApp
cd FullScreenApp
npx react-native init FullScreenApp - creates the react-native app named FullScreenApp
cd FullScreenApp - moves to the project dir
Step 2: Install the react-native-immersive-mode library
npm install react-native-immersive-mode
This will install the required package to the project.(current version: 2.0.2)
Step 3: Implementing the full screen
To implement the full screen add the code for screen as shown below
import React, { useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ImmersiveMode from 'react-native-immersive-mode'; //import the ImmersiveMode libary
const App = () => {
// Code for full screen
useEffect(() => {
// Enable immersive mode when the component mounts
ImmersiveMode.fullLayout(true);
// Set the immersive mode as sticky (So it stays even if the user swipes from the edges of the screen)
//there are multiple variations to this you can try it.
ImmersiveMode.setBarMode('FullSticky');
// makes the screen normal again if the component unmounts
return () => {
ImmersiveMode.fullLayout(false);
ImmersiveMode.fullLayout('Normal');
};
}, []);
return (
<View style={styles.container}>
<Text style={styles.text}>Welcome to Full-Screen Mode!</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000',
},
text: {
fontSize: 24,
color: '#fff',
},
});
export default App;
The above example shows how to make the app full screen. You can use the above code on any particular screen of the app to make it full screen or make the whole app full screen by writing the code in root component.
Step 4: Test Full-Screen Mode
Now that you’ve implemented full-screen functionality, it’s time to test it on both iOS and Android devices/emulators.
Run on Android: Use the following command to run the app on an Android device or emulator:
npx react-native run-android
Run on iOS: For iOS, you can use the following command to run the app on an iOS simulator or a real device:
npx react-native run-ios
Thus, using the simple steps above, we can make a react native app or a particular screen of the app full screen.
