search

wix / react-native-navigation

A complete native navigation solution for React Native
https://wix.github.io/react-native-navigation/
MIT License
13.04k stars 2.67k forks source link

screen goes behind StatusBar #7094

Open misag777 opened 3 years ago

misag777 commented 3 years ago

🐛 Bug Report

hello as you see the moon icon goes behind status Bar in some devices i tested in samsung a10s had issue but in a70 and a5 works fine
i tested in some Simulators and it works fine i try hide tab bar and still have this issue here is status bar default option: Navigation.setDefaultOptions({ statusBar: { translucent: false, drawBehind: false, animated: false, backgroundColor: '#0075ff', }, });

Have you read the Contributing Guidelines on issues?

yes

Expected behavior

the moon icon not goes under status bar

demo 2

Actual Behavior

demo

Your Environment

sriharshachilakapati commented 3 years ago

We're facing the exact same issue. Any resolution for this so far?

Also, adding on to this, this is not device specific. We have tested it in emulator as well as in OnePlus 6 and OnePlus 7 Pro.

witalobenicio commented 2 years ago

Same problem here.

flexsurfer commented 2 years ago

any updates? same problem in the latest version

Vilzku commented 2 years ago

We were able to narrow down this problem to the splash screen in a project I'm currently working on. The react-native-navigation will update the status bar after the application has loaded, causing the application content to appear beneath it after the splash screen has been removed. In our case, this problem was resolved by completely switching the splash screen library. Although there are still some issues with the splash screen moving upwards when the status bar updates, the main content is now displayed correctly with the new library.

If you use a splash screen, try removing the status bar or removing the splash completely and see if it affects the behavior.

flexsurfer commented 2 years ago

thanks, we use react-native-splash-screen library, btw it affects topbar as well

image
flexsurfer commented 2 years ago

and it works fine in react-native-navigation@^7.13.0: but we have this issues when we upgrade to react-native-navigation@^7.27.1:

flexsurfer commented 2 years ago

yes , if splash screen is not used, then there is no issue , hm @Vilzku which splash library you're using ? thanks

Vilzku commented 2 years ago

We actually were also using react-native-splash-screen before and decided to replace that with v3 version of react-native-bootsplash.

flexsurfer commented 2 years ago

btw, in react-native-splash-screen there is second parameter (fullscreen) in show method, if its false then it works fine , so the problem is that react-native-splash-screen hides statubar in fullscreen mode