react-native 0.0.0-16bb2ae4f → 0.0.0-18697adec

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

@@ -25,7 +25,7 @@ import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import com.facebook.common.logging.FLog;
 import com.facebook.react.bridge.ReactNoCrashSoftException;
-import com.facebook.react.bridge.ReactSoftException;
+import com.facebook.react.bridge.ReactSoftExceptionLogger;
 import com.facebook.react.bridge.WritableArray;
 import com.facebook.react.common.build.ReactBuildConfig;
 import com.facebook.react.common.mapbuffer.ReadableMapBuffer;
@@ -61,6 +61,7 @@ public class TextLayoutManagerMapBuffer {
   public static final short PA_KEY_TEXT_BREAK_STRATEGY = 2;
   public static final short PA_KEY_ADJUST_FONT_SIZE_TO_FIT = 3;
   public static final short PA_KEY_INCLUDE_FONT_PADDING = 4;
+  public static final short PA_KEY_HYPHENATION_FREQUENCY = 5;
 
   private static final boolean ENABLE_MEASURE_LOGGING = ReactBuildConfig.DEBUG && false;
 
@@ -264,7 +265,8 @@ public class TextLayoutManagerMapBuffer {
       float width,
       YogaMeasureMode widthYogaMeasureMode,
       boolean includeFontPadding,
-      int textBreakStrategy) {
+      int textBreakStrategy,
+      int hyphenationFrequency) {
     Layout layout;
     int spanLength = text.length();
     boolean unconstrainedWidth = widthYogaMeasureMode == YogaMeasureMode.UNDEFINED || width < 0;
@@ -295,14 +297,14 @@ public class TextLayoutManagerMapBuffer {
                 .setLineSpacing(0.f, 1.f)
                 .setIncludePad(includeFontPadding)
                 .setBreakStrategy(textBreakStrategy)
-                .setHyphenationFrequency(Layout.HYPHENATION_FREQUENCY_NORMAL)
+                .setHyphenationFrequency(hyphenationFrequency)
                 .build();
       }
 
     } else if (boring != null && (unconstrainedWidth || boring.width <= width)) {
       int boringLayoutWidth = boring.width;
       if (boring.width < 0) {
-        ReactSoftException.logSoftException(
+        ReactSoftExceptionLogger.logSoftException(
             TAG, new ReactNoCrashSoftException("Text width is invalid: " + boring.width));
         boringLayoutWidth = 0;
       }
@@ -338,7 +340,7 @@ public class TextLayoutManagerMapBuffer {
                 .setLineSpacing(0.f, 1.f)
                 .setIncludePad(includeFontPadding)
                 .setBreakStrategy(textBreakStrategy)
-                .setHyphenationFrequency(Layout.HYPHENATION_FREQUENCY_NORMAL);
+                .setHyphenationFrequency(hyphenationFrequency);
 
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
           builder.setUseLineSpacingFromFallbacks(true);
@@ -391,6 +393,9 @@ public class TextLayoutManagerMapBuffer {
         paragraphAttributes.hasKey(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));
 
     if (text == null) {
       throw new IllegalStateException("Spannable element has not been prepared in onBeforeLayout");
@@ -404,7 +409,13 @@ public class TextLayoutManagerMapBuffer {
 
     Layout layout =
         createLayout(
-            text, boring, width, widthYogaMeasureMode, includeFontPadding, textBreakStrategy);
+            text,
+            boring,
+            width,
+            widthYogaMeasureMode,
+            includeFontPadding,
+            textBreakStrategy,
+            hyphenationFrequency);
 
     int maximumNumberOfLines =
         paragraphAttributes.hasKey(PA_KEY_MAX_NUMBER_OF_LINES)
@@ -514,16 +525,16 @@ public class TextLayoutManagerMapBuffer {
 
           // The attachment array returns the positions of each of the attachments as
           attachmentsPositions[attachmentPosition] =
-              PixelUtil.toSPFromPixel(placeholderTopPosition);
+              PixelUtil.toDIPFromPixel(placeholderTopPosition);
           attachmentsPositions[attachmentPosition + 1] =
-              PixelUtil.toSPFromPixel(placeholderLeftPosition);
+              PixelUtil.toDIPFromPixel(placeholderLeftPosition);
           attachmentIndex++;
         }
       }
     }
 
-    float widthInSP = PixelUtil.toSPFromPixel(calculatedWidth);
-    float heightInSP = PixelUtil.toSPFromPixel(calculatedHeight);
+    float widthInSP = PixelUtil.toDIPFromPixel(calculatedWidth);
+    float heightInSP = PixelUtil.toDIPFromPixel(calculatedHeight);
 
     if (ENABLE_MEASURE_LOGGING) {
       FLog.e(
@@ -561,10 +572,19 @@ public class TextLayoutManagerMapBuffer {
         paragraphAttributes.hasKey(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));
 
     Layout layout =
         createLayout(
-            text, boring, width, YogaMeasureMode.EXACTLY, includeFontPadding, textBreakStrategy);
+            text,
+            boring,
+            width,
+            YogaMeasureMode.EXACTLY,
+            includeFontPadding,
+            textBreakStrategy,
+            hyphenationFrequency);
     return FontMetricsUtil.getFontMetrics(text, layout, sTextPaintInstance, context);
   }
 

package/ReactAndroid/src/main/java/com/facebook/react/views/textinput/BUCK

@@ -15,6 +15,7 @@ rn_android_library(
         react_native_dep("libraries/fbcore/src/main/java/com/facebook/common/logging:logging"),
         react_native_dep("third-party/java/infer-annotations:infer-annotations"),
         react_native_dep("third-party/java/jsr-305:jsr-305"),
+        react_native_dep("third-party/android/androidx:autofill"),
         react_native_target("java/com/facebook/react/bridge:bridge"),
         react_native_target("java/com/facebook/react/common:common"),
         react_native_target("java/com/facebook/react/module/annotations:annotations"),

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

@@ -36,14 +36,14 @@ import android.view.inputmethod.InputConnection;
 import android.view.inputmethod.InputMethodManager;
 import androidx.annotation.Nullable;
 import androidx.appcompat.widget.AppCompatEditText;
-import androidx.core.view.AccessibilityDelegateCompat;
 import androidx.core.view.ViewCompat;
 import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.bridge.ReactSoftException;
+import com.facebook.react.bridge.ReactSoftExceptionLogger;
 import com.facebook.react.common.build.ReactBuildConfig;
 import com.facebook.react.uimanager.FabricViewStateManager;
+import com.facebook.react.uimanager.ReactAccessibilityDelegate;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import com.facebook.react.views.text.CustomLetterSpacingSpan;
@@ -155,7 +155,7 @@ public class ReactEditText extends AppCompatEditText
 
     ViewCompat.setAccessibilityDelegate(
         this,
-        new AccessibilityDelegateCompat() {
+        new ReactAccessibilityDelegate() {
           @Override
           public boolean performAccessibilityAction(View host, int action, Bundle args) {
             if (action == AccessibilityNodeInfo.ACTION_CLICK) {
@@ -331,10 +331,20 @@ public class ReactEditText extends AppCompatEditText
     }
 
     if (start != UNSET && end != UNSET) {
+      // clamp selection values for safety
+      start = clampToTextLength(start);
+      end = clampToTextLength(end);
+
       setSelection(start, end);
     }
   }
 
+  private int clampToTextLength(int value) {
+    int textLength = getText() == null ? 0 : getText().length();
+
+    return Math.max(0, Math.min(value, textLength));
+  }
+
   @Override
   public void setSelection(int start, int end) {
     if (DEBUG_MODE) {
@@ -1025,7 +1035,7 @@ public class ReactEditText extends AppCompatEditText
       try {
         sb.append(currentText.subSequence(0, currentText.length()));
       } catch (IndexOutOfBoundsException e) {
-        ReactSoftException.logSoftException(TAG, e);
+        ReactSoftExceptionLogger.logSoftException(TAG, e);
       }
     }
 

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

@@ -131,10 +131,13 @@ class ReactEditTextInputConnectionWrapper extends InputConnectionWrapper {
   @Override
   public boolean sendKeyEvent(KeyEvent event) {
     if (event.getAction() == KeyEvent.ACTION_DOWN) {
+      boolean isNumberKey = event.getUnicodeChar() < 58 && event.getUnicodeChar() > 47;
       if (event.getKeyCode() == KeyEvent.KEYCODE_DEL) {
         dispatchKeyEvent(BACKSPACE_KEY_VALUE);
       } else if (event.getKeyCode() == KeyEvent.KEYCODE_ENTER) {
         dispatchKeyEvent(ENTER_KEY_VALUE);
+      } else if (isNumberKey) {
+        dispatchKeyEvent(String.valueOf(event.getNumber()));
       }
     }
     return super.sendKeyEvent(event);

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

@@ -30,13 +30,14 @@ import android.view.inputmethod.EditorInfo;
 import android.widget.EditText;
 import android.widget.TextView;
 import androidx.annotation.Nullable;
+import androidx.autofill.HintConstants;
 import androidx.core.content.ContextCompat;
 import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
 import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.bridge.ReactSoftException;
+import com.facebook.react.bridge.ReactSoftExceptionLogger;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.ReadableNativeMap;
@@ -72,6 +73,7 @@ import com.facebook.react.views.text.TextLayoutManager;
 import com.facebook.react.views.text.TextTransform;
 import com.facebook.yoga.YogaConstants;
 import java.lang.reflect.Field;
+import java.util.HashMap;
 import java.util.LinkedList;
 import java.util.Map;
 
@@ -84,6 +86,51 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
   private static final int[] SPACING_TYPES = {
     Spacing.ALL, Spacing.LEFT, Spacing.RIGHT, Spacing.TOP, Spacing.BOTTOM,
   };
+  private static final Map<String, String> REACT_PROPS_AUTOFILL_HINTS_MAP =
+      new HashMap<String, String>() {
+        {
+          put("birthdate-day", HintConstants.AUTOFILL_HINT_BIRTH_DATE_DAY);
+          put("birthdate-full", HintConstants.AUTOFILL_HINT_BIRTH_DATE_FULL);
+          put("birthdate-month", HintConstants.AUTOFILL_HINT_BIRTH_DATE_MONTH);
+          put("birthdate-year", HintConstants.AUTOFILL_HINT_BIRTH_DATE_YEAR);
+          put("cc-csc", HintConstants.AUTOFILL_HINT_CREDIT_CARD_SECURITY_CODE);
+          put("cc-exp", HintConstants.AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_DATE);
+          put("cc-exp-day", HintConstants.AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_DAY);
+          put("cc-exp-month", HintConstants.AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_MONTH);
+          put("cc-exp-year", HintConstants.AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_YEAR);
+          put("cc-number", HintConstants.AUTOFILL_HINT_CREDIT_CARD_NUMBER);
+          put("email", HintConstants.AUTOFILL_HINT_EMAIL_ADDRESS);
+          put("gender", HintConstants.AUTOFILL_HINT_GENDER);
+          put("name", HintConstants.AUTOFILL_HINT_PERSON_NAME);
+          put("name-family", HintConstants.AUTOFILL_HINT_PERSON_NAME_FAMILY);
+          put("name-given", HintConstants.AUTOFILL_HINT_PERSON_NAME_GIVEN);
+          put("name-middle", HintConstants.AUTOFILL_HINT_PERSON_NAME_MIDDLE);
+          put("name-middle-initial", HintConstants.AUTOFILL_HINT_PERSON_NAME_MIDDLE_INITIAL);
+          put("name-prefix", HintConstants.AUTOFILL_HINT_PERSON_NAME_PREFIX);
+          put("name-suffix", HintConstants.AUTOFILL_HINT_PERSON_NAME_SUFFIX);
+          put("password", HintConstants.AUTOFILL_HINT_PASSWORD);
+          put("password-new", HintConstants.AUTOFILL_HINT_NEW_PASSWORD);
+          put("postal-address", HintConstants.AUTOFILL_HINT_POSTAL_ADDRESS);
+          put("postal-address-country", HintConstants.AUTOFILL_HINT_POSTAL_ADDRESS_COUNTRY);
+          put(
+              "postal-address-extended",
+              HintConstants.AUTOFILL_HINT_POSTAL_ADDRESS_EXTENDED_ADDRESS);
+          put(
+              "postal-address-extended-postal-code",
+              HintConstants.AUTOFILL_HINT_POSTAL_ADDRESS_EXTENDED_POSTAL_CODE);
+          put("postal-address-locality", HintConstants.AUTOFILL_HINT_POSTAL_ADDRESS_LOCALITY);
+          put("postal-address-region", HintConstants.AUTOFILL_HINT_POSTAL_ADDRESS_REGION);
+          put("postal-code", HintConstants.AUTOFILL_HINT_POSTAL_CODE);
+          put("street-address", HintConstants.AUTOFILL_HINT_POSTAL_ADDRESS_STREET_ADDRESS);
+          put("sms-otp", HintConstants.AUTOFILL_HINT_SMS_OTP);
+          put("tel", HintConstants.AUTOFILL_HINT_PHONE_NUMBER);
+          put("tel-country-code", HintConstants.AUTOFILL_HINT_PHONE_COUNTRY_CODE);
+          put("tel-national", HintConstants.AUTOFILL_HINT_PHONE_NATIONAL);
+          put("tel-device", HintConstants.AUTOFILL_HINT_PHONE_NUMBER_DEVICE);
+          put("username", HintConstants.AUTOFILL_HINT_USERNAME);
+          put("username-new", HintConstants.AUTOFILL_HINT_NEW_USERNAME);
+        }
+      };
 
   private static final int FOCUS_TEXT_INPUT = 1;
   private static final int BLUR_TEXT_INPUT = 2;
@@ -111,6 +158,15 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
   private static final String KEYBOARD_TYPE_URI = "url";
   private static final InputFilter[] EMPTY_FILTERS = new InputFilter[0];
   private static final int UNSET = -1;
+  private static final String[] DRAWABLE_FIELDS = {
+    "mCursorDrawable", "mSelectHandleLeft", "mSelectHandleRight", "mSelectHandleCenter"
+  };
+  private static final String[] DRAWABLE_RESOURCES = {
+    "mCursorDrawableRes",
+    "mTextSelectHandleLeftRes",
+    "mTextSelectHandleRightRes",
+    "mTextSelectHandleRes"
+  };
 
   protected @Nullable ReactTextViewManagerCallback mReactTextViewManagerCallback;
 
@@ -281,9 +337,22 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
         Spannable spannable = update.getText();
         TextInlineImageSpan.possiblyUpdateInlineImageSpans(spannable, view);
       }
+
+      // Ensure that selection is handled correctly on text update
+      boolean isCurrentSelectionEmpty = view.getSelectionStart() == view.getSelectionEnd();
+      int selectionStart = update.getSelectionStart();
+      int selectionEnd = update.getSelectionEnd();
+      if ((selectionStart == UNSET || selectionEnd == UNSET) && isCurrentSelectionEmpty) {
+        // if selection is not set by state, shift current selection to ensure constant gap to
+        // text end
+        int textLength = view.getText() == null ? 0 : view.getText().length();
+        int selectionOffset = textLength - view.getSelectionStart();
+        selectionStart = update.getText().length() - selectionOffset;
+        selectionEnd = selectionStart;
+      }
+
       view.maybeSetTextFromState(update);
-      view.maybeSetSelection(
-          update.getJsEventCounter(), update.getSelectionStart(), update.getSelectionEnd());
+      view.maybeSetSelection(update.getJsEventCounter(), selectionStart, selectionEnd);
     }
   }
 
@@ -399,7 +468,7 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
   }
 
   @ReactProp(name = "placeholder")
-  public void setPlaceholder(ReactEditText view, @Nullable String placeholder) {
+  public void setPlaceholder(ReactEditText view, String placeholder) {
     view.setHint(placeholder);
   }
 
@@ -447,34 +516,40 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
     }
 
     // The evil code that follows uses reflection to achieve this on Android 8.1 and below.
-    // Based on
-    // http://stackoverflow.com/questions/25996032/how-to-change-programatically-edittext-cursor-color-in-android.
-    try {
-      // Get the original cursor drawable resource.
-      Field cursorDrawableResField = TextView.class.getDeclaredField("mCursorDrawableRes");
-      cursorDrawableResField.setAccessible(true);
-      int drawableResId = cursorDrawableResField.getInt(view);
-
-      // The view has no cursor drawable.
-      if (drawableResId == 0) {
-        return;
-      }
+    // Based on https://tinyurl.com/3vff8lyu https://tinyurl.com/vehggzs9
+    for (int i = 0; i < DRAWABLE_RESOURCES.length; i++) {
+      try {
+        Field drawableResourceField = TextView.class.getDeclaredField(DRAWABLE_RESOURCES[i]);
+        drawableResourceField.setAccessible(true);
+        int resourceId = drawableResourceField.getInt(view);
 
-      Drawable drawable = ContextCompat.getDrawable(view.getContext(), drawableResId);
-      drawable.setColorFilter(color, PorterDuff.Mode.SRC_IN);
-      Drawable[] drawables = {drawable, drawable};
-
-      // Update the current cursor drawable with the new one.
-      Field editorField = TextView.class.getDeclaredField("mEditor");
-      editorField.setAccessible(true);
-      Object editor = editorField.get(view);
-      Field cursorDrawableField = editor.getClass().getDeclaredField("mCursorDrawable");
-      cursorDrawableField.setAccessible(true);
-      cursorDrawableField.set(editor, drawables);
-    } catch (NoSuchFieldException ex) {
-      // Ignore errors to avoid crashing if these private fields don't exist on modified
-      // or future android versions.
-    } catch (IllegalAccessException ex) {
+        // The view has no cursor drawable.
+        if (resourceId == 0) {
+          return;
+        }
+
+        Drawable drawable = ContextCompat.getDrawable(view.getContext(), resourceId);
+
+        Drawable drawableCopy = drawable.mutate();
+        drawableCopy.setColorFilter(color, PorterDuff.Mode.SRC_IN);
+
+        Field editorField = TextView.class.getDeclaredField("mEditor");
+        editorField.setAccessible(true);
+        Object editor = editorField.get(view);
+
+        Field cursorDrawableField = editor.getClass().getDeclaredField(DRAWABLE_FIELDS[i]);
+        cursorDrawableField.setAccessible(true);
+        if (DRAWABLE_RESOURCES[i] == "mCursorDrawableRes") {
+          Drawable[] drawables = {drawableCopy, drawableCopy};
+          cursorDrawableField.set(editor, drawables);
+        } else {
+          cursorDrawableField.set(editor, drawableCopy);
+        }
+      } catch (NoSuchFieldException ex) {
+        // Ignore errors to avoid crashing if these private fields don't exist on modified
+        // or future android versions.
+      } catch (IllegalAccessException ex) {
+      }
     }
   }
 
@@ -518,7 +593,7 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
         view.setTextColor(defaultContextTextColor);
       } else {
         Context c = view.getContext();
-        ReactSoftException.logSoftException(
+        ReactSoftExceptionLogger.logSoftException(
             TAG,
             new IllegalStateException(
                 "Could not get default text color from View Context: "
@@ -655,39 +730,16 @@ public class ReactTextInputManager extends BaseViewManager<ReactEditText, Layout
     view.setFilters(newFilters);
   }
 
-  @ReactProp(name = "autoCompleteType")
-  public void setTextContentType(ReactEditText view, @Nullable String autoCompleteType) {
-    if (autoCompleteType == null) {
+  @ReactProp(name = "autoComplete")
+  public void setTextContentType(ReactEditText view, @Nullable String autoComplete) {
+    if (autoComplete == null) {
       setImportantForAutofill(view, View.IMPORTANT_FOR_AUTOFILL_NO);
-    } else if ("username".equals(autoCompleteType)) {
-      setAutofillHints(view, View.AUTOFILL_HINT_USERNAME);
-    } else if ("password".equals(autoCompleteType)) {
-      setAutofillHints(view, View.AUTOFILL_HINT_PASSWORD);
-    } else if ("email".equals(autoCompleteType)) {
-      setAutofillHints(view, View.AUTOFILL_HINT_EMAIL_ADDRESS);
-    } else if ("name".equals(autoCompleteType)) {
-      setAutofillHints(view, View.AUTOFILL_HINT_NAME);
-    } else if ("tel".equals(autoCompleteType)) {
-      setAutofillHints(view, View.AUTOFILL_HINT_PHONE);
-    } else if ("street-address".equals(autoCompleteType)) {
-      setAutofillHints(view, View.AUTOFILL_HINT_POSTAL_ADDRESS);
-    } else if ("postal-code".equals(autoCompleteType)) {
-      setAutofillHints(view, View.AUTOFILL_HINT_POSTAL_CODE);
-    } else if ("cc-number".equals(autoCompleteType)) {
-      setAutofillHints(view, View.AUTOFILL_HINT_CREDIT_CARD_NUMBER);
-    } else if ("cc-csc".equals(autoCompleteType)) {
-      setAutofillHints(view, View.AUTOFILL_HINT_CREDIT_CARD_SECURITY_CODE);
-    } else if ("cc-exp".equals(autoCompleteType)) {
-      setAutofillHints(view, View.AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_DATE);
-    } else if ("cc-exp-month".equals(autoCompleteType)) {
-      setAutofillHints(view, View.AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_MONTH);
-    } else if ("cc-exp-year".equals(autoCompleteType)) {
-      setAutofillHints(view, View.AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_YEAR);
-    } else if ("off".equals(autoCompleteType)) {
+    } else if ("off".equals(autoComplete)) {
       setImportantForAutofill(view, View.IMPORTANT_FOR_AUTOFILL_NO);
+    } else if (REACT_PROPS_AUTOFILL_HINTS_MAP.containsKey(autoComplete)) {
+      setAutofillHints(view, REACT_PROPS_AUTOFILL_HINTS_MAP.get(autoComplete));
     } else {
-      throw new JSApplicationIllegalArgumentException(
-          "Invalid autoCompleteType: " + autoCompleteType);
+      throw new JSApplicationIllegalArgumentException("Invalid autoComplete: " + autoComplete);
     }
   }
 

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

@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) Facebook, Inc. and its 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 java.lang.reflect.InvocationTargetException;
+import java.lang.reflect.Method;
+import javax.annotation.Nullable;
+
+/**
+ * Copied from <a
+ * href="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">
+ * Compose canvas utils </a>
+ */
+public class CanvasUtil {
+  private CanvasUtil() {}
+
+  private @Nullable static Method mReorderBarrierMethod = null;
+  private @Nullable static Method mInorderBarrierMethod = null;
+  private static boolean mOrderMethodsFetched = 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"})
+  public static void enableZ(Canvas canvas, boolean enable) {
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
+      return;
+    }
+
+    if (Build.VERSION.SDK_INT >= 29) {
+      if (enable) {
+        canvas.enableZ();
+      } else {
+        canvas.disableZ();
+      }
+    } else {
+      fetchOrderMethods();
+      try {
+        if (enable && mReorderBarrierMethod != null) {
+          mReorderBarrierMethod.invoke(canvas);
+        }
+        if (!enable && mInorderBarrierMethod != null) {
+          mInorderBarrierMethod.invoke(canvas);
+        }
+      } catch (IllegalAccessException | InvocationTargetException ignore) {
+        // Do nothing
+      }
+    }
+  }
+
+  private static void fetchOrderMethods() {
+    if (!mOrderMethodsFetched) {
+      try {
+        if (Build.VERSION.SDK_INT == Build.VERSION_CODES.P) {
+          // use double reflection to avoid grey list on P
+          Method getDeclaredMethod =
+              Class.class.getDeclaredMethod("getDeclaredMethod", String.class, Class[].class);
+          mReorderBarrierMethod =
+              (Method) getDeclaredMethod.invoke(Canvas.class, "insertReorderBarrier", new Class[0]);
+          mInorderBarrierMethod =
+              (Method) getDeclaredMethod.invoke(Canvas.class, "insertInorderBarrier", new Class[0]);
+        } else {
+          mReorderBarrierMethod = Canvas.class.getDeclaredMethod("insertReorderBarrier");
+          mInorderBarrierMethod = Canvas.class.getDeclaredMethod("insertInorderBarrier");
+        }
+
+        if (mReorderBarrierMethod == null || mInorderBarrierMethod == null) {
+          return;
+        }
+
+        mReorderBarrierMethod.setAccessible(true);
+        mInorderBarrierMethod.setAccessible(true);
+      } catch (IllegalAccessException ignore) {
+        // Do nothing
+      } catch (InvocationTargetException ignore) {
+        // Do nothing
+      } catch (NoSuchMethodException ignore) {
+        // Do nothing
+      }
+      mOrderMethodsFetched = true;
+    }
+  }
+}

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

@@ -89,6 +89,7 @@ public class ReactViewBackgroundDrawable extends Drawable {
   private @Nullable Path mOuterClipPathForBorderRadius;
   private @Nullable Path mPathForBorderRadiusOutline;
   private @Nullable Path mPathForBorder;
+  private Path mPathForSingleBorder = new Path();
   private @Nullable Path mCenterDrawPath;
   private @Nullable RectF mInnerClipTempRectForBorderRadius;
   private @Nullable RectF mOuterClipTempRectForBorderRadius;
@@ -968,6 +969,14 @@ public class ReactViewBackgroundDrawable extends Drawable {
     mPaint.setPathEffect(mPathEffectForBorderStyle);
   }
 
+  private void updatePathEffect(int borderWidth) {
+    PathEffect pathEffectForBorderStyle = null;
+    if (mBorderStyle != null) {
+      pathEffectForBorderStyle = BorderStyle.getPathEffect(mBorderStyle, borderWidth);
+    }
+    mPaint.setPathEffect(pathEffectForBorderStyle);
+  }
+
   /** For rounded borders we use default "borderWidth" property. */
   public float getFullBorderWidth() {
     return (mBorderWidth != null && !YogaConstants.isUndefined(mBorderWidth.getRaw(Spacing.ALL)))
@@ -1083,6 +1092,7 @@ public class ReactViewBackgroundDrawable extends Drawable {
               colorTop,
               colorRight,
               colorBottom);
+
       if (fastBorderColor != 0) {
         if (Color.alpha(fastBorderColor) != 0) {
           // Border color is not transparent.
@@ -1090,21 +1100,42 @@ public class ReactViewBackgroundDrawable extends Drawable {
           int bottom = bounds.bottom;
 
           mPaint.setColor(fastBorderColor);
+          mPaint.setStyle(Paint.Style.STROKE);
           if (borderLeft > 0) {
-            int leftInset = left + borderLeft;
-            canvas.drawRect(left, top, leftInset, bottom - borderBottom, mPaint);
+            mPathForSingleBorder.reset();
+            int width = Math.round(borderWidth.left);
+            updatePathEffect(width);
+            mPaint.setStrokeWidth(width);
+            mPathForSingleBorder.moveTo(left, top - borderWidth.top / 2);
+            mPathForSingleBorder.lineTo(left, bottom + borderWidth.bottom / 2);
+            canvas.drawPath(mPathForSingleBorder, mPaint);
           }
           if (borderTop > 0) {
-            int topInset = top + borderTop;
-            canvas.drawRect(left + borderLeft, top, right, topInset, mPaint);
+            mPathForSingleBorder.reset();
+            int width = Math.round(borderWidth.top);
+            updatePathEffect(width);
+            mPaint.setStrokeWidth(width);
+            mPathForSingleBorder.moveTo(left, top);
+            mPathForSingleBorder.lineTo(right, top);
+            canvas.drawPath(mPathForSingleBorder, mPaint);
           }
           if (borderRight > 0) {
-            int rightInset = right - borderRight;
-            canvas.drawRect(rightInset, top + borderTop, right, bottom, mPaint);
+            mPathForSingleBorder.reset();
+            int width = Math.round(borderWidth.right);
+            updatePathEffect(width);
+            mPaint.setStrokeWidth(width);
+            mPathForSingleBorder.moveTo(right, top - borderWidth.top / 2);
+            mPathForSingleBorder.lineTo(right, bottom + borderWidth.bottom / 2);
+            canvas.drawPath(mPathForSingleBorder, mPaint);
           }
           if (borderBottom > 0) {
-            int bottomInset = bottom - borderBottom;
-            canvas.drawRect(left, bottomInset, right - borderRight, bottom, mPaint);
+            mPathForSingleBorder.reset();
+            int width = Math.round(borderWidth.bottom);
+            updatePathEffect(width);
+            mPaint.setStrokeWidth(width);
+            mPathForSingleBorder.moveTo(left, bottom);
+            mPathForSingleBorder.lineTo(right, bottom);
+            canvas.drawPath(mPathForSingleBorder, mPaint);
           }
         }
       } else {