Modal showing activity bar when it should not (using SystemNavigationBar - edit: using java code produces the same bug)

[Descatres]

Description

I'm using SystemNavigationBar to hide my status and activity bars, in order to be able to use the full screen for the app I'm currently developing.

• The bug I'm facing (as many others faced already) consists on those same bars appearing when a modal is shown.

• This is already a known issue on the package repo, but I could not find any issue regarding this problem on the react-native repo. Ence, I'm creating one.

• This issue seems to have appeared before on react-native's repo:
  f8a4d28

Is there any fix?

Thanks in advance for any support and help.

React Native Version

0.71.4

Output of npx react-native info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 3.01 GB / 15.91 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.6.4 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowAllTrustedApps: Enabled
      Versions: 10.0.19041.0
  IDEs:
    Android Studio: AI-213.7172.25.2113.9123335
    Visual Studio: 16.11.32126.315 (Visual Studio Enterprise 2019)
  Languages:
    Java: 11.0.17
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.4 => 0.71.4
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

• Create a screen with a button to open a modal with any content, like a button to close it;
• Import SystemNavigationBar, after installing it (npm i react-native-system-navigation-bar)
• Place: SystemNavigationBar.fullScreen(true); inside your function
• Run the code
• Both bars will be hidden
• Click on the button to open the modal
• When the modal opens, at least the bottom bar becomes visible
• Close the modal and both bars are hidden once again.

Snack, code example, screenshot, or link to a repository

App.tsx

import React, {useState} from 'react';
import {Modal, StyleSheet, View} from 'react-native';
import Buttons from './Buttons';
import SystemNavigationBar from 'react-native-system-navigation-bar';


function App(): JSX.Element {
  SystemNavigationBar.fullScreen(true);
  const [visible, setVisible] = useState(false);
  const onclick = () => {
    setVisible(!visible);
  };
  return (
    <View style={styles.content}>
      <Buttons
        press={onclick}
        text={'Open Modal'}
        backgroundColor={'#FFFEFC'}
        borderColor={'#EEEEEE'}
        textColor={'#223631'}
      />
      {visible === true && (
        <Modal transparent={false} visible={visible}>
          <View style={styles.content}>
            <Buttons
              press={onclick}
              text={'Close Modal'}
              backgroundColor={'#FFFEFC'}
              borderColor={'#EEEEEE'}
              textColor={'#223631'}
            />
          </View>
        </Modal>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

Buttons.tsx

import React from 'react';
import {Pressable, Text, View, StyleSheet} from 'react-native';

function Buttons({press, text, backgroundColor, borderColor, textColor}: any) {
  return (
    <Pressable
      style={styles.button}
      onPress={press}
      backgroundColor={backgroundColor}
      borderColor={borderColor}>
      <View style={styles.textFrame}>
        <Text style={styles.textStyle}>
          <Text style={{color: textColor}}>{text}</Text>
        </Text>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    // paddingVertical: 24,
    // paddingHorizontal: 24,
    // alignSelf: 'stretch',
    // flexGrow: 0,
    borderWidth: 4,
    borderRadius: 16,
    height: 88,
    width: 500,
  },
  textFrame: {
    display: 'flex',
    order: 0,
    flexDirection: 'row',
  },
  textStyle: {
    display: 'flex',
    fontFamily: 'OpenSans-SemiBold',
    fontStyle: 'normal',
    fontWeight: '600',
    fontSize: 32,
  },
});

export default Buttons;

Example:

Here, we can see that, at the bottom, after clicking on the open modal button, the bar appears, where it should not.

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.10. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[Descatres]

⚠️ Newer Version of React Native is Available!
ℹ️ You are on a supported minor version, but it looks like there's a newer patch available - 0.71.10. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

Note: I'm using specific packages wich require specific versions of others in my project and I can't change versions that easily.

[Descatres]

Update

I tried with java (I made a bridge between java and react native) to test:

• Imports needed:

import android.app.Activity;
import android.view.WindowInsets;
import android.view.WindowInsetsController;
import android.view.WindowManager;

• Method:

@ReactMethod
    public void hideSystemBars() {
        Activity currentActivity = getCurrentActivity();
        if (currentActivity != null) {
        currentActivity.runOnUiThread(() -> {
            WindowInsetsController controller = currentActivity.getWindow().getDecorView().getWindowInsetsController();
            if (controller != null) {
            controller.hide(WindowInsets.Type.statusBars() | WindowInsets.Type.navigationBars());
            }
            currentActivity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        });
        }
    }

And the problem persists.

[TIGER272]

Problem persist in 0.71.10.

[TheTushar2696]

@cortinico Is this a known issue , A PR has also been raised with the fix,Is this in the pipeline,

Thanks in advance

[cortinico]

@cortinico Is this a known issue , A PR has also been raised with the fix,Is this in the pipeline,

Don't you mind following up on the PRs comments that @lunaleaps left then?

[AdamGerthel]

This issue is currently making it impossible to use Modal in a fullscreen app (such as a game, for instance) because it breaks the UI. I tried applying the code from #36854 but I realized that I'd have to build RN from source which I don't know how to do and seems it would really complicate our workflow with the app in question.

Looking forward to any updates here.

[AdamGerthel]

For anyone looking for a workaround, I've opted to stop using Modal until this has been resolved, and I'm instead using react-native-portal to "teleport" my modals to the root of my view hierarchy so that I can show the content on top of everything else.

[qusaieilouti99]

Facing a similar issue by adding in my MainAcitivity.java this code into my onCreate function :

Window w = getWindow();
      // these styles should be under super.onCreate to take effect
      w.setStatusBarColor(Color.TRANSPARENT);
      w.setNavigationBarColor(Color.TRANSPARENT);
      w.setNavigationBarContrastEnforced(false);
      w.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE );

I'm trying to achieve edge-to-edge experience in my app and it's working fine by using statusBarTranslucent but there is no way to do so for the nav bar.
I guess you can provide something like the statusBarTranslucent that you already supporting, or just fetch whatever settings or flags applied to the root window and reapply it on updateProperties . @cortinico

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[Descatres]

this is still open

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[bbernag]

this is still open