Revision history [back]

There are several ways to hide the navigation bar in Android 11+ react-native modals. One approach is to use the "Immersive mode" feature in Android, which allows full-screen navigation without the use of the navigation bar.

To enable immersive mode, you can use the following code snippet in your react-native modal component:

import { StatusBar } from 'react-native';
import { useEffect } from 'react';

useEffect(() => {
  StatusBar.setHidden(true);
  return () => {
    StatusBar.setHidden(false);
  };
}, []);

This code snippet will hide the status bar and navigation bar when the modal is opened and restore them when the modal is closed.

Alternatively, you can also use the "leanback" mode in Android, which hides the navigation bar and only displays it when the user swipes up from the bottom of the screen. To enable leanback mode, you can use the following code snippet:

import { UIManager } from 'react-native';

if (Platform.OS === 'android') {
  UIManager.setLayoutAnimationEnabledExperimental(true);
  UIManager.setNavigationBarColor('#000000');
  UIManager.setUiMode('leanback');
}

This code snippet will enable leanback mode and set the navigation bar color to black. Note that this approach may not work on all devices, and it may also affect the user experience if they are not familiar with the leanback mode.