Skip to content

Commit 32c3a19

Browse files
authored
fix(Android): missing background color for formSheets on RN 0.77+ (#2660)
## Description * facebook/react-native#45688 introduced `BackgroundStyleApplicator` * facebook/react-native#47906 removed our current accessor * somewhere along the way the `ColorDrawable` used previously by `ReactViewGroup` has been exchanged for `CompositeBackgroundDrawable` added in facebook/react-native#45688 > [!caution] ~This PR breaks compatibility with older versions of react-native. While this is fine on Fabric, this also breaks things for Paper.~ > ~Possible solution is to detect react native version in gradle and add versioned sourcesets with implementations for given react native versions.~ > > Not up to date. I've added versioned source files to ensure appropriate backward compatibility down to 0.74. > [!note] > We need CI to ensure the projects do build on all versions we support. ## Changes Migrated to `BackgroundStyleApplicator API` to resolve background color of `contentWrapper`. ## Test code and steps to reproduce `TestAndroidTransitions` - the form sheet should no longer be cut. ## Checklist - [ ] Ensured that CI passes
1 parent 89f8ad3 commit 32c3a19

File tree

5 files changed

+64
-6
lines changed

5 files changed

+64
-6
lines changed

android/build.gradle

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,14 @@ def safeAppExtGet(prop, fallback) {
9595
appProject?.ext?.has(prop) ? appProject.ext.get(prop) : fallback
9696
}
9797

98+
def reactNativeRootDir = resolveReactNativeDirectory()
99+
100+
def reactProperties = new Properties()
101+
file("$reactNativeRootDir/ReactAndroid/gradle.properties").withInputStream { reactProperties.load(it) }
102+
103+
def REACT_NATIVE_VERSION = reactProperties.getProperty("VERSION_NAME")
104+
def REACT_NATIVE_MINOR_VERSION = REACT_NATIVE_VERSION.startsWith("0.0.0-") ? 1000 : REACT_NATIVE_VERSION.split("\\.")[1].toInteger()
105+
98106
def IS_NEW_ARCHITECTURE_ENABLED = isNewArchitectureEnabled()
99107

100108
android {
@@ -166,6 +174,7 @@ android {
166174
sourceSets.main {
167175
ext.androidResDir = "src/main/res"
168176
java {
177+
// Architecture specific
169178
if (IS_NEW_ARCHITECTURE_ENABLED) {
170179
srcDirs += [
171180
"src/fabric/java",
@@ -175,6 +184,15 @@ android {
175184
"src/paper/java",
176185
]
177186
}
187+
188+
// Background color resolving
189+
if (REACT_NATIVE_MINOR_VERSION <= 74) {
190+
srcDirs += "src/versioned/backgroundcolor/74"
191+
} else if (REACT_NATIVE_MINOR_VERSION <= 76) {
192+
srcDirs += "src/versioned/backgroundcolor/76"
193+
} else {
194+
srcDirs += "src/versioned/backgroundcolor/latest"
195+
}
178196
}
179197
res {
180198
if (safeExtGet(['compileSdkVersion', 'compileSdk'], rnsDefaultCompileSdkVersion) >= 33) {
@@ -188,7 +206,7 @@ android {
188206

189207
repositories {
190208
maven {
191-
url "${resolveReactNativeDirectory()}/android"
209+
url "${reactNativeRootDir}/android"
192210
}
193211

194212
mavenCentral()

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

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import android.widget.LinearLayout
2525
import androidx.annotation.RequiresApi
2626
import androidx.appcompat.widget.Toolbar
2727
import androidx.coordinatorlayout.widget.CoordinatorLayout
28-
import androidx.core.animation.addListener
2928
import androidx.core.view.WindowInsetsCompat
3029
import com.facebook.react.uimanager.PixelUtil
3130
import com.facebook.react.uimanager.PointerEvents
@@ -51,6 +50,7 @@ import com.swmansion.rnscreens.events.ScreenEventDelegate
5150
import com.swmansion.rnscreens.ext.recycle
5251
import com.swmansion.rnscreens.transition.ExternalBoundaryValuesEvaluator
5352
import com.swmansion.rnscreens.utils.DeviceUtils
53+
import com.swmansion.rnscreens.utils.resolveBackgroundColor
5454

5555
sealed class KeyboardState
5656

@@ -574,6 +574,24 @@ class ScreenStackFragment :
574574
private fun createAndConfigureBottomSheetBehaviour(): BottomSheetBehavior<Screen> =
575575
configureBottomSheetBehaviour(createBottomSheetBehaviour())
576576

577+
private fun resolveBackgroundColor(screen: Screen): Int? {
578+
val screenColor =
579+
(screen.background as? ColorDrawable?)?.color
580+
?: (screen.background as? MaterialShapeDrawable?)?.tintList?.defaultColor
581+
582+
if (screenColor != null) {
583+
return screenColor
584+
}
585+
586+
val contentWrapper = screen.contentWrapper.get()
587+
if (contentWrapper == null) {
588+
return null
589+
}
590+
591+
val contentWrapperColor = contentWrapper.resolveBackgroundColor()
592+
return contentWrapperColor
593+
}
594+
577595
private fun attachShapeToScreen(screen: Screen) {
578596
val cornerSize = PixelUtil.toPixelFromDIP(screen.sheetCornerRadius)
579597
val shapeAppearanceModel =
@@ -584,10 +602,8 @@ class ScreenStackFragment :
584602
setTopRightCorner(CornerFamily.ROUNDED, cornerSize)
585603
}.build()
586604
val shape = MaterialShapeDrawable(shapeAppearanceModel)
587-
val currentColor =
588-
(screen.background as? ColorDrawable?)?.color
589-
?: (screen.background as? MaterialShapeDrawable?)?.tintList?.defaultColor
590-
shape.setTint(currentColor ?: Color.TRANSPARENT)
605+
val backgroundColor = resolveBackgroundColor(screen)
606+
shape.setTint(backgroundColor ?: Color.TRANSPARENT)
591607
screen.background = shape
592608
}
593609

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
package com.swmansion.rnscreens.utils
2+
3+
import com.facebook.react.views.view.ReactViewBackgroundDrawable
4+
import com.facebook.react.views.view.ReactViewGroup
5+
6+
internal fun ReactViewGroup.resolveBackgroundColor(): Int? = (this.background as? ReactViewBackgroundDrawable)?.color
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
package com.swmansion.rnscreens.utils
2+
3+
import com.facebook.react.common.annotations.UnstableReactNativeAPI
4+
import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
5+
import com.facebook.react.views.view.ReactViewGroup
6+
7+
@OptIn(UnstableReactNativeAPI::class)
8+
internal fun ReactViewGroup.resolveBackgroundColor(): Int? = (this.background as? CSSBackgroundDrawable)?.color
9+
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
package com.swmansion.rnscreens.utils
2+
3+
import com.facebook.react.common.annotations.UnstableReactNativeAPI
4+
import com.facebook.react.uimanager.BackgroundStyleApplicator
5+
import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
6+
import com.facebook.react.views.view.ReactViewGroup
7+
8+
internal fun ReactViewGroup.resolveBackgroundColor(): Int? = BackgroundStyleApplicator.getBackgroundColor(this)
9+

0 commit comments

Comments
 (0)