fix(android): status bar black strip fixed

[shubhamguptadream11]

Summary:

Fixes these issues:

• StatusBar Area Turns Black When Hidden Instead of Inheriting Background Color #46070
• Hidden Status Bar results in black bar instead of transparent [Android 13, Google Pixel 6] #39362

Changelog:

[ANDROID] [FIXED] - Fixed black strip coming when hiding status bar

setHidden function is responsible for hiding status bar

react-native/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/statusbar/StatusBarModule.kt

Line 122 in 25d6a15

override fun setHidden(hidden: Boolean) {

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: The window is always allowed to extend into the DisplayCutout areas on the short edges of the screen. [Android 9.0 and above]
• setDecorFitsSystemWindows: 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

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

[facebook-github-bot]

@alanleedev has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[alanleedev]

@shubhamguptadream11 Thanks for fixing this issue. It seems to work great.

[shubhamguptadream11]

@alanleedev Thank you! I'm glad the fix worked well.

[alanleedev]

@shubhamguptadream11 I am making minor formatting change and fixing the version check as you used P instead or R.

[shubhamguptadream11]

@alanleedev Ohh okay. Thanks for this.
I forgot to change in PR. Updated my PR description.

[facebook-github-bot]

@alanleedev merged this pull request in f6b6d00.

[react-native-bot]

This pull request was successfully merged by @shubhamguptadream11 in f6b6d00

^{When will my fix make it into a release? | How to file a pick request?}

[dgabriele]

This didn't fix it for me. Running Pixel 8a

[alanleedev]

This didn't fix it for me. Running Pixel 8a

@dgabriele How did you test? Which RN version did you use?