react-native-system-navigation-bar not hidding the status and navigation bar in modal

trafficstars

Description

I am using a modal from react-native i wanted to hide the status bar and navigation bar on modal as well but its showing on the modal Screenshot 2023-05-04 at 10 25 30 AM

react-native-system-navigation-bar version

2.6.0

React Native version

0.71

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

No response

May 04 '23 05:05 rehan-taiftec

Hi @rehan-taiftec, can you share the snack code so I can test it?

May 04 '23 10:05 kadiraydinli

@kadiraydinli

Same issue here. 🥺

Description

I want to use Immersive mode to cover both the status bar and the bottom navigation, but when I use the modal provided by react-native, the bottom navigation is visible.

react-native-system-navigation-bar version

2.6.0

React Native version

0.71.6

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

// ImmersiveModeHandler.js
import { AppState, Platform } from 'react-native';
import SystemNavigationBar from 'react-native-system-navigation-bar';

import { PLATFORM } from '@Constants';

const setImmersiveMode = () => {
  SystemNavigationBar.immersive();
};

const initImmersiveMode = () => {
  if (Platform.OS === PLATFORM.IOS) {
    return;
  }

  setImmersiveMode();
  AppState.addEventListener('change', setImmersiveMode);
};

export { initImmersiveMode, setImmersiveMode };

// LoadingScreen.jsx
...
componentDidMount = async () => {
   ...
   await Promise.all([setImmersiveMode(), ...]);
  };

// Example > ModalComponent.jsx
import { Modal } from 'react-native';

...

return (
  <Modal
    transparent
    statusBarTranslucent
    visible={modalVisible}
    accessible={false}
    style={getStyle().container}
  > 
...

May 16 '23 09:05 uncoolclub

Hi @uncoolclub, thank you for your comment. 🙏🏼 I was able to see the problem when I tested your snack code. This issue was fixed in react-native before(https://github.com/facebook/react-native/commit/f8a4d281e2be5b68fbebf53f930d37d96236829c), but now it doesn't seem to work properly for Android SDK Level 33 (Android 13). It works correctly when I tested it on Android SDK Level 28 (Android 9). I'm looking at what I can do to fix this issue. I'll let you know when I find a solution.

May 16 '23 13:05 kadiraydinli

Hello again @uncoolclub , sorry to be back late. This issue is a React Native related issue. If I can find the time and do it, I'm thinking of opening a pull request for this in React Native. Unfortunately this issue cannot be resolved in my package.

May 24 '23 21:05 kadiraydinli

Hello, @kadiraydinli. It's okay, thanks for comment! I am aware of that. Could you tell me what specifically was an issue in the react native? Is it the same issue as the one you linked above (https://github.com/facebook/react-native/commit/f8a4d281e2be5b68fbebf53f930d37d96236829c)?

May 25 '23 03:05 uncoolclub

Yes,same issue as above link. @uncoolclub

May 25 '23 06:05 kadiraydinli

Faced with the same problem. There are no workarounds? (rn - 0.71.8)