StatusBar Area Turns Black When Hidden Instead of Inheriting Background Color #46070
Comments
cortinico
added
Issue: Author Provided Repro
|
@softgenicsShubham Is this happening on iOS as well? |
|
No |
|
|
|
@shubhamguptadream11, you are right, but this will only happen on physical devices. On the emulator, it works fine on my side as well. |
|
@softgenicsShubham Let me try on physical device. |
|
@softgenicsShubham You are right. On physical device it is reproducible. |
|
@shubhamguptadream11 that's correct, but i want to keep it hidden. |
|
It seems that API's used here in setHidden function is deprecated now. May be we need to try out this new APIs: https://developer.android.com/training/system-ui/status |
|
#39362 I tried with sample android app(Without react native), there also it's not working. I tried new flags as well. Nothing works as of now. |
|
After debugging this, I found a way to solve this issue. What real issue is? For android devices with camera area on top a black strip is coming after hidding status bar. Previous Implementation: It seems that FLAG_FULLSCREEN flag are not enough to draw content in camera area. Solution:
By adding this flag we are now able to hide status bar properly. @softgenicsShubham Please try by replacing setHidden function with this new one. Test it either by using a patch or build from source. Let me know whether it is fixing it or not? Note: This will work above Android 11 and above |
|
Device Detail: After fix: |
|
@shubhamguptadream11 The fix is working well. Thanks for the help! |
|
@softgenicsShubham Thanks for testing it out. I am raising a PR then. |
|
@softgenicsShubham We can close this issue after merging the PR in main repo. Currently you are using it as patch right? |
|
Apologies for the confusion, I’ve reopened the issue. Yes, I’m currently using it as a patch. I’ll wait for the PR to be merged into the main repo before officially closing the issue. Thanks for the clarification @shubhamguptadream11 ! |
Summary: Fixes these issues: - #46070 - #39362 ## Changelog: <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests --> [ANDROID] [FIXED] - Fixed black strip coming when hiding status bar `setHidden` function is responsible for hiding status bar https://github.com/facebook/react-native/blob/25d6a152cc720e0d5f860dab228ac2e43321d9e4/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/statusbar/StatusBarModule.kt#L122 **What real issue is?** **_For android devices with camera area on top a black strip is coming after hidding status bar._** Previous Implementation: ``` override fun setHidden(hidden: Boolean) { val activity = currentActivity if (activity == null) { Log.w( ReactConstants.TAG, "StatusBarModule: Ignored status bar change, current activity is null.") return } UiThreadUtil.runOnUiThread( Runnable { val window = activity.window ?: return@Runnable if (hidden) { window.addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN) window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN) } else { window.addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN) window.clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN) } }) } ``` It seems that FLAG_FULLSCREEN flag are not enough to draw content in camera area. **Solution:** In order to tackle this, android exposes 2 flags: - [layoutInDisplayCutOutMode](https://developer.android.com/reference/android/view/WindowManager.LayoutParams#layoutInDisplayCutoutMode): The window is always allowed to extend into the [DisplayCutout](https://developer.android.com/reference/android/view/DisplayCutout) areas on the short edges of the screen. [Android 9.0 and above] - [setDecorFitsSystemWindows](https://developer.android.com/reference/android/view/Window#setDecorFitsSystemWindows(boolean)): allows content to be able to extend into the cutout area. [Android 10.0 and above] By adding this flag we are now able to hide status bar properly. ``` override fun setHidden(hidden: Boolean) { val activity = currentActivity if (activity == null) { FLog.w( ReactConstants.TAG, "StatusBarModule: Ignored status bar change, current activity is null.") return } UiThreadUtil.runOnUiThread( Runnable { val window = activity.window ?: return@Runnable if (hidden) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) { // Ensure the content extends into the cutout area window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES window.setDecorFitsSystemWindows(false) } window.addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN) window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN) } else { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) { window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT window.setDecorFitsSystemWindows(true) } window.addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN) window.clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN) } }) } ``` **_Note: This will work above Android 11 and above_** Pull Request resolved: #46086 Test Plan: - Tested by author of this issue - Sharing here the videos of before and after fix Device Detail: Oneplus9 5G OS 11 **Before fix:** https://github.com/user-attachments/assets/589098ff-a3fa-4962-a15b-ceacbfd03d2d **After fix:** https://github.com/user-attachments/assets/a87dd8e4-3624-4e09-99da-a14f9e19fcc6 Reviewed By: cipolleschi Differential Revision: D61509889 Pulled By: alanleedev fbshipit-source-id: 733962a3bed2efba71588a4d2fdf7c9c386bc3b4
|
Fixed PR is merged now. |
cortinico
added
the
Resolution: Fixed
Description
When hiding the
StatusBarusingStatusBar hidden, the area where theStatusBarwas turns black instead of inheriting the background color of the parentView.Steps to reproduce
StatusBarusing<StatusBar hidden />.StatusBararea turns black.React Native Version
0.75.1
Affected Platforms
Runtime - Android
Output of
npx react-native infoStacktrace or Logs
Reproducer
https://github.com/softgenicsShubham/react-native-issues.git
Screenshots and Videos
No response
The text was updated successfully, but these errors were encountered: