kadiraydinli / react-native-system-navigation-bar

React Native lets you customize the navigation bar for Android.
https://www.npmjs.com/package/react-native-system-navigation-bar
MIT License
265 stars 19 forks source link

In Landscope mode, immersion does not work. #19

Closed pk936 closed 1 year ago

pk936 commented 2 years ago

When user changes the orientation to landscape, the navigation bar does not disappear.

It works only in portrait mode.

  const mode = useOrientation();

 const setImmer = async() => {
    const result = await SystemNavigationBar.immersive(); // does not work in landscape
  }

useEffect(() => {
   if(mode === 'LANDSCAPE'){
      setTimeout(setImmer, 2000 )
    }
  }, [mode]);
liquidvisual commented 2 years ago

In landscape mode, hide doesn't work either.

kadiraydinli commented 2 years ago

Hey @pk936 @liquidvisual, which Android version are you experiencing this issue on? I checked on Android 11 and 12. It works fine.

pk936 commented 2 years ago

@kadiraydinli Did you try my code as I mentioned ? After you rotate your device, the immersion mode should be activated after 2 seconds. automatically.

kadiraydinli commented 2 years ago

@pk936 Yes, I tried the same way.

https://user-images.githubusercontent.com/9320037/166108520-e0a2fd8d-1309-44a3-87cd-4db4ba8a152d.mov

LouieTian0209 commented 2 years ago

I can confirm that navigationHide isn't working in landscape mode with API 30. I'm still seeing the navigation bar after calling navigationHide with my app that's locked in landscape mode. Upon debugging it seems that this promise is returning an error. I have the following code:

SystemNavigationBar.navigationHide().then(res => {
    console.log('Code reached res section, ' + res);
}, err => {
    console.log('Code reached err section, ' + err);
});

And the output I get from the console is:

Code reached err section, TypeError: null is not an object (evaluating 'NavigationBar.navigationHide')

I did dig in and see you are using NativeModules.NavigationBar to access the navigation bar, and when I tried

NativeModules.NavigationBar.navigationHide();

I got the following error:

TypeError: null is not an object (evaluating '_reactNative.NativeModules.NavigationBar.navigationHide')

And when I tried console.log(NativeModules.NavigationBar), I got null. I'm not familiar with neither native Android nor React Native low level code, so I'm guessing something is going wrong when you're trying to access the NavigationBar property that caused the error?

MwareSolutons commented 2 years ago

I want to add to this, for us its also not working on a Samsung Tablet Android 12. The bar disappears but the screen height is not adjusted there is now a grey area where the bar used to be.

kadiraydinli commented 1 year ago

I made changes for this issue, you can find it in the latest version.

AlejandroAguilar99 commented 1 year ago

I want to add to this, for us its also not working on a Samsung Tablet Android 12. The bar disappears but the screen height is not adjusted there is now a grey area where the bar used to be.

Hey! did you managed to make the grey area disappear? I'm having the same issue on Android 9

kadiraydinli commented 1 year ago

I want to add to this, for us its also not working on a Samsung Tablet Android 12. The bar disappears but the screen height is not adjusted there is now a grey area where the bar used to be.

Hey! did you managed to make the grey area disappear? I'm having the same issue on Android 9

Hi @AlejandroAguilar99, I have released a new version. I think it will solve your issue. Can you use the latest version and test it?

AlejandroAguilar99 commented 1 year ago

I want to add to this, for us its also not working on a Samsung Tablet Android 12. The bar disappears but the screen height is not adjusted there is now a grey area where the bar used to be.

Hey! did you managed to make the grey area disappear? I'm having the same issue on Android 9

Hi @AlejandroAguilar99, I have released a new version. I think it will solve your issue. Can you use the latest version and test it?

Thanks, but unfortunately it's still not working :/

kadiraydinli commented 1 year ago

@AlejandroAguilar99 What device are you testing? I can test mostly with Android emulators. I don't encounter this issue when I test it on emulators. Therefore, it becomes more difficult to solve the problem. I would be very grateful if you could share something like a sample snack for me. I want to test it in the same ambient conditions as I can. Thanks in advance.

AlejandroAguilar99 commented 1 year ago

@AlejandroAguilar99 What device are you testing? I can test mostly with Android emulators. I don't encounter this issue when I test it on emulators. Therefore, it becomes more difficult to solve the problem. I would be very grateful if you could share something like a sample snack for me. I want to test it in the same ambient conditions as I can. Thanks in advance.

Sorry for not letting you know before, the problem was the width of the component, since I assigned the window dimension instead of the screen dimension, it works perfectly now