react-native-tvos 0.74.5-0 → 0.75.2-0

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

@@ -26,11 +26,9 @@ import android.view.ViewGroup;
 import android.view.ViewParent;
 import android.view.ViewStructure;
 import android.view.animation.Animation;
-import android.widget.Toast;
 
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
-
 import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.bridge.ReactContext;
@@ -44,6 +42,7 @@ import com.facebook.react.touch.OnInterceptTouchEventListener;
 import com.facebook.react.touch.ReactHitSlopView;
 import com.facebook.react.touch.ReactInterceptingViewGroup;
 import com.facebook.react.uimanager.IllegalViewOperationException;
+import com.facebook.react.uimanager.LengthPercentage;
 import com.facebook.react.uimanager.MeasureSpecAssertions;
 import com.facebook.react.uimanager.PointerEvents;
 import com.facebook.react.uimanager.ReactClippingProhibitedView;
@@ -58,7 +57,9 @@ import com.facebook.react.uimanager.ViewGroupDrawingOrderHelper;
 import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.common.UIManagerType;
 import com.facebook.react.uimanager.common.ViewUtil;
-import com.facebook.yoga.YogaConstants;
+import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable;
+import com.facebook.react.uimanager.style.BorderRadiusProp;
+import com.facebook.react.uimanager.style.ComputedBorderRadius;
 
 import java.lang.ref.WeakReference;
 import java.util.ArrayList;
@@ -68,12 +69,12 @@ import java.util.ArrayList;
  * initializes most of the storage needed for them.
  */
 public class ReactViewGroup extends ViewGroup
