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

package/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManager.java

@@ -40,6 +40,7 @@ import com.facebook.react.views.text.internal.span.ReactAbsoluteSizeSpan;
 import com.facebook.react.views.text.internal.span.ReactBackgroundColorSpan;
 import com.facebook.react.views.text.internal.span.ReactClickableSpan;
 import com.facebook.react.views.text.internal.span.ReactForegroundColorSpan;
+import com.facebook.react.views.text.internal.span.ReactOpacitySpan;
 import com.facebook.react.views.text.internal.span.ReactStrikethroughSpan;
 import com.facebook.react.views.text.internal.span.ReactTagSpan;
 import com.facebook.react.views.text.internal.span.ReactUnderlineSpan;
@@ -240,6 +241,10 @@ public class TextLayoutManager {
               new SetSpanOperation(
                   start, end, new ReactBackgroundColorSpan(textAttributes.mBackgroundColor)));
         }
+        if (!Float.isNaN(textAttributes.getOpacity())) {
+          ops.add(
+              new SetSpanOperation(start, end, new ReactOpacitySpan(textAttributes.getOpacity())));
+        }
         if (!Float.isNaN(textAttributes.getLetterSpacing())) {
           ops.add(
               new SetSpanOperation(
@@ -422,6 +427,69 @@ public class TextLayoutManager {
     return layout;
   }
 
+  public static Layout createLayout(
+      @NonNull Context context,
+      MapBuffer attributedString,
+      MapBuffer paragraphAttributes,
+      float width,
+      float height,
+      ReactTextViewManagerCallback reactTextViewManagerCallback) {
+    Spannable text =
+        getOrCreateSpannableForText(context, attributedString, reactTextViewManagerCallback);
+    BoringLayout.Metrics boring = BoringLayout.isBoring(text, sTextPaintInstance);
+
+    int textBreakStrategy =
+        TextAttributeProps.getTextBreakStrategy(
+            paragraphAttributes.getString(PA_KEY_TEXT_BREAK_STRATEGY));
+    boolean includeFontPadding =
+        paragraphAttributes.contains(PA_KEY_INCLUDE_FONT_PADDING)
+            ? paragraphAttributes.getBoolean(PA_KEY_INCLUDE_FONT_PADDING)
+            : DEFAULT_INCLUDE_FONT_PADDING;
+    int hyphenationFrequency =
+        TextAttributeProps.getHyphenationFrequency(
+            paragraphAttributes.getString(PA_KEY_HYPHENATION_FREQUENCY));
+    boolean adjustFontSizeToFit =
+        paragraphAttributes.contains(PA_KEY_ADJUST_FONT_SIZE_TO_FIT)
+            ? paragraphAttributes.getBoolean(PA_KEY_ADJUST_FONT_SIZE_TO_FIT)
+            : DEFAULT_ADJUST_FONT_SIZE_TO_FIT;
+    int maximumNumberOfLines =
+        paragraphAttributes.contains(PA_KEY_MAX_NUMBER_OF_LINES)
+            ? paragraphAttributes.getInt(PA_KEY_MAX_NUMBER_OF_LINES)
+            : ReactConstants.UNSET;
+
+    Layout.Alignment alignment = getTextAlignment(attributedString, text);
+
+    if (adjustFontSizeToFit) {
+      double minimumFontSize =
+          paragraphAttributes.contains(PA_KEY_MINIMUM_FONT_SIZE)
+              ? paragraphAttributes.getDouble(PA_KEY_MINIMUM_FONT_SIZE)
+              : Double.NaN;
+
+      adjustSpannableFontToFit(
+          text,
+          width,
+          YogaMeasureMode.EXACTLY,
+          height,
+          YogaMeasureMode.UNDEFINED,
+          minimumFontSize,
+          maximumNumberOfLines,
+          includeFontPadding,
+          textBreakStrategy,
+          hyphenationFrequency,
+          alignment);
+    }
+
+    return createLayout(
+        text,
+        boring,
+        width,
+        YogaMeasureMode.EXACTLY,
+        includeFontPadding,
+        textBreakStrategy,
+        hyphenationFrequency,
+        alignment);
+  }
+
   public static void adjustSpannableFontToFit(
       Spannable text,
       float width,
@@ -505,66 +573,25 @@ public class TextLayoutManager {
       @Nullable float[] attachmentsPositions) {
 
     // TODO(5578671): Handle text direction (see View#getTextDirectionHeuristic)
-    Spannable text =
-        getOrCreateSpannableForText(context, attributedString, reactTextViewManagerCallback);
+    Layout layout =
+        createLayout(
+            context,
+            attributedString,
+            paragraphAttributes,
+            width,
+            height,
+            reactTextViewManagerCallback);
+    Spannable text = (Spannable) layout.getText();
 
     if (text == null) {
       return 0;
     }
 
-    int textBreakStrategy =
-        TextAttributeProps.getTextBreakStrategy(
-            paragraphAttributes.getString(PA_KEY_TEXT_BREAK_STRATEGY));
-    boolean includeFontPadding =
-        paragraphAttributes.contains(PA_KEY_INCLUDE_FONT_PADDING)
-            ? paragraphAttributes.getBoolean(PA_KEY_INCLUDE_FONT_PADDING)
-            : DEFAULT_INCLUDE_FONT_PADDING;
-    int hyphenationFrequency =
-        TextAttributeProps.getHyphenationFrequency(
-            paragraphAttributes.getString(PA_KEY_HYPHENATION_FREQUENCY));
-    boolean adjustFontSizeToFit =
-        paragraphAttributes.contains(PA_KEY_ADJUST_FONT_SIZE_TO_FIT)
-            ? paragraphAttributes.getBoolean(PA_KEY_ADJUST_FONT_SIZE_TO_FIT)
-            : DEFAULT_ADJUST_FONT_SIZE_TO_FIT;
     int maximumNumberOfLines =
         paragraphAttributes.contains(PA_KEY_MAX_NUMBER_OF_LINES)
             ? paragraphAttributes.getInt(PA_KEY_MAX_NUMBER_OF_LINES)
             : ReactConstants.UNSET;
 
-    Layout.Alignment alignment = getTextAlignment(attributedString, text);
-
-    if (adjustFontSizeToFit) {
-      double minimumFontSize =
-          paragraphAttributes.contains(PA_KEY_MINIMUM_FONT_SIZE)
-              ? paragraphAttributes.getDouble(PA_KEY_MINIMUM_FONT_SIZE)
-              : Double.NaN;
-
-      adjustSpannableFontToFit(
-          text,
-          width,
-          widthYogaMeasureMode,
-          height,
-          heightYogaMeasureMode,
-          minimumFontSize,
-          maximumNumberOfLines,
-          includeFontPadding,
-          textBreakStrategy,
-          hyphenationFrequency,
-          alignment);
-    }
-
-    BoringLayout.Metrics boring = BoringLayout.isBoring(text, sTextPaintInstance);
-    Layout layout =
-        createLayout(
-            text,
-            boring,
-            width,
-            widthYogaMeasureMode,
-            includeFontPadding,
-            textBreakStrategy,
-            hyphenationFrequency,
-            alignment);
-
     int calculatedLineCount =
         maximumNumberOfLines == ReactConstants.UNSET || maximumNumberOfLines == 0
             ? layout.getLineCount()
@@ -718,60 +745,8 @@ public class TextLayoutManager {
       float width,
       float height) {
 
-    Spannable text = getOrCreateSpannableForText(context, attributedString, null);
-    BoringLayout.Metrics boring = BoringLayout.isBoring(text, sTextPaintInstance);
-
-    int textBreakStrategy =
-        TextAttributeProps.getTextBreakStrategy(
-            paragraphAttributes.getString(PA_KEY_TEXT_BREAK_STRATEGY));
-    boolean includeFontPadding =
-        paragraphAttributes.contains(PA_KEY_INCLUDE_FONT_PADDING)
-            ? paragraphAttributes.getBoolean(PA_KEY_INCLUDE_FONT_PADDING)
-            : DEFAULT_INCLUDE_FONT_PADDING;
-    int hyphenationFrequency =
-        TextAttributeProps.getTextBreakStrategy(
-            paragraphAttributes.getString(PA_KEY_HYPHENATION_FREQUENCY));
-    boolean adjustFontSizeToFit =
-        paragraphAttributes.contains(PA_KEY_ADJUST_FONT_SIZE_TO_FIT)
-            ? paragraphAttributes.getBoolean(PA_KEY_ADJUST_FONT_SIZE_TO_FIT)
-            : DEFAULT_ADJUST_FONT_SIZE_TO_FIT;
-    int maximumNumberOfLines =
-        paragraphAttributes.contains(PA_KEY_MAX_NUMBER_OF_LINES)
-            ? paragraphAttributes.getInt(PA_KEY_MAX_NUMBER_OF_LINES)
-            : ReactConstants.UNSET;
-
-    Layout.Alignment alignment = getTextAlignment(attributedString, text);
-
-    if (adjustFontSizeToFit) {
-      double minimumFontSize =
-          paragraphAttributes.contains(PA_KEY_MINIMUM_FONT_SIZE)
-              ? paragraphAttributes.getDouble(PA_KEY_MINIMUM_FONT_SIZE)
-              : Double.NaN;
-
-      adjustSpannableFontToFit(
-          text,
-          width,
-          YogaMeasureMode.EXACTLY,
-          height,
-          YogaMeasureMode.UNDEFINED,
-          minimumFontSize,
-          maximumNumberOfLines,
-          includeFontPadding,
-          textBreakStrategy,
-          hyphenationFrequency,
-          alignment);
-    }
-
     Layout layout =
-        createLayout(
-            text,
-            boring,
-            width,
-            YogaMeasureMode.EXACTLY,
-            includeFontPadding,
-            textBreakStrategy,
-            hyphenationFrequency,
-            alignment);
-    return FontMetricsUtil.getFontMetrics(text, layout, sTextPaintInstance, context);
+        createLayout(context, attributedString, paragraphAttributes, width, height, null);
+    return FontMetricsUtil.getFontMetrics(layout.getText(), layout, sTextPaintInstance, context);
   }
 }

package/ReactAndroid/src/main/java/com/facebook/react/views/text/internal/span/ReactOpacitySpan.kt

@@ -0,0 +1,33 @@
+/*
+ * 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.text.internal.span
+
+import android.graphics.Color
+import android.text.TextPaint
+import android.text.style.CharacterStyle
+import android.text.style.UpdateAppearance
+import kotlin.math.roundToInt
+
+/** Multiplies foreground and background alpha channels by given opacity */
+public class ReactOpacitySpan(public val opacity: Float) :
+    CharacterStyle(), UpdateAppearance, ReactSpan {
+
+  override fun updateDrawState(paint: TextPaint) {
+    paint.alpha = (Color.alpha(paint.color) * opacity).roundToInt()
+
+    if (paint.bgColor != 0) {
+      paint.bgColor =
+          Color.argb(
+              (Color.alpha(paint.bgColor) * opacity).roundToInt(),
+              Color.red(paint.bgColor),
+              Color.green(paint.bgColor),
+              Color.blue(paint.bgColor),
+          )
+    }
+  }
+}

package/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

@@ -54,10 +54,19 @@ import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactSoftExceptionLogger;
 import com.facebook.react.common.ReactConstants;
 import com.facebook.react.common.build.ReactBuildConfig;
+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.PixelUtil;
 import com.facebook.react.uimanager.ReactAccessibilityDelegate;
 import com.facebook.react.uimanager.StateWrapper;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.events.EventDispatcher;
+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.text.ReactTextUpdate;
 import com.facebook.react.views.text.ReactTypefaceUtils;
 import com.facebook.react.views.text.TextAttributes;
@@ -125,7 +134,9 @@ public class ReactEditText extends AppCompatEditText {
   private boolean mAutoFocus = false;
   private boolean mContextMenuHidden = false;
   private boolean mDidAttachToWindow = false;
+  private boolean mSelectTextOnFocus = false;
   private @Nullable String mPlaceholder = null;
+  private Overflow mOverflow = Overflow.VISIBLE;
 
   private final ReactViewBackgroundManager mReactBackgroundManager;
 
@@ -262,6 +273,12 @@ public class ReactEditText extends AppCompatEditText {
   @Override
   protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
     onContentSizeChange();
+    if (mSelectTextOnFocus && isFocused()) {
+      // Explicitly call this method to select text when layout is drawn
+      selectAll();
+      // Prevent text on being selected for next layout pass
+      mSelectTextOnFocus = false;
+    }
   }
 
   @Override
@@ -1131,31 +1148,66 @@ public class ReactEditText extends AppCompatEditText {
 
   @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 int getBorderColor(int position) {
-    return mReactBackgroundManager.getBorderColor(position);
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      @Nullable
+      Integer borderColor =
+          BackgroundStyleApplicator.getBorderColor(this, LogicalEdge.values()[position]);
+      return borderColor == null ? Color.TRANSPARENT : borderColor;
+    } else {
+      return mReactBackgroundManager.getBorderColor(position);
+    }
   }
 
   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);
+    }
   }
 
   public void setLetterSpacingPt(float letterSpacingPt) {
@@ -1186,6 +1238,11 @@ public class ReactEditText extends AppCompatEditText {
     mAutoFocus = autoFocus;
   }
 
+  public void setSelectTextOnFocus(boolean selectTextOnFocus) {
+    super.setSelectAllOnFocus(selectTextOnFocus);
+    mSelectTextOnFocus = selectTextOnFocus;
+  }
+
   public void setContextMenuHidden(boolean contextMenuHidden) {
     mContextMenuHidden = contextMenuHidden;
   }
@@ -1297,12 +1354,27 @@ public class ReactEditText extends AppCompatEditText {
   }
 
   public void setOverflow(@Nullable String overflow) {
+    if (overflow == null) {
+      mOverflow = Overflow.VISIBLE;
+    } else {
+      @Nullable Overflow parsedOverflow = Overflow.fromString(overflow);
+      mOverflow = parsedOverflow == null ? Overflow.VISIBLE : parsedOverflow;
+    }
+
     mReactBackgroundManager.setOverflow(overflow);
+    invalidate();
   }
 
   @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);
   }
 

package/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

@@ -29,6 +29,7 @@ import android.view.View;
 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;
@@ -44,9 +45,13 @@ import com.facebook.react.bridge.WritableNativeMap;
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.common.ReactConstants;
 import com.facebook.react.common.mapbuffer.MapBuffer;
+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.BaseViewManager;
 import com.facebook.react.uimanager.LayoutShadowNode;
+import com.facebook.react.uimanager.LengthPercentage;
+import com.facebook.react.uimanager.LengthPercentageType;
 import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.ReactStylesDiffMap;
 import com.facebook.react.uimanager.Spacing;
@@ -58,6 +63,9 @@ import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.uimanager.annotations.ReactPropGroup;
 import com.facebook.react.uimanager.events.EventDispatcher;
+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.views.imagehelper.ResourceDrawableIdHelper;
 import com.facebook.react.views.scroll.ScrollEvent;
 import com.facebook.react.views.scroll.ScrollEventType;
@@ -70,7 +78,6 @@ import com.facebook.react.views.text.TextAttributeProps;
 import com.facebook.react.views.text.TextLayoutManager;
 import com.facebook.react.views.text.TextTransform;
 import com.facebook.react.views.text.internal.span.TextInlineImageSpan;
-import com.facebook.yoga.YogaConstants;
 import java.lang.reflect.Field;
 import java.util.HashMap;
 import java.util.LinkedList;
@@ -656,7 +663,7 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
 
   @ReactProp(name = "selectTextOnFocus", defaultBoolean = false)
   public void setSelectTextOnFocus(ReactEditText view, boolean selectTextOnFocus) {
-    view.setSelectAllOnFocus(selectTextOnFocus);
+    view.setSelectTextOnFocus(selectTextOnFocus);
   }
 
   @ReactProp(name = ViewProps.COLOR, customType = "Color")
@@ -702,16 +709,7 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
     if (underlineColor == null) {
       drawableToMutate.clearColorFilter();
     } else {
-      // fixes underlineColor transparent not working on API 21
-      // re-sets the TextInput underlineColor https://bit.ly/3M4alr6
-      if (Build.VERSION.SDK_INT == Build.VERSION_CODES.LOLLIPOP) {
-        int bottomBorderColor = view.getBorderColor(Spacing.BOTTOM);
-        setBorderColor(view, Spacing.START, underlineColor);
-        drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
-        setBorderColor(view, Spacing.START, bottomBorderColor);
-      } else {
-        drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
-      }
+      drawableToMutate.setColorFilter(underlineColor, PorterDuff.Mode.SRC_IN);
     }
   }
 
