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); + } } /**