How to Completely Hide the StatusBar in React Native

The StatusBar is an integral part of mobile applications, often displaying network indicators, time, and battery information. However, there are scenarios where hiding the StatusBar is necessary, whether for full-screen experiences, games, or immersive media applications.

In this article, we’ll cover how to hide the StatusBar in React Native, explore various edge cases, and discuss the different requirements based on the design and functionality of your app.

Basic Approach: Hiding the StatusBar

React Native provides the StatusBar component, which can be used to control its visibility across the app. To completely hide it, you can use the hidden prop of the StatusBar component.

Example

import React from 'react';
import { View, StatusBar } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <StatusBar hidden={true} />
      {/* Your content goes here */}
    </View>
  );
};

export default App;

Key Points:

1. Import the StatusBar Component: The StatusBar component comes from react-native and can be configured within your app’s layout.
2. Set hidden={true}: To hide the StatusBar, set the hidden prop to true. This will completely hide the StatusBar for the screen it’s applied to.

In this basic example, the StatusBar is hidden for the entire screen. However, certain edge cases and requirements may require more complex configurations, which we’ll discuss next.

Case 1: Full-Screen Applications

For apps that are designed to be full-screen, such as games, media players, or immersive experiences, you’ll likely want to hide the StatusBar across all screens of your application, and not just on specific ones.

Solution: Global StatusBar Control

To ensure the StatusBar is hidden across your app:

• Apply the hidden prop globally in the root component (e.g., App.js).
• This will hide the StatusBar for all screens, even as users navigate between different parts of the app.

Example for Global StatusBar

import React from 'react';
import { View, StatusBar } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar hidden={true} />
      {/* Rest of your app goes here */}
    </View>
  );
};

export default App;

Considerations for Full-Screen Apps

• No Need for SafeAreaView: If you are hiding the StatusBar, you don’t need to use SafeAreaView, which normally ensures that your content doesn’t overlap with system UI elements like the StatusBar or notches on newer devices. Since the StatusBar is hidden, those concerns no longer apply.

Case 2: Handling Notches and Safe Areas

For apps targeting devices with notches (like iPhones with the notch or Android devices with display cutouts), you usually need to ensure that the app’s UI does not overlap with these areas. Normally, SafeAreaView helps manage this.

Do You Still Need SafeAreaView?

If you’re hiding the StatusBar completely, you do not need SafeAreaView for managing safe areas related to the StatusBar, as it’s no longer visible. However, if your app still needs to account for device notches or other system UI elements like the home indicator, SafeAreaView might still be useful for managing those areas.

Example with Notch Consideration

import React from 'react';
import { View, StatusBar, SafeAreaView } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <StatusBar hidden={true} />
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {/* Content will not overlap with notches or home indicators */}
      </View>
    </SafeAreaView>
  );
};

export default App;

When to Use SafeAreaView

• If you hide only the StatusBar: If you are only hiding the StatusBar but still need to avoid overlapping with notches or home indicators, you should use SafeAreaView.
• If you hide all system UI elements: If your app is truly full-screen, hiding all system UI elements (including the notch or home indicator), you don’t need SafeAreaView.

Case 3: StatusBar and Orientation Changes

If your app supports multiple orientations (portrait and landscape), the behavior of the StatusBar may change based on device settings and orientation. In some cases, the StatusBar might reappear when switching orientations, especially on Android.

Solution: Lock StatusBar Across Orientations

To ensure the StatusBar stays hidden across all orientations:

• Monitor orientation changes and programmatically set the StatusBar visibility.
• Use libraries like react-native-orientation-locker to lock the orientation and ensure consistent behavior.

Summary of Key Requirements

1. Completely Hide StatusBar: Use the hidden={true} prop on the StatusBar component to hide it globally or on specific screens.
2. Full-Screen Apps: For full-screen apps, remove SafeAreaView unless you need to handle notches or home indicators.
3. Dynamic Control: Use state or event handling to dynamically toggle the visibility of the StatusBar.
4. Orientation and Edge Cases: Be aware of orientation changes and notch handling for a seamless user experience.