@@ -957,22 +955,38 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
         ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
         ViewProps.BORDER_BOTTOM_LEFT_RADIUS
       },
-      defaultFloat = YogaConstants.UNDEFINED)
+      defaultFloat = Float.NaN)
   public void setBorderRadius(ReactEditText 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(ReactEditText 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);
+    }
   }
 
   @ReactProp(name = "showSoftInputOnFocus", defaultBoolean = true)
@@ -1007,12 +1021,16 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
         ViewProps.BORDER_TOP_WIDTH,
         ViewProps.BORDER_BOTTOM_WIDTH,
       },
-      defaultFloat = YogaConstants.UNDEFINED)
+      defaultFloat = Float.NaN)
   public void setBorderWidth(ReactEditText 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(
@@ -1024,11 +1042,13 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
         "borderBottomColor"
       },
       customType = "Color")
-  public void setBorderColor(ReactEditText 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(ReactEditText 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")
@@ -1036,6 +1056,22 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
     view.setOverflow(overflow);
   }
 
+  @ReactProp(name = ViewProps.BOX_SHADOW, customType = "BoxShadow")
+  public void setBoxShadow(ReactEditText view, @Nullable ReadableArray shadows) {
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBoxShadow(view, shadows);
+    }
+  }
+
+  @Override
+  public void setBackgroundColor(ReactEditText view, @ColorInt int backgroundColor) {
+    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
+      BackgroundStyleApplicator.setBackgroundColor(view, backgroundColor);
+    } else {
+      super.setBackgroundColor(view, backgroundColor);
+    }
+  }
+
   @Override
   protected void onAfterUpdateTransaction(ReactEditText view) {
     super.onAfterUpdateTransaction(view);

package/ReactAndroid/src/main/java/com/facebook/react/views/view/CanvasUtil.kt

@@ -0,0 +1,95 @@
+/*
+ * 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.view
+
+import android.annotation.SuppressLint
+import android.graphics.Canvas
+import android.os.Build
+import android.os.Build.VERSION
+import android.os.Build.VERSION.SDK_INT
+import android.os.Build.VERSION_CODES
+import android.os.Build.VERSION_CODES.P
+import android.os.Build.VERSION_CODES.Q
+import java.lang.reflect.InvocationTargetException
+import java.lang.reflect.Method
+
+/**
+ * Copied from
+ * [ Compose canvas utils ](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ui/ui-graphics/src/androidMain/kotlin/androidx/compose/ui/graphics/CanvasUtils.android.kt;drc=3b2dde134afab8d58b9c39ad4820eaf9a6e014a9)
+ */
+internal object CanvasUtil {
+  private var reorderBarrierMethod: Method? = null
+  private var inorderBarrierMethod: Method? = null
+  private var orderMethodsFetched = false
+
+  /**
+   * Enables Z support for the Canvas. The method is publicly available starting from API 29 and was
+   * hidden before, so we have to resort to reflection tricks to ensure we can use this API.
+   */
+  @SuppressLint("SoonBlockedPrivateApi", "PrivateApi")
+  @JvmStatic
+  fun enableZ(canvas: Canvas, enable: Boolean) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+      if (enable) {
+        canvas.enableZ()
+      } else {
+        canvas.disableZ()
+      }
+    } else {
+      fetchOrderMethods()
+      try {
+        if (enable && reorderBarrierMethod != null) {
+          checkNotNull(reorderBarrierMethod).invoke(canvas)
+        }
+        if (!enable && inorderBarrierMethod != null) {
+          checkNotNull(inorderBarrierMethod).invoke(canvas)
+        }
+      } catch (ignore: IllegalAccessException) {
+        // Do nothing
+      } catch (ignore: InvocationTargetException) {
+        // Do nothing
+      }
+    }
+  }
+
+  private fun fetchOrderMethods() {
+    if (!orderMethodsFetched) {
+      try {
+        if (Build.VERSION.SDK_INT == Build.VERSION_CODES.P) {
+          // use double reflection to avoid grey list on P
+          val getDeclaredMethod =
+              Class::class
+                  .java
+                  .getDeclaredMethod(
+                      "getDeclaredMethod", String::class.java, Array<Any>::class.java)
+          reorderBarrierMethod =
+              getDeclaredMethod.invoke(
+                  Canvas::class.java, "insertReorderBarrier", arrayOfNulls<Class<*>>(0)) as Method
+          inorderBarrierMethod =
+              getDeclaredMethod.invoke(
+                  Canvas::class.java, "insertInorderBarrier", arrayOfNulls<Class<*>>(0)) as Method
+        } else {
+          reorderBarrierMethod = Canvas::class.java.getDeclaredMethod("insertReorderBarrier")
+          inorderBarrierMethod = Canvas::class.java.getDeclaredMethod("insertInorderBarrier")
+        }
+        if (reorderBarrierMethod == null || inorderBarrierMethod == null) {
+          return
+        }
+        reorderBarrierMethod?.isAccessible = true
+        inorderBarrierMethod?.isAccessible = true
+      } catch (ignore: IllegalAccessException) {
+        // Do nothing
+      } catch (ignore: InvocationTargetException) {
+        // Do nothing
+      } catch (ignore: NoSuchMethodException) {
+        // Do nothing
+      }
+      orderMethodsFetched = true
+    }
+  }
+}