shubhamguptadream11
commented
2 months ago @softgenicsShubham Is this happening on iOS as well?
Closed softgenicsShubham closed 2 months ago
shubhamguptadream11
commented
2 months ago @softgenicsShubham Is this happening on iOS as well?
softgenicsShubham
commented
2 months ago No
shubhamguptadream11
commented
2 months ago
@softgenicsShubham I tried with reproducer you provided. Its not happening at my end.
I am using Pixel 7 Pro API 33 as an emulator to run it.
Can anyone else check this?
softgenicsShubham
commented
2 months ago @shubhamguptadream11, you are right, but this will only happen on physical devices. On the emulator, it works fine on my side as well.
shubhamguptadream11
commented
2 months ago @softgenicsShubham Let me try on physical device.
shubhamguptadream11
commented
2 months ago @softgenicsShubham You are right. On physical device it is reproducible.
One work around you can try is
<StatusBar backgroundColor={'transparent'} translucent/>.
softgenicsShubham
commented
2 months ago @shubhamguptadream11 that's correct, but i want to keep it hidden.
shubhamguptadream11
commented
2 months ago It seems that API's used here in setHidden function is deprecated now. https://github.com/facebook/react-native/blob/3e6b4fa23088e92fb41608fa7dbe3cf410626fb3/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/statusbar/StatusBarModule.kt#L134
May be we need to try out this new APIs: https://developer.android.com/training/system-ui/status But strange thing is How it's working in emulator though 🤔 .
shubhamguptadream11
commented
2 months ago https://github.com/facebook/react-native/issues/39362 https://github.com/expo/expo/issues/15244 It seems to be widely known issue.
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.
shubhamguptadream11
commented
2 months ago After debugging this, I found a way to solve this issue.
setHidden function is responsible for toggling view of 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) {
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) {
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:
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)
}
})
}@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
shubhamguptadream11
commented
2 months ago 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
softgenicsShubham
commented
2 months ago @shubhamguptadream11 The fix is working well. Thanks for the help!
shubhamguptadream11
commented
2 months ago @softgenicsShubham Thanks for testing it out. I am raising a PR then.
shubhamguptadream11
commented
2 months ago @softgenicsShubham We can close this issue after merging the PR in main repo. Currently you are using it as patch right?
softgenicsShubham
commented
2 months ago 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 !
shubhamguptadream11
commented
2 months ago Fixed PR is merged now.
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