No top insets for Android in 4.19.0

[faljabi]

Description

Hi,

After upgrading to 4.19.0, top insets not working for Android, reverting back to 4.18.0 works fine.

Steps to reproduce

1. Upgrade from 4.18 to 4.19

Snack or a link to a repository

http://videoattached.com

Screens version

4.19.0

React Native version

0.83

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Both real and emulator

Acknowledgements

Yes

[kkafar]

Hey, thanks for the report. We'll look into this

[t0maboro]

Hi @faljabi . Thanks for reporting this issue. Would it be possible to attach a recording for 4.19 with the same flow for comparison?

[faljabi]

Oh I thought I shared a video sorry for that.
It is the same video but no top insets where header overlapping with status bar.

Will attach the video in a bit.

[RayKay91]

Also facing the same issue where there header seems smaller than v4.18.0 leading to the icons and screen title squashing up right against the status bar.

I notice this went in in 4.19.0, could it be the issue? #3402

[t0maboro]

I haven't been able to reproduce this issue in our example App so far. I have a set of potentially offending commits, but it depends on whether the inset is being ignored entirely or the event order for headerr height is incorrect. If possible, a minimal repro would definitely help us move forward in the investigation.

Additionally, I might be able to deduce something useful if you can share which options you are passing for the problematic Screen. Any extra information will help. Thank you

[faljabi]

This is the recording for 4.19.0

[t0maboro]

Thank you! Really appreciate it. I was experimenting for a while and I have some idea what may happen. Would you be able to check whether applying this as a patch for 4.19 is working?

diff --git a/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt b/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt
index 0ecc2fc36..8b957e13e 100644
--- a/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt
@@ -4,13 +4,16 @@ import android.annotation.SuppressLint
 import android.content.Context
 import android.os.Build
 import android.view.Choreographer
+import android.view.View
 import android.view.WindowInsets
 import android.view.WindowManager
 import androidx.appcompat.widget.Toolbar
 import androidx.core.view.WindowInsetsCompat
+import com.facebook.react.bridge.ReactContext
 import com.facebook.react.modules.core.ReactChoreographer
 import com.facebook.react.uimanager.ThemedReactContext
 import com.swmansion.rnscreens.utils.InsetsCompat
+import com.swmansion.rnscreens.utils.getDecorViewTopInset
 import com.swmansion.rnscreens.utils.resolveInsetsOrZero
 import kotlin.math.max
 
@@ -139,13 +142,27 @@ open class CustomToolbar(
                 0,
             )
 
+        var maybeTopLevelDecorView: View? = null
+
+        if(context is ReactContext) {
+            val reactContext = context as ReactContext
+            maybeTopLevelDecorView =
+                requireNotNull(
+                    reactContext.currentActivity?.window?.decorView,
+                ) { "[RNScreens] DecorView is required for applying inset correction, but was null." }
+        }
+
+        val testTopInset =
+            if(maybeTopLevelDecorView!=null) getDecorViewTopInset(maybeTopLevelDecorView)
+            else max(cutoutInsets.top, if (shouldApplyTopInset) systemBarInsets.top else 0)
+
         // We want to handle display cutout always, no matter the HeaderConfig prop values.
         // If there are no cutout displays, we want to apply the additional padding to
         // respect the status bar.
         val verticalInsets =
             InsetsCompat.of(
                 0,
-                max(cutoutInsets.top, if (shouldApplyTopInset) systemBarInsets.top else 0),
+                testTopInset,
                 0,
                 max(cutoutInsets.bottom, 0),
             )

[faljabi]

The patch solved the issue @t0maboro!

[t0maboro]

Thank you for checking. I'll do some refactoring and prepare a proper fix tomorrow.

[reggiegutter]

This is happening in my app too. I have edge-to-edge enabled. It works correctly for SDK 35+, but not for SDK 34-
This is really breaking my apps design, since headerStyle does not accept paddings, which could be used as a workaround.