Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(android): status bar black strip fixed (#46086)
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
- Loading branch information