From 5d1a3bd07be5f356fc72d05a5bae5af2b9329575 Mon Sep 17 00:00:00 2001 From: Nick Gerleman Date: Wed, 31 Jul 2024 23:49:48 -0700 Subject: [PATCH] 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 --- .../react/views/image/ReactImageView.kt | 30 ++++++++++--- .../scroll/ReactHorizontalScrollView.java | 45 ++++++++++++++++--- .../react/views/scroll/ReactScrollView.java | 44 +++++++++++++++--- 3 files changed, 102 insertions(+), 17 deletions(-) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.kt index bebfdb37baf..4af4776d593 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.kt +++ b/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) { diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java index cd05d9970aa..3f377598db7 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java +++ b/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); + } } /** diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java index bca1e6a4907..3873389a3cc 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java +++ b/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); + } } /**