fix(Android): missing background color for formSheets on RN 0.77+

android/build.gradle

@@ -95,6 +95,14 @@ def safeAppExtGet(prop, fallback) {
     appProject?.ext?.has(prop) ? appProject.ext.get(prop) : fallback
 }
 
+def reactNativeRootDir = resolveReactNativeDirectory()
+
+def reactProperties = new Properties()
+file("$reactNativeRootDir/ReactAndroid/gradle.properties").withInputStream { reactProperties.load(it) }
+
+def REACT_NATIVE_VERSION = reactProperties.getProperty("VERSION_NAME")
+def REACT_NATIVE_MINOR_VERSION = REACT_NATIVE_VERSION.startsWith("0.0.0-") ? 1000 : REACT_NATIVE_VERSION.split("\\.")[1].toInteger()
+
 def IS_NEW_ARCHITECTURE_ENABLED = isNewArchitectureEnabled()
 
 android {
@@ -166,6 +174,7 @@ android {
     sourceSets.main {
         ext.androidResDir = "src/main/res"
         java {
+            // Architecture specific
             if (IS_NEW_ARCHITECTURE_ENABLED) {
                 srcDirs += [
                     "src/fabric/java",
@@ -175,6 +184,15 @@ android {
                     "src/paper/java",
                 ]
             }
+
+            // Background color resolving
+            if (REACT_NATIVE_MINOR_VERSION <= 74) {
+                srcDirs += "src/versioned/backgroundcolor/74"
+            } else if (REACT_NATIVE_MINOR_VERSION <= 76) {
+                srcDirs += "src/versioned/backgroundcolor/76"
+            } else {
+                srcDirs += "src/versioned/backgroundcolor/latest"
+            }
         }
         res {
             if (safeExtGet(['compileSdkVersion', 'compileSdk'], rnsDefaultCompileSdkVersion) >= 33) {
@@ -188,7 +206,7 @@ android {
 
 repositories {
     maven {
-        url "${resolveReactNativeDirectory()}/android"
+        url "${reactNativeRootDir}/android"
     }
 
     mavenCentral()

android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt

@@ -25,7 +25,6 @@ import android.widget.LinearLayout
 import androidx.annotation.RequiresApi
 import androidx.appcompat.widget.Toolbar
 import androidx.coordinatorlayout.widget.CoordinatorLayout
-import androidx.core.animation.addListener
 import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.PointerEvents
@@ -51,6 +50,7 @@ import com.swmansion.rnscreens.events.ScreenEventDelegate
 import com.swmansion.rnscreens.ext.recycle
 import com.swmansion.rnscreens.transition.ExternalBoundaryValuesEvaluator
 import com.swmansion.rnscreens.utils.DeviceUtils
+import com.swmansion.rnscreens.utils.resolveBackgroundColor
 
 sealed class KeyboardState
 
@@ -574,6 +574,24 @@ class ScreenStackFragment :
     private fun createAndConfigureBottomSheetBehaviour(): BottomSheetBehavior<Screen> =
         configureBottomSheetBehaviour(createBottomSheetBehaviour())
 
+    private fun resolveBackgroundColor(screen: Screen): Int? {
+        val screenColor =
+            (screen.background as? ColorDrawable?)?.color
+                ?: (screen.background as? MaterialShapeDrawable?)?.tintList?.defaultColor
+
+        if (screenColor != null) {
+            return screenColor
+        }
+
+        val contentWrapper = screen.contentWrapper.get()
+        if (contentWrapper == null) {
+            return null
+        }
+
+        val contentWrapperColor = contentWrapper.resolveBackgroundColor()
+        return contentWrapperColor
+    }
+
     private fun attachShapeToScreen(screen: Screen) {
         val cornerSize = PixelUtil.toPixelFromDIP(screen.sheetCornerRadius)
         val shapeAppearanceModel =
@@ -584,10 +602,8 @@ class ScreenStackFragment :
                     setTopRightCorner(CornerFamily.ROUNDED, cornerSize)
                 }.build()
         val shape = MaterialShapeDrawable(shapeAppearanceModel)
-        val currentColor =
-            (screen.background as? ColorDrawable?)?.color
-                ?: (screen.background as? MaterialShapeDrawable?)?.tintList?.defaultColor
-        shape.setTint(currentColor ?: Color.TRANSPARENT)
+        val backgroundColor = resolveBackgroundColor(screen)
+        shape.setTint(backgroundColor ?: Color.TRANSPARENT)
         screen.background = shape
     }
 

android/src/versioned/backgroundcolor/74/ViewBackgroundUtils.kt

@@ -0,0 +1,6 @@
+package com.swmansion.rnscreens.utils
+
+import com.facebook.react.views.view.ReactViewBackgroundDrawable
+import com.facebook.react.views.view.ReactViewGroup
+
+internal fun ReactViewGroup.resolveBackgroundColor(): Int? = (this.background as? ReactViewBackgroundDrawable)?.color

android/src/versioned/backgroundcolor/76/ViewBackgroundUtils.kt

@@ -0,0 +1,9 @@
+package com.swmansion.rnscreens.utils
+
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
+import com.facebook.react.views.view.ReactViewGroup
+
+@OptIn(UnstableReactNativeAPI::class)
+internal fun ReactViewGroup.resolveBackgroundColor(): Int? = (this.background as? CSSBackgroundDrawable)?.color
+

android/src/versioned/backgroundcolor/latest/ViewBackgroundUtils.kt

@@ -0,0 +1,9 @@
+package com.swmansion.rnscreens.utils
+
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
+import com.facebook.react.uimanager.BackgroundStyleApplicator
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
+import com.facebook.react.views.view.ReactViewGroup
+
+internal fun ReactViewGroup.resolveBackgroundColor(): Int? = BackgroundStyleApplicator.getBackgroundColor(this)
+