not hidding the status and navigation bar in modal

[rehan-taiftec]

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

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

[kadiraydinli]

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

[uncoolclub]

@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}
  > 
...

[kadiraydinli]

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(facebook/react-native@f8a4d28), 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.

[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.

[uncoolclub]

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 (facebook/react-native@f8a4d28)?

[kadiraydinli]

Yes,same issue as above link. @uncoolclub

[valery-lavrik]

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

[kadiraydinli]

@valery-lavrik As far as I know there is no workaround. Maybe you can patch react-native in your node_modules with patch-package.

[valery-lavrik]

unfortunately, I don't know react-native so well

[NazarKuryl0]

Faced with the same problem

[JoaoVitorJJV]

same problem here....

[Joaquim-Frances]

Same problem here!! thanks for the work!

[wangchongwei]

Same problem here.

[knro]

Any workarounds? For current react-native, any patch we can apply to fix this?

[ciaoamigoschat]

news?