-  implements ReactInterceptingViewGroup,
-  ReactClippingViewGroup,
-  ReactPointerEventsView,
-  ReactHitSlopView,
-  ReactZIndexedViewGroup,
-  ReactOverflowViewWithInset {
+    implements ReactInterceptingViewGroup,
+        ReactClippingViewGroup,
+        ReactPointerEventsView,
+        ReactHitSlopView,
+        ReactZIndexedViewGroup,
+        ReactOverflowViewWithInset {
 
   private static final int ARRAY_CAPACITY_INCREMENT = 12;
   private static final int DEFAULT_BACKGROUND_COLOR = Color.TRANSPARENT;
@@ -81,6 +82,7 @@ public class ReactViewGroup extends ViewGroup
   private final Rect mOverflowInset = new Rect();
   /* should only be used in {@link #updateClippingToRect} */
   private static final Rect sHelperRect = new Rect();
+
   private @NonNull int[] focusDestinations = new int[0];
   private boolean autoFocus = false;
   private WeakReference<View> lastFocusedElement;
@@ -90,6 +92,7 @@ public class ReactViewGroup extends ViewGroup
   private boolean trapFocusLeft = false;
   private boolean trapFocusRight = false;
 
+
   /**
    * This listener will be set for child views when removeClippedSubview property is enabled. When
    * children layout is updated, it will call {@link #updateSubviewClipStatus} to notify parent view
@@ -108,15 +111,15 @@ public class ReactViewGroup extends ViewGroup
 
     @Override
     public void onLayoutChange(
-      View v,
-      int left,
-      int top,
-      int right,
-      int bottom,
-      int oldLeft,
-      int oldTop,
-      int oldRight,
-      int oldBottom) {
+        View v,
+        int left,
+        int top,
+        int right,
+        int bottom,
+        int oldLeft,
+        int oldTop,
+        int oldRight,
+        int oldBottom) {
       if (mParent.getRemoveClippedSubviews()) {
         mParent.updateSubviewClipStatus(v);
       }
@@ -139,12 +142,11 @@ public class ReactViewGroup extends ViewGroup
   private @Nullable String mOverflow;
   private PointerEvents mPointerEvents;
   private @Nullable ChildrenLayoutChangeListener mChildrenLayoutChangeListener;
-  private @Nullable ReactViewBackgroundDrawable mReactBackgroundDrawable;
+  private @Nullable CSSBackgroundDrawable mCSSBackgroundDrawable;
   private @Nullable OnInterceptTouchEventListener mOnInterceptTouchEventListener;
   private boolean mNeedsOffscreenAlphaCompositing;
   private @Nullable ViewGroupDrawingOrderHelper mDrawingOrderHelper;
   private @Nullable Path mPath;
-  private int mLayoutDirection;
   private float mBackfaceOpacity;
   private String mBackfaceVisibility;
 
@@ -169,12 +171,11 @@ public class ReactViewGroup extends ViewGroup
     mOverflow = null;
     mPointerEvents = PointerEvents.AUTO;
     mChildrenLayoutChangeListener = null;
-    mReactBackgroundDrawable = null;
+    mCSSBackgroundDrawable = null;
     mOnInterceptTouchEventListener = null;
     mNeedsOffscreenAlphaCompositing = false;
     mDrawingOrderHelper = null;
     mPath = null;
-    mLayoutDirection = 0; // set when background is created
     mBackfaceOpacity = 1.f;
     mBackfaceVisibility = "visible";
   }
@@ -206,7 +207,7 @@ public class ReactViewGroup extends ViewGroup
     MeasureSpecAssertions.assertExplicitMeasureSpec(widthMeasureSpec, heightMeasureSpec);
 
     setMeasuredDimension(
-      MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
+        MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
   }
 
   @Override
@@ -214,13 +215,6 @@ public class ReactViewGroup extends ViewGroup
     // No-op since UIManagerModule handles actually laying out children.
   }
 
-  @Override
-  public void onRtlPropertiesChanged(int layoutDirection) {
-    if (mReactBackgroundDrawable != null) {
-      mReactBackgroundDrawable.setResolvedLayoutDirection(mLayoutDirection);
-    }
-  }
-
   @Override
   @SuppressLint("MissingSuperCall")
   public void requestLayout() {
@@ -240,7 +234,7 @@ public class ReactViewGroup extends ViewGroup
 
   @Override
   public void setBackgroundColor(int color) {
-    if (color == Color.TRANSPARENT && mReactBackgroundDrawable == null) {
+    if (color == Color.TRANSPARENT && mCSSBackgroundDrawable == null) {
       // don't do anything, no need to allocate ReactBackgroundDrawable for transparent background
     } else {
       getOrCreateReactViewBackground().setColor(color);
@@ -250,7 +244,7 @@ public class ReactViewGroup extends ViewGroup
   @Override
   public void setBackground(Drawable drawable) {
     throw new UnsupportedOperationException(
-      "This method is not supported for ReactViewGroup instances");
+        "This method is not supported for ReactViewGroup instances");
   }
 
   public void setTranslucentBackgroundDrawable(@Nullable Drawable background) {
@@ -259,9 +253,9 @@ public class ReactViewGroup extends ViewGroup
     // as a background previously. This will not work correctly as the drawable callback logic is
     // messed up in AOSP
     updateBackgroundDrawable(null);
-    if (mReactBackgroundDrawable != null && background != null) {
+    if (mCSSBackgroundDrawable != null && background != null) {
       LayerDrawable layerDrawable =
-        new LayerDrawable(new Drawable[]{mReactBackgroundDrawable, background});
+          new LayerDrawable(new Drawable[] {mCSSBackgroundDrawable, background});
       updateBackgroundDrawable(layerDrawable);
     } else if (background != null) {
       updateBackgroundDrawable(background);
@@ -276,7 +270,7 @@ public class ReactViewGroup extends ViewGroup
   @Override
   public boolean onInterceptTouchEvent(MotionEvent ev) {
     if (mOnInterceptTouchEventListener != null
-      && mOnInterceptTouchEventListener.onInterceptTouchEvent(this, ev)) {
+        && mOnInterceptTouchEventListener.onInterceptTouchEvent(this, ev)) {
       return true;
     }
     // We intercept the touch event if the children are not supposed to receive it.
@@ -301,13 +295,13 @@ public class ReactViewGroup extends ViewGroup
   }
 
   @Override
-  public boolean dispatchGenericPointerEvent(MotionEvent ev) {
-    // We do not dispatch the pointer event if its children are not supposed to receive it
+  public boolean dispatchGenericMotionEvent(MotionEvent ev) {
+    // We do not dispatch the motion event if its children are not supposed to receive it
     if (!PointerEvents.canChildrenBeTouchTarget(mPointerEvents)) {
       return false;
     }
 
-    return super.dispatchGenericPointerEvent(ev);
+    return super.dispatchGenericMotionEvent(ev);
   }
 
   /**
@@ -319,9 +313,7 @@ public class ReactViewGroup extends ViewGroup
     return mNeedsOffscreenAlphaCompositing;
   }
 
-  /**
-   * See the documentation of needsOffscreenAlphaCompositing in View.js.
-   */
+  /** See the documentation of needsOffscreenAlphaCompositing in View.js. */
   public void setNeedsOffscreenAlphaCompositing(boolean needsOffscreenAlphaCompositing) {
     mNeedsOffscreenAlphaCompositing = needsOffscreenAlphaCompositing;
   }
@@ -334,16 +326,27 @@ public class ReactViewGroup extends ViewGroup
     getOrCreateReactViewBackground().setBorderColor(position, rgb, alpha);
   }
 
+  /**
+   * @deprecated Use {@link #setBorderRadius(BorderRadiusProp, LengthPercentage)} instead.
+   */
   public void setBorderRadius(float borderRadius) {
-    ReactViewBackgroundDrawable backgroundDrawable = getOrCreateReactViewBackground();
+    CSSBackgroundDrawable backgroundDrawable = getOrCreateReactViewBackground();
     backgroundDrawable.setRadius(borderRadius);
   }
 
+  /**
+   * @deprecated Use {@link #setBorderRadius(BorderRadiusProp, LengthPercentage)} instead.
+   */
   public void setBorderRadius(float borderRadius, int position) {
-    ReactViewBackgroundDrawable backgroundDrawable = getOrCreateReactViewBackground();
+    CSSBackgroundDrawable backgroundDrawable = getOrCreateReactViewBackground();
     backgroundDrawable.setRadius(borderRadius, position);
   }
 
+  public void setBorderRadius(BorderRadiusProp property, @Nullable LengthPercentage borderRadius) {
+    CSSBackgroundDrawable backgroundDrawable = getOrCreateReactViewBackground();
+    backgroundDrawable.setBorderRadius(property, borderRadius);
+  }
+
   public void setBorderStyle(@Nullable String style) {
     getOrCreateReactViewBackground().setBorderStyle(style);
   }
@@ -424,8 +427,8 @@ public class ReactViewGroup extends ViewGroup
     View child = Assertions.assertNotNull(mAllChildren)[idx];
     sHelperRect.set(child.getLeft(), child.getTop(), child.getRight(), child.getBottom());
     boolean intersects =
-      clippingRect.intersects(
-        sHelperRect.left, sHelperRect.top, sHelperRect.right, sHelperRect.bottom);
+        clippingRect.intersects(
+            sHelperRect.left, sHelperRect.top, sHelperRect.right, sHelperRect.bottom);
     boolean needUpdateClippingRecursive = false;
     // We never want to clip children that are being animated, as this can easily break layout :
     // when layout animation changes size and/or position of views contained inside a listview that
@@ -437,7 +440,6 @@ public class ReactViewGroup extends ViewGroup
     boolean isAnimating = animation != null && !animation.hasEnded();
     if (!intersects && child.getParent() != null && !isAnimating) {
       recoverFocus(child);
-
       // We can try saving on invalidate call here as the view that we remove is out of visible area
       // therefore invalidation is not necessary.
       removeViewsInLayout(idx - clippedSoFar, 1);
@@ -473,8 +475,8 @@ public class ReactViewGroup extends ViewGroup
     // do fast check whether intersect state changed
     sHelperRect.set(subview.getLeft(), subview.getTop(), subview.getRight(), subview.getBottom());
     boolean intersects =
-      mClippingRect.intersects(
-        sHelperRect.left, sHelperRect.top, sHelperRect.right, sHelperRect.bottom);
+        mClippingRect.intersects(
+            sHelperRect.left, sHelperRect.top, sHelperRect.right, sHelperRect.bottom);
 
     // If it was intersecting before, should be attached to the parent
     boolean oldIntersects = (subview.getParent() != null);
@@ -493,6 +495,11 @@ public class ReactViewGroup extends ViewGroup
     }
   }
 
