Hidden Status Bar results in black bar instead of transparent [Android 13, Google Pixel 6] #39362

jordanjuras · 2023-09-09T10:43:10Z

Description

Greetings,

Reporting a bug found in react-native Status Bar, specifically on Google Pixel 6. I have only been able to test on a Pixel 6 device setup with Android v13 (API 33).

In order to hide the status bar, and expose the view behind it, we do the following:

  StatusBar.setHidden(true);
  if (Platform.OS === 'android')
  {
    StatusBar.setBackgroundColor('transparent');
    StatusBar.setTranslucent(true);
  }

On Pixel 6, this does not work, and instead the status bar is rendered as a black bar, entirely covering the status bar area.

The bug does not reproduce on any of the following devices available to me:

Google Pixel 3 Android v11
Samsung Galaxy s9 Android v10
Android Pixel 6 v13 EMULATOR

EXPECTED:
Pixel 3 & Galaxy s9 - init state

Pixel 3 & Galaxy s9 - touched

ACTUAL:
Pixel 6 - init state

Pixel 6 - touched

React Native Version

0.71.7

Output of `npx react-native info`

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 60.08 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.4.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.7.2 - /opt/homebrew/bin/npm
    Watchman: 2023.07.10.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.1 - /Users/joju/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9014738
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  Languages:
    Java: 20.0.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.7 => 0.71.7
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

On Google Pixel 6, create react native app with the following component

import { Component } from "react";
import { Platform, StatusBar, View } from "react-native";

export default class App extends Component<{},{}> {

  componentDidMount() {

    StatusBar.setHidden(true);
    if (Platform.OS === 'android')
    {
      StatusBar.setBackgroundColor('transparent');
      StatusBar.setTranslucent(true);
    }
      
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor:'blue'}}/>
    );
  }

}

Snack, screenshot, or link to a repository

https://snack.expo.dev/Kdn-2a-rX

The text was updated successfully, but these errors were encountered:

github-actions · 2023-09-09T10:43:24Z

⚠️	Newer Version of React Native is Available!
ℹ️	You are on a supported minor version, but it looks like there's a newer patch available - 0.71.13. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

jordanjuras · 2023-09-09T11:51:35Z

I have tested and the issue is reproducible on react native version 0.71.13

jordanjuras · 2023-09-09T17:25:36Z

I have just confirmed that the issue also reproduces on Google Pixel 7 Android v13.

IamMasterWayne · 2023-11-17T19:29:15Z

+1

yaroslavnikiforov · 2023-12-12T18:26:41Z

The same issue is on Android 14 and react-native 0.69.9.

jrpn93 · 2024-04-10T07:26:11Z

Same issue here!
<StatusBar hidden={true} />will result in black areas on some devices in Android 13 & 14.
Devices like the Google Pixel 6 and MIUI devices have camera cut-outs.

jrpn93 · 2024-04-10T07:49:56Z

Okay, I found a solution pretty quickly!
Adding <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item> in my android/app/src/main/res/values/styles.xml resolved this issue.
just use <StatusBar hidden={true} /> after adding & Rebuilding your react native android app

Found Here :
expo/expo#15244 (comment)

yaroslavnikiforov · 2024-04-10T09:14:05Z

Thanks @jrpn93

AustineA · 2024-05-27T09:04:32Z

Okay, I found a solution pretty quickly! Adding <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item> in my android/app/src/main/res/values/styles.xml resolved this issue. just use <StatusBar hidden={true} /> after adding & Rebuilding your react native android app

Found Here : expo/expo#15244 (comment)

This doesn't work on Samsung devices

jim-king-2000 · 2024-08-16T05:08:15Z

The same issue on Samsung Galaxy A54. But sometimes it shows transparent status bar. Any solution?

shubhamguptadream11 · 2024-08-18T06:11:20Z

I am also facing this issue.
Not working in OnePlus, Vivo.

