react-native-tvos 0.75.4-0 → 0.76.0-0

package/ReactAndroid/src/main/java/com/facebook/react/views/progressbar/ReactProgressBarViewManager.kt

@@ -0,0 +1,165 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.progressbar
+
+import android.content.Context
+import android.util.Pair
+import android.view.View
+import android.widget.ProgressBar
+import com.facebook.common.logging.FLog
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.common.ReactConstants
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.BaseViewManager
+import com.facebook.react.uimanager.PixelUtil.toDIPFromPixel
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.ViewProps
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.AndroidProgressBarManagerDelegate
+import com.facebook.react.viewmanagers.AndroidProgressBarManagerInterface
+import com.facebook.yoga.YogaMeasureMode
+import com.facebook.yoga.YogaMeasureOutput
+import java.util.WeakHashMap
+
+/**
+ * Manages instances of [ProgressBar]. [ProgressBar] is wrapped in a [ProgressBarContainerView]
+ * because the style of the [ProgressBar] can only be set in the constructor, whenever the style of
+ * a [ProgressBar] changes, we have to drop the existing [ProgressBar] (if there is one) and create
+ * a new one with the style given.
+ */
+@ReactModule(name = ReactProgressBarViewManager.REACT_CLASS)
+public class ReactProgressBarViewManager :
+    BaseViewManager<ProgressBarContainerView, ProgressBarShadowNode>(),
+    AndroidProgressBarManagerInterface<ProgressBarContainerView> {
+  private val measuredStyles = WeakHashMap<Int, Pair<Int, Int>>()
+
+  private val delegate: ViewManagerDelegate<ProgressBarContainerView> =
+      AndroidProgressBarManagerDelegate(this)
+
+  public override fun getName(): String = REACT_CLASS
+
+  protected override fun createViewInstance(context: ThemedReactContext): ProgressBarContainerView {
+    return ProgressBarContainerView(context)
+  }
+
+  @ReactProp(name = PROP_STYLE)
+  public override fun setStyleAttr(view: ProgressBarContainerView, styleName: String?) {
+    view.setStyle(styleName)
+  }
+
+  @ReactProp(name = ViewProps.COLOR, customType = "Color")
+  public override fun setColor(view: ProgressBarContainerView, color: Int?) {
+    view.color = color
+  }
+
+  @ReactProp(name = PROP_INDETERMINATE)
+  public override fun setIndeterminate(view: ProgressBarContainerView, indeterminate: Boolean) {
+    view.indeterminate = indeterminate
+  }
+
+  @ReactProp(name = PROP_PROGRESS)
+  public override fun setProgress(view: ProgressBarContainerView, progress: Double) {
+    view.progress = progress
+  }
+
+  @ReactProp(name = PROP_ANIMATING)
+  public override fun setAnimating(view: ProgressBarContainerView, animating: Boolean) {
+    view.animating = animating
+  }
+
+  public override fun setTestID(view: ProgressBarContainerView, value: String?) {
+    super.setTestId(view, value)
+  }
+
+  @ReactProp(name = PROP_ATTR)
+  public override fun setTypeAttr(view: ProgressBarContainerView, value: String?): Unit = Unit
+
+  public override fun createShadowNodeInstance(): ProgressBarShadowNode = ProgressBarShadowNode()
+
+  public override fun getShadowNodeClass(): Class<ProgressBarShadowNode> =
+      ProgressBarShadowNode::class.java
+
+  public override fun updateExtraData(root: ProgressBarContainerView, extraData: Any) {
+    // do nothing
+  }
+
+  protected override fun onAfterUpdateTransaction(view: ProgressBarContainerView) {
+    view.apply()
+  }
+
+  protected override fun getDelegate(): ViewManagerDelegate<ProgressBarContainerView> = delegate
+
+  public override fun measure(
+      context: Context,
+      localData: ReadableMap,
+      props: ReadableMap,
+      state: ReadableMap,
+      width: Float,
+      widthMode: YogaMeasureMode,
+      height: Float,
+      heightMode: YogaMeasureMode,
+      attachmentsPositions: FloatArray?
+  ): Long {
+    val style = getStyleFromString(props.getString(PROP_STYLE))
+    val value =
+        measuredStyles.getOrPut(style) {
+          val progressBar = createProgressBar(context, style)
+          val spec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
+          progressBar.measure(spec, spec)
+          Pair.create(progressBar.measuredWidth, progressBar.measuredHeight)
+        }
+
+    return YogaMeasureOutput.make(
+        toDIPFromPixel(value.first.toFloat()), toDIPFromPixel(value.second.toFloat()))
+  }
+
+  public companion object {
+    public const val REACT_CLASS: String = "AndroidProgressBar"
+
+    internal const val PROP_STYLE: String = "styleAttr"
+    internal const val PROP_ATTR: String = "typeAttr"
+    internal const val PROP_INDETERMINATE: String = "indeterminate"
+    internal const val PROP_PROGRESS: String = "progress"
+    internal const val PROP_ANIMATING: String = "animating"
+    internal const val DEFAULT_STYLE: String = "Normal"
+
+    private val progressBarCtorLock = Any()
+
+    /**
+     * We create ProgressBars on both the UI and shadow threads. There is a race condition in the
+     * ProgressBar constructor that may cause crashes when two ProgressBars are constructed at the
+     * same time on two different threads. This static ctor wrapper protects against that.
+     */
+    public fun createProgressBar(context: Context?, style: Int): ProgressBar {
+      synchronized(progressBarCtorLock) {
+        return ProgressBar(context, null, style)
+      }
+    }
+
+    internal fun getStyleFromString(styleStr: String?): Int {
+      when (styleStr) {
+        null -> {
+          FLog.w(ReactConstants.TAG, "ProgressBar needs to have a style, null received")
+          return android.R.attr.progressBarStyle
+        }
+        "Horizontal" -> return android.R.attr.progressBarStyleHorizontal
+        "Small" -> return android.R.attr.progressBarStyleSmall
+        "Large" -> return android.R.attr.progressBarStyleLarge
+        "Inverse" -> return android.R.attr.progressBarStyleInverse
+        "SmallInverse" -> return android.R.attr.progressBarStyleSmallInverse
+        "LargeInverse" -> return android.R.attr.progressBarStyleLargeInverse
+        "Normal" -> return android.R.attr.progressBarStyle
+        else -> {
+          FLog.w(ReactConstants.TAG, "Unknown ProgressBar style: $styleStr")
+          return android.R.attr.progressBarStyle
+        }
+      }
+    }
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/views/safeareaview/ReactSafeAreaView.kt

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.safeareaview
+
+import android.view.ViewGroup
+import androidx.annotation.UiThread
+import androidx.core.graphics.Insets
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import androidx.core.view.WindowInsetsCompat.CONSUMED
+import com.facebook.react.bridge.GuardedRunnable
+import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.uimanager.PixelUtil.pxToDp
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerModule
+
+public class ReactSafeAreaView(public val reactContext: ThemedReactContext) :
+    ViewGroup(reactContext) {
+  internal var stateWrapper: StateWrapper? = null
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+
+    ViewCompat.setOnApplyWindowInsetsListener(this) { _, windowInsets ->
+      val insets =
+          windowInsets.getInsets(
+              WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout())
+      updateState(insets)
+      CONSUMED
+    }
+    requestApplyInsets()
+  }
+
+  override fun onLayout(p0: Boolean, p1: Int, p2: Int, p3: Int, p4: Int): Unit = Unit
+
+  @UiThread
+  private fun updateState(insets: Insets) {
+    stateWrapper?.let { stateWrapper ->
+      // fabric
+      WritableNativeMap().apply {
+        putDouble("left", insets.left.toFloat().pxToDp().toDouble())
+        putDouble("top", insets.top.toFloat().pxToDp().toDouble())
+        putDouble("bottom", insets.bottom.toFloat().pxToDp().toDouble())
+        putDouble("right", insets.right.toFloat().pxToDp().toDouble())
+
+        stateWrapper.updateState(this)
+      }
+    }
+        // paper
+        ?: reactContext.runOnNativeModulesQueueThread(
+            object : GuardedRunnable(reactContext) {
+              override fun runGuarded() {
+                this@ReactSafeAreaView.reactContext.reactApplicationContext
+                    .getNativeModule(UIManagerModule::class.java)
+                    ?.updateInsetsPadding(id, insets.top, insets.left, insets.bottom, insets.right)
+              }
+            })
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/views/safeareaview/ReactSafeAreaViewManager.kt

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.safeareaview
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.LayoutShadowNode
+import com.facebook.react.uimanager.ReactStylesDiffMap
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.SafeAreaViewManagerDelegate
+import com.facebook.react.viewmanagers.SafeAreaViewManagerInterface
+
+/** View manager for [ReactSafeAreaView] components. */
+@ReactModule(name = ReactSafeAreaViewManager.REACT_CLASS)
+public class ReactSafeAreaViewManager() :
+    ViewGroupManager<ReactSafeAreaView>(), SafeAreaViewManagerInterface<ReactSafeAreaView> {
+
+  private val delegate: ViewManagerDelegate<ReactSafeAreaView> = SafeAreaViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<ReactSafeAreaView> = delegate
+
+  override fun createViewInstance(context: ThemedReactContext): ReactSafeAreaView =
+      ReactSafeAreaView(context)
+
+  override fun getName(): String = REACT_CLASS
+
+  override fun createShadowNodeInstance(): LayoutShadowNode = ReactSafeAreaViewShadowNode()
+
+  public override fun getShadowNodeClass(): Class<out LayoutShadowNode> =
+      ReactSafeAreaViewShadowNode::class.java
+
+  public override fun updateState(
+      view: ReactSafeAreaView,
+      props: ReactStylesDiffMap,
+      stateWrapper: StateWrapper
+  ): Any? {
+    view.stateWrapper = stateWrapper
+    return null
+  }
+
+  public companion object {
+    public const val REACT_CLASS: String = "RCTSafeAreaView"
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/views/safeareaview/ReactSafeAreaViewShadowNode.kt

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.safeareaview
+
+import com.facebook.react.uimanager.LayoutShadowNode
+
+internal class ReactSafeAreaViewShadowNode() : LayoutShadowNode() {}

package/ReactAndroid/src/main/java/com/facebook/react/views/scroll/OnScrollDispatchHelper.kt

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.scroll
+
+import android.os.SystemClock
+
+/**
+ * Android has a bug where onScrollChanged is called twice per frame with the same params during
+ * flings. We hack around that here by trying to detect that duplicate call and not dispatch it. See
+ * https://code.google.com/p/android/issues/detail?id=39473
+ */
+public class OnScrollDispatchHelper {
+
+  private var prevX = Int.MIN_VALUE
+  private var prevY = Int.MIN_VALUE
+  public var xFlingVelocity: Float = 0f
+    private set
+
+  public var yFlingVelocity: Float = 0f
+    private set
+
+  private var lastScrollEventTimeMs = -(MIN_EVENT_SEPARATION_MS + 1).toLong()
+
+  /**
+   * Call from a ScrollView in onScrollChanged, returns true if this onScrollChanged is legit (not a
+   * duplicate) and should be dispatched.
+   */
+  public fun onScrollChanged(x: Int, y: Int): Boolean {
+    val eventTime = SystemClock.uptimeMillis()
+    val shouldDispatch =
+        eventTime - lastScrollEventTimeMs > MIN_EVENT_SEPARATION_MS || prevX != x || prevY != y
+    if (eventTime - lastScrollEventTimeMs != 0L) {
+      xFlingVelocity = (x - prevX).toFloat() / (eventTime - lastScrollEventTimeMs)
+      yFlingVelocity = (y - prevY).toFloat() / (eventTime - lastScrollEventTimeMs)
+    }
+    lastScrollEventTimeMs = eventTime
+    prevX = x
+    prevY = y
+    return shouldDispatch
+  }
+
+  private companion object {
+    private const val MIN_EVENT_SEPARATION_MS = 10
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java

@@ -33,11 +33,17 @@ import androidx.core.view.ViewCompat;
 import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.infer.annotation.Nullsafe;
+import com.facebook.react.animated.NativeAnimatedModule;
+import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.common.ReactConstants;
 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;
@@ -45,6 +51,10 @@ 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;
 import com.facebook.react.views.scroll.ReactScrollViewHelper.HasScrollState;
@@ -88,7 +98,7 @@ public class ReactHorizontalScrollView extends HorizontalScrollView
 
   private boolean mActivelyScrolling;
   private @Nullable Rect mClippingRect;
-  private @Nullable String mOverflow = ViewProps.HIDDEN;
+  private Overflow mOverflow = Overflow.SCROLL;
   private boolean mDragging;
   private boolean mPagingEnabled = false;
   private @Nullable Runnable mPostTouchRunnable;
@@ -272,8 +282,15 @@ public class ReactHorizontalScrollView extends HorizontalScrollView
   }
 
   public void setOverflow(@Nullable String overflow) {
-    mOverflow = overflow;
+    if (overflow == null) {
+      mOverflow = Overflow.SCROLL;
+    } else {
+      @Nullable Overflow parsedOverflow = Overflow.fromString(overflow);
+      mOverflow = parsedOverflow == null ? Overflow.SCROLL : parsedOverflow;
+    }
+
     mReactBackgroundManager.setOverflow(overflow == null ? ViewProps.SCROLL : overflow);
+    invalidate();
   }
 
   public void setMaintainVisibleContentPosition(
@@ -292,7 +309,16 @@ public class ReactHorizontalScrollView extends HorizontalScrollView
 
   @Override
   public @Nullable String getOverflow() {
-    return mOverflow;
+    switch (mOverflow) {
+      case HIDDEN:
+        return "hidden";
+      case SCROLL:
+        return "scroll";
+      case VISIBLE:
+        return "visible";
+    }
+
+    return null;
   }
 
   @Override
@@ -307,7 +333,13 @@ public class ReactHorizontalScrollView extends HorizontalScrollView
 
   @Override
   public void onDraw(Canvas canvas) {
-    mReactBackgroundManager.maybeClipToPaddingBox(canvas);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      if (mOverflow != Overflow.VISIBLE) {
+        BackgroundStyleApplicator.clipToPaddingBox(this, canvas);
+      }
+    } else {
+      mReactBackgroundManager.maybeClipToPaddingBox(canvas);
+    }
     super.onDraw(canvas);
   }
 
@@ -935,6 +967,15 @@ public class ReactHorizontalScrollView extends HorizontalScrollView
                 if (mSendMomentumEvents) {
                   ReactScrollViewHelper.emitScrollMomentumEndEvent(ReactHorizontalScrollView.this);
                 }
+
+                ReactContext context = (ReactContext) getContext();
+                if (context != null) {
+                  NativeAnimatedModule nativeAnimated =
+                      context.getNativeModule(NativeAnimatedModule.class);
+                  if (nativeAnimated != null) {
+                    nativeAnimated.userDrivenScrollEnded(ReactHorizontalScrollView.this.getId());
+                  }
+                }
                 disableFpsListener();
               } else {
                 if (mPagingEnabled && !mSnappingToPage) {
@@ -1284,27 +1325,55 @@ 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, float color, float alpha) {
-    mReactBackgroundManager.setBorderColor(position, color, alpha);
+  public void setBorderColor(int position, @Nullable Integer 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(
+                  PixelUtil.toDIPFromPixel(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);
+    }
   }
 
   /**

package/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java

@@ -9,6 +9,7 @@ package com.facebook.react.views.scroll;
 
 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;
@@ -16,7 +17,11 @@ import com.facebook.react.modules.i18nmanager.I18nUtil;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.RetryableMountingLayerException;
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
 import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.BackgroundStyleApplicator;
+import com.facebook.react.uimanager.LengthPercentage;
+import com.facebook.react.uimanager.LengthPercentageType;
 import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.PointerEvents;
 import com.facebook.react.uimanager.ReactClippingViewGroupHelper;
@@ -28,7 +33,9 @@ import com.facebook.react.uimanager.ViewGroupManager;
 import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.uimanager.annotations.ReactPropGroup;
-import com.facebook.yoga.YogaConstants;
+import com.facebook.react.uimanager.style.BorderRadiusProp;
+import com.facebook.react.uimanager.style.BorderStyle;
+import com.facebook.react.uimanager.style.LogicalEdge;
 import java.util.ArrayList;
 import java.util.List;
 
@@ -85,7 +92,7 @@ public class ReactHorizontalScrollViewManager extends ViewGroupManager<ReactHori
     view.setFocusable(value);
   }
 
-  @ReactProp(name = "showsHorizontalScrollIndicator")
+  @ReactProp(name = "showsHorizontalScrollIndicator", defaultBoolean = true)
   public void setShowsHorizontalScrollIndicator(ReactHorizontalScrollView view, boolean value) {
     view.setHorizontalScrollBarEnabled(value);
   }
@@ -286,22 +293,38 @@ public class ReactHorizontalScrollViewManager extends ViewGroupManager<ReactHori
         ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
         ViewProps.BORDER_BOTTOM_LEFT_RADIUS
       },
-      defaultFloat = YogaConstants.UNDEFINED)
+      defaultFloat = Float.NaN)
   public void setBorderRadius(ReactHorizontalScrollView view, int index, float borderRadius) {
-    if (!YogaConstants.isUndefined(borderRadius)) {
-      borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
-    }
-
-    if (index == 0) {
-      view.setBorderRadius(borderRadius);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      @Nullable
+      LengthPercentage radius =
+          Float.isNaN(borderRadius)
+              ? null
+              : new LengthPercentage(borderRadius, LengthPercentageType.POINT);
+      BackgroundStyleApplicator.setBorderRadius(view, BorderRadiusProp.values()[index], radius);
     } else {
-      view.setBorderRadius(borderRadius, index - 1);
+      if (!Float.isNaN(borderRadius)) {
+        borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
+      }
+
+      if (index == 0) {
+        view.setBorderRadius(borderRadius);
+      } else {
+        view.setBorderRadius(borderRadius, index - 1);
+      }
     }
   }
 
   @ReactProp(name = "borderStyle")
   public void setBorderStyle(ReactHorizontalScrollView view, @Nullable String borderStyle) {
-    view.setBorderStyle(borderStyle);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      @Nullable
+      BorderStyle parsedBorderStyle =
+          borderStyle == null ? null : BorderStyle.fromString(borderStyle);
+      BackgroundStyleApplicator.setBorderStyle(view, parsedBorderStyle);
+    } else {
+      view.setBorderStyle(borderStyle);
+    }
   }
 
   @ReactPropGroup(
@@ -312,12 +335,16 @@ public class ReactHorizontalScrollViewManager extends ViewGroupManager<ReactHori
         ViewProps.BORDER_TOP_WIDTH,
         ViewProps.BORDER_BOTTOM_WIDTH,
       },
-      defaultFloat = YogaConstants.UNDEFINED)
+      defaultFloat = Float.NaN)
   public void setBorderWidth(ReactHorizontalScrollView view, int index, float width) {
-    if (!YogaConstants.isUndefined(width)) {
-      width = PixelUtil.toPixelFromDIP(width);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBorderWidth(view, LogicalEdge.values()[index], width);
+    } else {
+      if (!Float.isNaN(width)) {
+        width = PixelUtil.toPixelFromDIP(width);
+      }
+      view.setBorderWidth(SPACING_TYPES[index], width);
     }
-    view.setBorderWidth(SPACING_TYPES[index], width);
   }
 
   @ReactPropGroup(
@@ -329,11 +356,12 @@ public class ReactHorizontalScrollViewManager extends ViewGroupManager<ReactHori
         "borderBottomColor"
       },
       customType = "Color")
-  public void setBorderColor(ReactHorizontalScrollView view, int index, Integer color) {
-    float rgbComponent =
-        color == null ? YogaConstants.UNDEFINED : (float) ((int) color & 0x00FFFFFF);
-    float alphaComponent = color == null ? YogaConstants.UNDEFINED : (float) ((int) color >>> 24);
-    view.setBorderColor(SPACING_TYPES[index], rgbComponent, alphaComponent);
+  public void setBorderColor(ReactHorizontalScrollView view, int index, @Nullable Integer color) {
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBorderColor(view, LogicalEdge.ALL, color);
+    } else {
+      view.setBorderColor(SPACING_TYPES[index], color);
+    }
   }
 
   @ReactProp(name = "overflow")
@@ -392,4 +420,20 @@ public class ReactHorizontalScrollViewManager extends ViewGroupManager<ReactHori
   public void setHorizontal(ReactHorizontalScrollView view, boolean horizontal) {
     // Do Nothing: Align with static ViewConfigs
   }
+
+  @ReactProp(name = ViewProps.BOX_SHADOW, customType = "BoxShadow")
+  public void setBoxShadow(ReactHorizontalScrollView view, @Nullable ReadableArray shadows) {
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBoxShadow(view, shadows);
+    }
+  }
+
+  @Override
+  public void setBackgroundColor(ReactHorizontalScrollView view, @ColorInt int backgroundColor) {
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBackgroundColor(view, backgroundColor);
+    } else {
+      super.setBackgroundColor(view, backgroundColor);
+    }
+  }
 }