+  @Override
+  public boolean getChildVisibleRect(View child, Rect r, android.graphics.Point offset) {
+    return super.getChildVisibleRect(child, r, offset);
+  }
+
   boolean moveFocusToFirstFocusable(ReactViewGroup viewGroup) {
     ArrayList<View> focusables = new ArrayList<View>(0);
     /**
@@ -570,11 +577,6 @@ public class ReactViewGroup extends ViewGroup
       });
   }
 
-  @Override
-  public boolean getChildVisibleRect(View child, Rect r, android.graphics.Point offset) {
-    return super.getChildVisibleRect(child, r, offset);
-  }
-
   @Override
   protected void onSizeChanged(int w, int h, int oldw, int oldh) {
     super.onSizeChanged(w, h, oldw, oldh);
@@ -595,11 +597,9 @@ public class ReactViewGroup extends ViewGroup
     if (getId() == NO_ID) {
       return false;
     }
-    if (ViewUtil.getUIManagerType(getId()) != UIManagerType.FABRIC) {
-      return false;
-    }
 
-    return !ReactNativeFeatureFlags.enableCustomDrawOrderFabric();
+    // Custom draw order is disabled for Fabric.
+    return ViewUtil.getUIManagerType(getId()) == UIManagerType.FABRIC;
   }
 
   private void handleAddView(View view) {
@@ -617,6 +617,9 @@ public class ReactViewGroup extends ViewGroup
     UiThreadUtil.assertOnUiThread();
 
     if (!customDrawOrderDisabled()) {
+      if (indexOfChild(view) == -1) {
+        return;
+      }
       getDrawingOrderHelper().handleRemoveView(view);
       setChildrenDrawingOrderEnabled(getDrawingOrderHelper().shouldEnableCustomDrawingOrder());
     } else {
@@ -737,8 +740,11 @@ public class ReactViewGroup extends ViewGroup
     return mAllChildrenCount;
   }
 
-  /*package*/ View getChildAtWithSubviewClippingEnabled(int index) {
-    return Assertions.assertNotNull(mAllChildren)[index];
+  /*package*/ @Nullable
+  View getChildAtWithSubviewClippingEnabled(int index) {
+    return index >= 0 && index < mAllChildrenCount
+        ? Assertions.assertNotNull(mAllChildren)[index]
+        : null;
   }
 
   /*package*/ void addViewWithSubviewClippingEnabled(View child, int index) {
@@ -746,7 +752,7 @@ public class ReactViewGroup extends ViewGroup
   }
 
   /*package*/ void addViewWithSubviewClippingEnabled(
-    final View child, int index, ViewGroup.LayoutParams params) {
+      final View child, int index, ViewGroup.LayoutParams params) {
     Assertions.assertCondition(mRemoveClippedSubviews);
     Assertions.assertNotNull(mClippingRect);
     Assertions.assertNotNull(mAllChildren);
@@ -764,31 +770,29 @@ public class ReactViewGroup extends ViewGroup
 
     if (child instanceof ReactClippingProhibitedView) {
       UiThreadUtil.runOnUiThread(
-        new Runnable() {
-          @Override
-          public void run() {
-            if (!child.isShown()) {
-              ReactSoftExceptionLogger.logSoftException(
-                TAG,
-                new ReactNoCrashSoftException(
-                  "Child view has been added to Parent view in which it is clipped and not visible."
-                    + " This is not legal for this particular child view. Child: ["
-                    + child.getId()
-                    + "] "
-                    + child.toString()
-                    + " Parent: ["
-                    + getId()
-                    + "] "
-                    + toString()));
+          new Runnable() {
+            @Override
+            public void run() {
+              if (!child.isShown()) {
+                ReactSoftExceptionLogger.logSoftException(
+                    TAG,
+                    new ReactNoCrashSoftException(
+                        "Child view has been added to Parent view in which it is clipped and not"
+                            + " visible. This is not legal for this particular child view. Child: ["
+                            + child.getId()
+                            + "] "
+                            + child.toString()
+                            + " Parent: ["
+                            + getId()
+                            + "] "
+                            + toString()));
+              }
             }
-          }
-        });
+          });
     }
   }
 
-  // TODO: make this method package only once we remove Android's mounting layer retry mechanism.
-  @VisibleForTesting
-  public void removeViewWithSubviewClippingEnabled(View view) {
+  /*package*/ void removeViewWithSubviewClippingEnabled(View view) {
     UiThreadUtil.assertOnUiThread();
 
     Assertions.assertCondition(mRemoveClippedSubviews);
@@ -877,31 +881,32 @@ public class ReactViewGroup extends ViewGroup
     return DEFAULT_BACKGROUND_COLOR;
   }
 
-  /* package */ ReactViewBackgroundDrawable getOrCreateReactViewBackground() {
-    if (mReactBackgroundDrawable == null) {
-      mReactBackgroundDrawable = new ReactViewBackgroundDrawable(getContext());
+  /* package */ CSSBackgroundDrawable getOrCreateReactViewBackground() {
+    if (mCSSBackgroundDrawable == null) {
+      mCSSBackgroundDrawable = new CSSBackgroundDrawable(getContext());
       Drawable backgroundDrawable = getBackground();
       updateBackgroundDrawable(
-        null); // required so that drawable callback is cleared before we add the
+          null); // required so that drawable callback is cleared before we add the
       // drawable back as a part of LayerDrawable
       if (backgroundDrawable == null) {
-        updateBackgroundDrawable(mReactBackgroundDrawable);
+        updateBackgroundDrawable(mCSSBackgroundDrawable);
       } else {
         LayerDrawable layerDrawable =
-          new LayerDrawable(new Drawable[]{mReactBackgroundDrawable, backgroundDrawable});
+            new LayerDrawable(new Drawable[] {mCSSBackgroundDrawable, backgroundDrawable});
         updateBackgroundDrawable(layerDrawable);
       }
-
-      mLayoutDirection =
-        I18nUtil.getInstance().isRTL(getContext()) ? LAYOUT_DIRECTION_RTL : LAYOUT_DIRECTION_LTR;
-      mReactBackgroundDrawable.setResolvedLayoutDirection(mLayoutDirection);
+      if (!ReactNativeFeatureFlags.setAndroidLayoutDirection()) {
+        mCSSBackgroundDrawable.setLayoutDirectionOverride(
+            I18nUtil.getInstance().isRTL(getContext())
+                ? LAYOUT_DIRECTION_RTL
+                : LAYOUT_DIRECTION_LTR);
+      }
     }
-    return mReactBackgroundDrawable;
+    return mCSSBackgroundDrawable;
   }
 
   @Override
-  public @Nullable
-  Rect getHitSlopRect() {
+  public @Nullable Rect getHitSlopRect() {
     return mHitSlopRect;
   }
 
@@ -915,8 +920,7 @@ public class ReactViewGroup extends ViewGroup
   }
 
   @Override
-  public @Nullable
-  String getOverflow() {
+  public @Nullable String getOverflow() {
     return mOverflow;
   }
 
@@ -935,9 +939,9 @@ public class ReactViewGroup extends ViewGroup
    * #setBackground(Drawable)} or {@link #setBackgroundDrawable(Drawable)} based on the sdk version.
    *
    * @param drawable {@link Drawable} The Drawable to use as the background, or null to remove the
-   *                 background
+   *     background
    */
-  /* package */ void updateBackgroundDrawable(Drawable drawable) {
+  /* package */ void updateBackgroundDrawable(@Nullable Drawable drawable) {
     super.setBackground(drawable);
   }
 
@@ -956,7 +960,7 @@ public class ReactViewGroup extends ViewGroup
         if (getContext() instanceof ReactContext) {
           ReactContext reactContext = (ReactContext) getContext();
           reactContext.handleException(
-            new IllegalViewOperationException("StackOverflowException", this, e));
+              new IllegalViewOperationException("StackOverflowException", this, e));
         } else {
           throw e;
         }
@@ -997,126 +1001,41 @@ public class ReactViewGroup extends ViewGroup
 
           boolean hasClipPath = false;
 
-          if (mReactBackgroundDrawable != null) {
-            final RectF borderWidth = mReactBackgroundDrawable.getDirectionAwareBorderInsets();
+          if (mCSSBackgroundDrawable != null) {
+            final RectF borderWidth = mCSSBackgroundDrawable.getDirectionAwareBorderInsets();
 
             if (borderWidth.top > 0
-              || borderWidth.left > 0
-              || borderWidth.bottom > 0
-              || borderWidth.right > 0) {
+                || borderWidth.left > 0
+                || borderWidth.bottom > 0
+                || borderWidth.right > 0) {
               left += borderWidth.left;
               top += borderWidth.top;
               right -= borderWidth.right;
               bottom -= borderWidth.bottom;
             }
 
-            final float borderRadius = mReactBackgroundDrawable.getFullBorderRadius();
-            float topLeftBorderRadius =
-              mReactBackgroundDrawable.getBorderRadiusOrDefaultTo(
-                borderRadius, ReactViewBackgroundDrawable.BorderRadiusLocation.TOP_LEFT);
-            float topRightBorderRadius =
-              mReactBackgroundDrawable.getBorderRadiusOrDefaultTo(
-                borderRadius, ReactViewBackgroundDrawable.BorderRadiusLocation.TOP_RIGHT);
-            float bottomLeftBorderRadius =
-              mReactBackgroundDrawable.getBorderRadiusOrDefaultTo(
-                borderRadius, ReactViewBackgroundDrawable.BorderRadiusLocation.BOTTOM_LEFT);
-            float bottomRightBorderRadius =
-              mReactBackgroundDrawable.getBorderRadiusOrDefaultTo(
-                borderRadius, ReactViewBackgroundDrawable.BorderRadiusLocation.BOTTOM_RIGHT);
-
-            final boolean isRTL = mLayoutDirection == View.LAYOUT_DIRECTION_RTL;
-            float topStartBorderRadius =
-              mReactBackgroundDrawable.getBorderRadius(
-                ReactViewBackgroundDrawable.BorderRadiusLocation.TOP_START);
-            float topEndBorderRadius =
-              mReactBackgroundDrawable.getBorderRadius(
-                ReactViewBackgroundDrawable.BorderRadiusLocation.TOP_END);
-            float bottomStartBorderRadius =
-              mReactBackgroundDrawable.getBorderRadius(
-                ReactViewBackgroundDrawable.BorderRadiusLocation.BOTTOM_START);
-            float bottomEndBorderRadius =
-              mReactBackgroundDrawable.getBorderRadius(
-                ReactViewBackgroundDrawable.BorderRadiusLocation.BOTTOM_END);
-
-            if (I18nUtil.getInstance().doLeftAndRightSwapInRTL(getContext())) {
-              if (YogaConstants.isUndefined(topStartBorderRadius)) {
-                topStartBorderRadius = topLeftBorderRadius;
-              }
-
-              if (YogaConstants.isUndefined(topEndBorderRadius)) {
-                topEndBorderRadius = topRightBorderRadius;
-              }
-
-              if (YogaConstants.isUndefined(bottomStartBorderRadius)) {
-                bottomStartBorderRadius = bottomLeftBorderRadius;
-              }
-
-              if (YogaConstants.isUndefined(bottomEndBorderRadius)) {
-                bottomEndBorderRadius = bottomRightBorderRadius;
-              }
-
-              final float directionAwareTopLeftRadius =
-                isRTL ? topEndBorderRadius : topStartBorderRadius;
-              final float directionAwareTopRightRadius =
-                isRTL ? topStartBorderRadius : topEndBorderRadius;
-              final float directionAwareBottomLeftRadius =
-                isRTL ? bottomEndBorderRadius : bottomStartBorderRadius;
-              final float directionAwareBottomRightRadius =
-                isRTL ? bottomStartBorderRadius : bottomEndBorderRadius;
-
-              topLeftBorderRadius = directionAwareTopLeftRadius;
-              topRightBorderRadius = directionAwareTopRightRadius;
-              bottomLeftBorderRadius = directionAwareBottomLeftRadius;
-              bottomRightBorderRadius = directionAwareBottomRightRadius;
-            } else {
-              final float directionAwareTopLeftRadius =
-                isRTL ? topEndBorderRadius : topStartBorderRadius;
-              final float directionAwareTopRightRadius =
-                isRTL ? topStartBorderRadius : topEndBorderRadius;
-              final float directionAwareBottomLeftRadius =
-                isRTL ? bottomEndBorderRadius : bottomStartBorderRadius;
-              final float directionAwareBottomRightRadius =
-                isRTL ? bottomStartBorderRadius : bottomEndBorderRadius;
-
-              if (!YogaConstants.isUndefined(directionAwareTopLeftRadius)) {
-                topLeftBorderRadius = directionAwareTopLeftRadius;
-              }
-
-              if (!YogaConstants.isUndefined(directionAwareTopRightRadius)) {
-                topRightBorderRadius = directionAwareTopRightRadius;
-              }
-
-              if (!YogaConstants.isUndefined(directionAwareBottomLeftRadius)) {
-                bottomLeftBorderRadius = directionAwareBottomLeftRadius;
-              }
-
-              if (!YogaConstants.isUndefined(directionAwareBottomRightRadius)) {
-                bottomRightBorderRadius = directionAwareBottomRightRadius;
-              }
-            }
+            final ComputedBorderRadius borderRadius =
+                mCSSBackgroundDrawable.getComputedBorderRadius();
 
-            if (topLeftBorderRadius > 0
-              || topRightBorderRadius > 0
-              || bottomRightBorderRadius > 0
-              || bottomLeftBorderRadius > 0) {
+            if (borderRadius.hasRoundedBorders()) {
               if (mPath == null) {
                 mPath = new Path();
               }
 
               mPath.rewind();
               mPath.addRoundRect(
-                new RectF(left, top, right, bottom),
-                new float[]{
-                  Math.max(topLeftBorderRadius - borderWidth.left, 0),
-                  Math.max(topLeftBorderRadius - borderWidth.top, 0),
-                  Math.max(topRightBorderRadius - borderWidth.right, 0),
-                  Math.max(topRightBorderRadius - borderWidth.top, 0),
-                  Math.max(bottomRightBorderRadius - borderWidth.right, 0),
-                  Math.max(bottomRightBorderRadius - borderWidth.bottom, 0),
-                  Math.max(bottomLeftBorderRadius - borderWidth.left, 0),
-                  Math.max(bottomLeftBorderRadius - borderWidth.bottom, 0),
-                },
-                Path.Direction.CW);
+                  new RectF(left, top, right, bottom),
+                  new float[] {
+                    Math.max(borderRadius.getTopLeft() - borderWidth.left, 0),
+                    Math.max(borderRadius.getTopLeft() - borderWidth.top, 0),
+                    Math.max(borderRadius.getTopRight() - borderWidth.right, 0),
+                    Math.max(borderRadius.getTopRight() - borderWidth.top, 0),
+                    Math.max(borderRadius.getBottomRight() - borderWidth.right, 0),
+                    Math.max(borderRadius.getBottomRight() - borderWidth.bottom, 0),
+                    Math.max(borderRadius.getBottomLeft() - borderWidth.left, 0),
+                    Math.max(borderRadius.getBottomLeft() - borderWidth.bottom, 0),
+                  },
+                  Path.Direction.CW);
               canvas.clipPath(mPath);
               hasClipPath = true;
             }
@@ -1154,7 +1073,7 @@ public class ReactViewGroup extends ViewGroup
     float rotationY = getRotationY();
 
     boolean isFrontfaceVisible =
-      (rotationX >= -90.f && rotationX < 90.f) && (rotationY >= -90.f && rotationY < 90.f);
+        (rotationX >= -90.f && rotationX < 90.f) && (rotationY >= -90.f && rotationY < 90.f);
 
     if (isFrontfaceVisible) {
       setAlpha(mBackfaceOpacity);