Use BackgroundStyleApplicator in View setters (#45834)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45834

These are very rarely called, outside of directly by the view manager, but they are still public, so we should make these work off the same composite drawable as the view managers (eventually BasrViewManager).

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D60495100

fbshipit-source-id: 90f51870dd9929d1f3657d8f5368ef46216c8544

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.kt

@@ -55,9 +55,13 @@ import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags.useNewRe
 import com.facebook.react.modules.fresco.ReactNetworkImageRequest
 import com.facebook.react.uimanager.BackgroundStyleApplicator
 import com.facebook.react.uimanager.FloatUtil.floatsEqual
+import com.facebook.react.uimanager.LengthPercentage
+import com.facebook.react.uimanager.LengthPercentageType
 import com.facebook.react.uimanager.PixelUtil.toPixelFromDIP
 import com.facebook.react.uimanager.Spacing
 import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.style.BorderRadiusProp
+import com.facebook.react.uimanager.style.LogicalEdge
 import com.facebook.react.util.RNLog
 import com.facebook.react.views.image.ImageLoadEvent.Companion.createErrorEvent
 import com.facebook.react.views.image.ImageLoadEvent.Companion.createLoadEndEvent
@@ -208,7 +212,9 @@ public class ReactImageView(
   }
 
   public override fun setBackgroundColor(backgroundColor: Int) {
-    if (useNewReactImageViewBackgroundDrawing()) {
+    if (enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBackgroundColor(this, backgroundColor)
+    } else if (useNewReactImageViewBackgroundDrawing()) {
       reactBackgroundManager.backgroundColor = backgroundColor
     } else if (this.backgroundColor != backgroundColor) {
       this.backgroundColor = backgroundColor
@@ -218,7 +224,9 @@ public class ReactImageView(
   }
 
   public fun setBorderColor(borderColor: Int) {
-    if (useNewReactImageViewBackgroundDrawing()) {
+    if (enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBorderColor(this, LogicalEdge.ALL, borderColor)
+    } else if (useNewReactImageViewBackgroundDrawing()) {
       reactBackgroundManager.setBorderColor(Spacing.ALL, borderColor)
     } else if (this.borderColor != borderColor) {
       this.borderColor = borderColor
@@ -235,7 +243,9 @@ public class ReactImageView(
 
   public fun setBorderWidth(borderWidth: Float) {
     val newBorderWidth = toPixelFromDIP(borderWidth)
-    if (useNewReactImageViewBackgroundDrawing()) {
+    if (enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBorderWidth(this, LogicalEdge.ALL, borderWidth)
+    } else if (useNewReactImageViewBackgroundDrawing()) {
       reactBackgroundManager.setBorderWidth(Spacing.ALL, newBorderWidth)
     } else if (!floatsEqual(this.borderWidth, newBorderWidth)) {
       this.borderWidth = newBorderWidth
@@ -244,7 +254,12 @@ public class ReactImageView(
   }
 
   public fun setBorderRadius(borderRadius: Float) {
-    if (useNewReactImageViewBackgroundDrawing()) {
+    if (enableBackgroundStyleApplicator()) {
+      val radius =
+          if (borderRadius.isNaN()) null
+          else LengthPercentage(borderRadius, LengthPercentageType.POINT)
+      BackgroundStyleApplicator.setBorderRadius(this, BorderRadiusProp.BORDER_RADIUS, radius)
+    } else if (useNewReactImageViewBackgroundDrawing()) {
       reactBackgroundManager.setBorderRadius(borderRadius)
     } else if (!floatsEqual(this.borderRadius, borderRadius)) {
       this.borderRadius = borderRadius
@@ -253,7 +268,12 @@ public class ReactImageView(
   }
 
   public fun setBorderRadius(borderRadius: Float, position: Int) {
-    if (useNewReactImageViewBackgroundDrawing()) {
+    if (enableBackgroundStyleApplicator()) {
+      val radius =
+          if (borderRadius.isNaN()) null
+          else LengthPercentage(borderRadius, LengthPercentageType.POINT)
+      BackgroundStyleApplicator.setBorderRadius(this, BorderRadiusProp.values()[position], radius)
+    } else if (useNewReactImageViewBackgroundDrawing()) {
       reactBackgroundManager.setBorderRadius(borderRadius, position + 1)
     } else {
       if (borderCornerRadii == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java

@@ -40,7 +40,10 @@ import com.facebook.react.common.build.ReactBuildConfig;
 import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
 import com.facebook.react.modules.i18nmanager.I18nUtil;
 import com.facebook.react.uimanager.BackgroundStyleApplicator;
+import com.facebook.react.uimanager.LengthPercentage;
+import com.facebook.react.uimanager.LengthPercentageType;
 import com.facebook.react.uimanager.MeasureSpecAssertions;
+import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.PointerEvents;
 import com.facebook.react.uimanager.ReactClippingViewGroup;
 import com.facebook.react.uimanager.ReactClippingViewGroupHelper;
@@ -48,6 +51,9 @@ import com.facebook.react.uimanager.ReactOverflowViewWithInset;
 import com.facebook.react.uimanager.StateWrapper;
 import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.events.NativeGestureUtil;
+import com.facebook.react.uimanager.style.BorderRadiusProp;
+import com.facebook.react.uimanager.style.BorderStyle;
+import com.facebook.react.uimanager.style.LogicalEdge;
 import com.facebook.react.uimanager.style.Overflow;
 import com.facebook.react.views.scroll.ReactScrollViewHelper.HasFlingAnimator;
 import com.facebook.react.views.scroll.ReactScrollViewHelper.HasScrollEventThrottle;
@@ -1304,27 +1310,54 @@ public class ReactHorizontalScrollView extends HorizontalScrollView
 
   @Override
   public void setBackgroundColor(int color) {
-    mReactBackgroundManager.setBackgroundColor(color);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBackgroundColor(this, color);
+    } else {
+      mReactBackgroundManager.setBackgroundColor(color);
+    }
   }
 
   public void setBorderWidth(int position, float width) {
-    mReactBackgroundManager.setBorderWidth(position, width);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBorderWidth(
+          this, LogicalEdge.values()[position], PixelUtil.toDIPFromPixel(width));
+    } else {
+      mReactBackgroundManager.setBorderWidth(position, width);
+    }
   }
 
   public void setBorderColor(int position, @Nullable Integer color) {
-    mReactBackgroundManager.setBorderColor(position, color);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBorderColor(this, LogicalEdge.values()[position], color);
+    } else {
+      mReactBackgroundManager.setBorderColor(position, color);
+    }
   }
 
   public void setBorderRadius(float borderRadius) {
-    mReactBackgroundManager.setBorderRadius(borderRadius);
+    setBorderRadius(borderRadius, BorderRadiusProp.BORDER_RADIUS.ordinal());
   }
 
   public void setBorderRadius(float borderRadius, int position) {
-    mReactBackgroundManager.setBorderRadius(borderRadius, position);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      @Nullable
+      LengthPercentage radius =
+          Float.isNaN(borderRadius)
+              ? null
+              : new LengthPercentage(borderRadius, LengthPercentageType.POINT);
+      BackgroundStyleApplicator.setBorderRadius(this, BorderRadiusProp.values()[position], radius);
+    } else {
+      mReactBackgroundManager.setBorderRadius(borderRadius, position);
+    }
   }
 
   public void setBorderStyle(@Nullable String style) {
-    mReactBackgroundManager.setBorderStyle(style);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBorderStyle(
+          this, style == null ? null : BorderStyle.fromString(style));
+    } else {
+      mReactBackgroundManager.setBorderStyle(style);
+    }
   }
 
   /**

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java

@@ -41,6 +41,8 @@ import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.common.ReactConstants;
 import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
 import com.facebook.react.uimanager.BackgroundStyleApplicator;
+import com.facebook.react.uimanager.LengthPercentage;
+import com.facebook.react.uimanager.LengthPercentageType;
 import com.facebook.react.uimanager.MeasureSpecAssertions;
 import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.PointerEvents;
@@ -50,6 +52,9 @@ import com.facebook.react.uimanager.ReactOverflowViewWithInset;
 import com.facebook.react.uimanager.StateWrapper;
 import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.events.NativeGestureUtil;
+import com.facebook.react.uimanager.style.BorderRadiusProp;
+import com.facebook.react.uimanager.style.BorderStyle;
+import com.facebook.react.uimanager.style.LogicalEdge;
 import com.facebook.react.uimanager.style.Overflow;
 import com.facebook.react.views.scroll.ReactScrollViewHelper.HasFlingAnimator;
 import com.facebook.react.views.scroll.ReactScrollViewHelper.HasScrollEventThrottle;
@@ -1237,27 +1242,54 @@ public class ReactScrollView extends ScrollView
 
   @Override
   public void setBackgroundColor(int color) {
-    mReactBackgroundManager.setBackgroundColor(color);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBackgroundColor(this, color);
+    } else {
+      mReactBackgroundManager.setBackgroundColor(color);
+    }
   }
 
   public void setBorderWidth(int position, float width) {
-    mReactBackgroundManager.setBorderWidth(position, width);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBorderWidth(
+          this, LogicalEdge.values()[position], PixelUtil.toDIPFromPixel(width));
+    } else {
+      mReactBackgroundManager.setBorderWidth(position, width);
+    }
   }
 
   public void setBorderColor(int position, @Nullable Integer color) {
-    mReactBackgroundManager.setBorderColor(position, color);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBorderColor(this, LogicalEdge.values()[position], color);
+    } else {
+      mReactBackgroundManager.setBorderColor(position, color);
+    }
   }
 
   public void setBorderRadius(float borderRadius) {
-    mReactBackgroundManager.setBorderRadius(borderRadius);
+    setBorderRadius(borderRadius, BorderRadiusProp.BORDER_RADIUS.ordinal());
   }
 
   public void setBorderRadius(float borderRadius, int position) {
-    mReactBackgroundManager.setBorderRadius(borderRadius, position);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      @Nullable
+      LengthPercentage radius =
+          Float.isNaN(borderRadius)
+              ? null
+              : new LengthPercentage(borderRadius, LengthPercentageType.POINT);
+      BackgroundStyleApplicator.setBorderRadius(this, BorderRadiusProp.values()[position], radius);
+    } else {
+      mReactBackgroundManager.setBorderRadius(borderRadius, position);
+    }
   }
 
   public void setBorderStyle(@Nullable String style) {
-    mReactBackgroundManager.setBorderStyle(style);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBorderStyle(
+          this, style == null ? null : BorderStyle.fromString(style));
+    } else {
+      mReactBackgroundManager.setBorderStyle(style);
+    }
   }
 
   /**