From 309cdea337101cfe2212cfb6abebf1e783e43282 Mon Sep 17 00:00:00 2001 From: Nick Gerleman Date: Thu, 3 Oct 2024 14:55:15 -0700 Subject: [PATCH] Use BackgroundStyleApplicator when setting background color in BaseViewManager (#46160) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/46160 We use this for all built-in components now, and rely on going through `BackgroundStyleApplicator` to be able to set additional background effects like borders, rounded corners, box shadow, outlines. Let's use this in `BaseViewManager`, to allow exposing those other effects to all views, letting RN manage the background drawable for views using `BaseViewManager` and exposing the props for the managed styles. This is technically breaking, in the case where a custom component could previously inherit directly from `BaseViewManager`/`ReactViewGroupManager`, (vs `SimpleViewManager`/`ReactViewManager`), then override `setBackgroundColor` on the Android View, instead of the view manager, but this effected zero of the [276 top libraries](https://github.com/elicwhite/react-native-libraries), so I don't think it would be common to hit. Changelog: [Android][Breaking] - Use BackgroundStyleApplicator when setting background color in BaseViewManager Reviewed By: tdn120 Differential Revision: D61658739 fbshipit-source-id: 15af649328ea18fda3cd68e56d481ed1c0fd43c4 --- .../react-native/ReactAndroid/api/ReactAndroid.api | 11 ----------- .../facebook/react/uimanager/BaseViewManager.java | 5 +++-- .../facebook/react/views/image/ReactImageManager.kt | 8 -------- .../scroll/ReactHorizontalScrollViewManager.java | 6 ------ .../react/views/scroll/ReactScrollViewManager.java | 6 ------ .../react/views/text/ReactTextAnchorViewManager.java | 6 ------ .../react/views/textinput/ReactTextInputManager.java | 6 ------ .../facebook/react/views/view/ReactViewManager.java | 6 ------ .../react/uimanager/SimpleViewPropertyTest.kt | 12 ------------ 9 files changed, 3 insertions(+), 63 deletions(-) diff --git a/packages/react-native/ReactAndroid/api/ReactAndroid.api b/packages/react-native/ReactAndroid/api/ReactAndroid.api index 105ce62296ce81..01c875b378bf24 100644 --- a/packages/react-native/ReactAndroid/api/ReactAndroid.api +++ b/packages/react-native/ReactAndroid/api/ReactAndroid.api @@ -6680,8 +6680,6 @@ public final class com/facebook/react/views/image/ReactImageManager : com/facebo public fun getName ()Ljava/lang/String; public synthetic fun onAfterUpdateTransaction (Landroid/view/View;)V public final fun setAccessible (Lcom/facebook/react/views/image/ReactImageView;Z)V - public synthetic fun setBackgroundColor (Landroid/view/View;I)V - public fun setBackgroundColor (Lcom/facebook/react/views/image/ReactImageView;I)V public final fun setBlurRadius (Lcom/facebook/react/views/image/ReactImageView;F)V public final fun setBorderColor (Lcom/facebook/react/views/image/ReactImageView;Ljava/lang/Integer;)V public final fun setBorderRadius (Lcom/facebook/react/views/image/ReactImageView;IF)V @@ -7108,8 +7106,6 @@ public class com/facebook/react/views/scroll/ReactHorizontalScrollViewManager : public synthetic fun scrollTo (Ljava/lang/Object;Lcom/facebook/react/views/scroll/ReactScrollViewCommandHelper$ScrollToCommandData;)V public fun scrollToEnd (Lcom/facebook/react/views/scroll/ReactHorizontalScrollView;Lcom/facebook/react/views/scroll/ReactScrollViewCommandHelper$ScrollToEndCommandData;)V public synthetic fun scrollToEnd (Ljava/lang/Object;Lcom/facebook/react/views/scroll/ReactScrollViewCommandHelper$ScrollToEndCommandData;)V - public synthetic fun setBackgroundColor (Landroid/view/View;I)V - public fun setBackgroundColor (Lcom/facebook/react/views/scroll/ReactHorizontalScrollView;I)V public fun setBorderColor (Lcom/facebook/react/views/scroll/ReactHorizontalScrollView;ILjava/lang/Integer;)V public fun setBorderRadius (Lcom/facebook/react/views/scroll/ReactHorizontalScrollView;IF)V public fun setBorderStyle (Lcom/facebook/react/views/scroll/ReactHorizontalScrollView;Ljava/lang/String;)V @@ -7351,8 +7347,6 @@ public class com/facebook/react/views/scroll/ReactScrollViewManager : com/facebo public synthetic fun scrollTo (Ljava/lang/Object;Lcom/facebook/react/views/scroll/ReactScrollViewCommandHelper$ScrollToCommandData;)V public fun scrollToEnd (Lcom/facebook/react/views/scroll/ReactScrollView;Lcom/facebook/react/views/scroll/ReactScrollViewCommandHelper$ScrollToEndCommandData;)V public synthetic fun scrollToEnd (Ljava/lang/Object;Lcom/facebook/react/views/scroll/ReactScrollViewCommandHelper$ScrollToEndCommandData;)V - public synthetic fun setBackgroundColor (Landroid/view/View;I)V - public fun setBackgroundColor (Lcom/facebook/react/views/scroll/ReactScrollView;I)V public fun setBorderColor (Lcom/facebook/react/views/scroll/ReactScrollView;ILjava/lang/Integer;)V public fun setBorderRadius (Lcom/facebook/react/views/scroll/ReactScrollView;IF)V public fun setBorderStyle (Lcom/facebook/react/views/scroll/ReactScrollView;Ljava/lang/String;)V @@ -7652,7 +7646,6 @@ public abstract class com/facebook/react/views/text/ReactTextAnchorViewManager : public fun setAccessible (Lcom/facebook/react/views/text/ReactTextView;Z)V public fun setAdjustFontSizeToFit (Lcom/facebook/react/views/text/ReactTextView;Z)V public fun setAndroidHyphenationFrequency (Lcom/facebook/react/views/text/ReactTextView;Ljava/lang/String;)V - public fun setBackgroundColor (Landroid/view/View;I)V public fun setBorderColor (Lcom/facebook/react/views/text/ReactTextView;ILjava/lang/Integer;)V public fun setBorderRadius (Lcom/facebook/react/views/text/ReactTextView;IF)V public fun setBorderStyle (Lcom/facebook/react/views/text/ReactTextView;Ljava/lang/String;)V @@ -8136,8 +8129,6 @@ public class com/facebook/react/views/textinput/ReactTextInputManager : com/face public fun setAutoCapitalize (Lcom/facebook/react/views/textinput/ReactEditText;Lcom/facebook/react/bridge/Dynamic;)V public fun setAutoCorrect (Lcom/facebook/react/views/textinput/ReactEditText;Ljava/lang/Boolean;)V public fun setAutoFocus (Lcom/facebook/react/views/textinput/ReactEditText;Z)V - public synthetic fun setBackgroundColor (Landroid/view/View;I)V - public fun setBackgroundColor (Lcom/facebook/react/views/textinput/ReactEditText;I)V public fun setBorderColor (Lcom/facebook/react/views/textinput/ReactEditText;ILjava/lang/Integer;)V public fun setBorderRadius (Lcom/facebook/react/views/textinput/ReactEditText;IF)V public fun setBorderStyle (Lcom/facebook/react/views/textinput/ReactEditText;Ljava/lang/String;)V @@ -8343,8 +8334,6 @@ public class com/facebook/react/views/view/ReactViewManager : com/facebook/react public fun receiveCommand (Lcom/facebook/react/views/view/ReactViewGroup;Ljava/lang/String;Lcom/facebook/react/bridge/ReadableArray;)V public fun setAccessible (Lcom/facebook/react/views/view/ReactViewGroup;Z)V public fun setBackfaceVisibility (Lcom/facebook/react/views/view/ReactViewGroup;Ljava/lang/String;)V - public synthetic fun setBackgroundColor (Landroid/view/View;I)V - public fun setBackgroundColor (Lcom/facebook/react/views/view/ReactViewGroup;I)V public fun setBackgroundImage (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V public fun setBorderColor (Lcom/facebook/react/views/view/ReactViewGroup;ILjava/lang/Integer;)V public fun setBorderRadius (Lcom/facebook/react/views/view/ReactViewGroup;IF)V diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java index e101ad960d6028..6b2d334835b44b 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java @@ -14,6 +14,7 @@ import android.view.View; import android.view.ViewParent; import android.view.accessibility.AccessibilityEvent; +import androidx.annotation.ColorInt; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.core.view.ViewCompat; @@ -195,8 +196,8 @@ public void onLayoutChange( name = ViewProps.BACKGROUND_COLOR, defaultInt = Color.TRANSPARENT, customType = "Color") - public void setBackgroundColor(@NonNull T view, int backgroundColor) { - view.setBackgroundColor(backgroundColor); + public void setBackgroundColor(@NonNull T view, @ColorInt int backgroundColor) { + BackgroundStyleApplicator.setBackgroundColor(view, backgroundColor); } @Override diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageManager.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageManager.kt index 0a93ec043fcf31..b6e5a7bbcfc74d 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageManager.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageManager.kt @@ -9,7 +9,6 @@ package com.facebook.react.views.image import android.graphics.Color import android.graphics.PorterDuff -import androidx.annotation.ColorInt import com.facebook.common.logging.FLog import com.facebook.drawee.backends.pipeline.Fresco import com.facebook.drawee.controller.AbstractDraweeControllerBuilder @@ -237,13 +236,6 @@ public constructor( BackgroundStyleApplicator.setBoxShadow(view, shadows) } - public override fun setBackgroundColor( - view: ReactImageView, - @ColorInt backgroundColor: Int - ): Unit { - BackgroundStyleApplicator.setBackgroundColor(view, backgroundColor) - } - public override fun getExportedCustomDirectEventTypeConstants(): MutableMap = (super.getExportedCustomDirectEventTypeConstants() ?: mutableMapOf()).apply { put( diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java index 1828ff0eac5225..759c7c88168bc9 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java @@ -9,7 +9,6 @@ import android.graphics.Color; import android.view.View; -import androidx.annotation.ColorInt; import androidx.annotation.Nullable; import androidx.core.view.ViewCompat; import com.facebook.infer.annotation.Nullsafe; @@ -366,9 +365,4 @@ public void setHorizontal(ReactHorizontalScrollView view, boolean horizontal) { public void setBoxShadow(ReactHorizontalScrollView view, @Nullable ReadableArray shadows) { BackgroundStyleApplicator.setBoxShadow(view, shadows); } - - @Override - public void setBackgroundColor(ReactHorizontalScrollView view, @ColorInt int backgroundColor) { - BackgroundStyleApplicator.setBackgroundColor(view, backgroundColor); - } } diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java index 8ed2e47d8a396a..6823251974f5df 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java @@ -9,7 +9,6 @@ import android.graphics.Color; import android.view.View; -import androidx.annotation.ColorInt; import androidx.annotation.Nullable; import androidx.core.view.ViewCompat; import com.facebook.infer.annotation.Nullsafe; @@ -348,11 +347,6 @@ public void setBoxShadow(ReactScrollView view, @Nullable ReadableArray shadows) BackgroundStyleApplicator.setBoxShadow(view, shadows); } - @Override - public void setBackgroundColor(ReactScrollView view, @ColorInt int backgroundColor) { - BackgroundStyleApplicator.setBackgroundColor(view, backgroundColor); - } - @Override public @Nullable Object updateState( ReactScrollView view, ReactStylesDiffMap props, StateWrapper stateWrapper) { diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java index cd8759120e564a..730af692e62e66 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java @@ -13,7 +13,6 @@ import android.text.util.Linkify; import android.view.Gravity; import android.view.View; -import androidx.annotation.ColorInt; import androidx.annotation.Nullable; import com.facebook.common.logging.FLog; import com.facebook.react.bridge.ReadableArray; @@ -237,9 +236,4 @@ public void setNotifyOnInlineViewLayout(ReactTextView view, boolean notifyOnInli public void setBoxShadow(ReactTextView view, @Nullable ReadableArray shadows) { BackgroundStyleApplicator.setBoxShadow(view, shadows); } - - @Override - public void setBackgroundColor(T view, @ColorInt int backgroundColor) { - BackgroundStyleApplicator.setBackgroundColor(view, backgroundColor); - } } diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java index 953a89772c2aad..d3f462be077b1c 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java @@ -29,7 +29,6 @@ import android.view.ViewGroup; import android.view.inputmethod.EditorInfo; import android.widget.TextView; -import androidx.annotation.ColorInt; import androidx.annotation.Nullable; import androidx.autofill.HintConstants; import androidx.core.content.ContextCompat; @@ -1035,11 +1034,6 @@ public void setBoxShadow(ReactEditText view, @Nullable ReadableArray shadows) { BackgroundStyleApplicator.setBoxShadow(view, shadows); } - @Override - public void setBackgroundColor(ReactEditText view, @ColorInt int backgroundColor) { - BackgroundStyleApplicator.setBackgroundColor(view, backgroundColor); - } - @Override protected void onAfterUpdateTransaction(ReactEditText view) { super.onAfterUpdateTransaction(view); diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java index 6db5ca3f869aab..f811115c5d338d 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java @@ -10,7 +10,6 @@ import android.graphics.Rect; import android.graphics.drawable.Drawable; import android.view.View; -import androidx.annotation.ColorInt; import androidx.annotation.Nullable; import com.facebook.common.logging.FLog; import com.facebook.infer.annotation.Nullsafe; @@ -356,11 +355,6 @@ public void setBoxShadow(ReactViewGroup view, @Nullable ReadableArray shadows) { BackgroundStyleApplicator.setBoxShadow(view, shadows); } - @Override - public void setBackgroundColor(ReactViewGroup view, @ColorInt int backgroundColor) { - BackgroundStyleApplicator.setBackgroundColor(view, backgroundColor); - } - @Override public String getName() { return REACT_CLASS; diff --git a/packages/react-native/ReactAndroid/src/test/java/com/facebook/react/uimanager/SimpleViewPropertyTest.kt b/packages/react-native/ReactAndroid/src/test/java/com/facebook/react/uimanager/SimpleViewPropertyTest.kt index 1925242f8310d0..749e523a84699e 100644 --- a/packages/react-native/ReactAndroid/src/test/java/com/facebook/react/uimanager/SimpleViewPropertyTest.kt +++ b/packages/react-native/ReactAndroid/src/test/java/com/facebook/react/uimanager/SimpleViewPropertyTest.kt @@ -7,7 +7,6 @@ package com.facebook.react.uimanager -import android.graphics.drawable.ColorDrawable import android.view.View import com.facebook.react.bridge.BridgeReactContext import com.facebook.react.bridge.CatalystInstance @@ -74,17 +73,6 @@ class SimpleViewPropertyTest { Assertions.assertThat(view.alpha).isEqualTo(1.0f) } - @Test - fun testBackgroundColor() { - val view = manager.createView(viewTag, themedContext, buildStyles(), null, JSResponderHandler()) - manager.updateProperties(view, buildStyles()) - Assertions.assertThat(view.background).isEqualTo(null) - manager.updateProperties(view, buildStyles("backgroundColor", 12)) - Assertions.assertThat((view.background as ColorDrawable).color).isEqualTo(12) - manager.updateProperties(view, buildStyles("backgroundColor", null)) - Assertions.assertThat((view.background as ColorDrawable).color).isEqualTo(0) - } - @Test fun testGetNativeProps() { val nativeProps = manager.nativeProps