I tried creating sample android app as well.
Without following approaches but didn't worked.

Approach 1:
//    private fun hideStatusBar() {
//        window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_FULLSCREEN
//        actionBar?.hide()
//    }
//
//    private fun showStatusBar() {
//        window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_VISIBLE
//        actionBar?.show()
//    }

Approach 2:
//    fun hideStatusBar(activity: Activity) {
//        activity.window.addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN)
//    }
//
//    fun showStatusBar(activity: Activity) {
//        activity.window.clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN)
//    }

Is this an issue with all such devices with camera notch at top?

shubhamguptadream11 · 2024-08-18T09:23:25Z

I had shared my findings regarding this here: #46070 (comment)
Also shared one fix. Let me know if it fixes this.

Summary: Fixes these issues: - #46070 - #39362 ## Changelog:  [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

shubhamguptadream11 · 2024-08-29T06:25:28Z

@jordanjuras This is fixed in above linked PR.
We can mark this closed now.

jordanjuras added the Needs: Triage 🔍 label Sep 9, 2023

github-actions bot added the Newer Patch Available label Sep 9, 2023

github-actions bot added the Platform: Android Android applications. label Sep 9, 2023

shubhamguptadream11 mentioned this issue Aug 18, 2024

StatusBar Area Turns Black When Hidden Instead of Inheriting Background Color #46070

Closed

shubhamguptadream11 mentioned this issue Aug 18, 2024

fix(android): status bar black strip fixed #46086

Closed

cortinico added Resolution: Fixed A PR that fixes this issue has been merged. and removed Needs: Triage 🔍 labels Sep 12, 2024

cortinico closed this as completed Sep 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hidden Status Bar results in black bar instead of transparent [Android 13, Google Pixel 6] #39362

Hidden Status Bar results in black bar instead of transparent [Android 13, Google Pixel 6] #39362

jordanjuras commented Sep 9, 2023

github-actions bot commented Sep 9, 2023

jordanjuras commented Sep 9, 2023

jordanjuras commented Sep 9, 2023

IamMasterWayne commented Nov 17, 2023

yaroslavnikiforov commented Dec 12, 2023

jrpn93 commented Apr 10, 2024 •

edited

Loading

jrpn93 commented Apr 10, 2024 •

edited

Loading

yaroslavnikiforov commented Apr 10, 2024

AustineA commented May 27, 2024

jim-king-2000 commented Aug 16, 2024 •

edited

Loading

shubhamguptadream11 commented Aug 18, 2024

shubhamguptadream11 commented Aug 18, 2024

shubhamguptadream11 commented Aug 29, 2024

Hidden Status Bar results in black bar instead of transparent [Android 13, Google Pixel 6] #39362

Hidden Status Bar results in black bar instead of transparent [Android 13, Google Pixel 6] #39362

Comments

jordanjuras commented Sep 9, 2023

Description

React Native Version

Output of npx react-native info

Steps to reproduce

Snack, screenshot, or link to a repository

github-actions bot commented Sep 9, 2023

jordanjuras commented Sep 9, 2023

jordanjuras commented Sep 9, 2023

IamMasterWayne commented Nov 17, 2023

yaroslavnikiforov commented Dec 12, 2023

jrpn93 commented Apr 10, 2024 • edited Loading

jrpn93 commented Apr 10, 2024 • edited Loading

yaroslavnikiforov commented Apr 10, 2024

AustineA commented May 27, 2024

jim-king-2000 commented Aug 16, 2024 • edited Loading

shubhamguptadream11 commented Aug 18, 2024

shubhamguptadream11 commented Aug 18, 2024

shubhamguptadream11 commented Aug 29, 2024

Output of `npx react-native info`

jrpn93 commented Apr 10, 2024 •

edited

Loading

jrpn93 commented Apr 10, 2024 •

edited

Loading

jim-king-2000 commented Aug 16, 2024 •

edited

Loading