react-native-tvos 0.76.5-0 → 0.77.0-0

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

@@ -7,6 +7,7 @@
 
 package com.facebook.react.views.view;
 
+import static com.facebook.infer.annotation.Assertions.nullsafeFIXME;
 import static com.facebook.react.common.ReactConstants.TAG;
 
 import android.annotation.SuppressLint;
@@ -14,13 +15,9 @@ import android.annotation.TargetApi;
 import android.content.Context;
 import android.graphics.BlendMode;
 import android.graphics.Canvas;
-import android.graphics.Color;
 import android.graphics.Paint;
-import android.graphics.Path;
 import android.graphics.Rect;
-import android.graphics.RectF;
 import android.graphics.drawable.Drawable;
-import android.graphics.drawable.LayerDrawable;
 import android.os.Build;
 import android.os.Bundle;
 import android.view.FocusFinder;
@@ -39,20 +36,18 @@ 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.R;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactNoCrashSoftException;
 import com.facebook.react.bridge.ReactSoftExceptionLogger;
 import com.facebook.react.bridge.UiThreadUtil;
-import com.facebook.react.common.annotations.UnstableReactNativeAPI;
-import com.facebook.react.common.annotations.VisibleForTesting;
-import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
-import com.facebook.react.modules.i18nmanager.I18nUtil;
+import com.facebook.react.config.ReactFeatureFlags;
 import com.facebook.react.touch.OnInterceptTouchEventListener;
 import com.facebook.react.touch.ReactHitSlopView;
 import com.facebook.react.touch.ReactInterceptingViewGroup;
 import com.facebook.react.uimanager.BackgroundStyleApplicator;
-import com.facebook.react.uimanager.IllegalViewOperationException;
+import com.facebook.react.uimanager.BlendModeHelper;
 import com.facebook.react.uimanager.LengthPercentage;
 import com.facebook.react.uimanager.LengthPercentageType;
 import com.facebook.react.uimanager.MeasureSpecAssertions;
@@ -80,11 +75,10 @@ import com.facebook.react.uimanager.events.PressOutEvent;
 import com.facebook.react.uimanager.style.BackgroundImageLayer;
 import com.facebook.react.uimanager.style.BorderRadiusProp;
 import com.facebook.react.uimanager.style.BorderStyle;
-import com.facebook.react.uimanager.style.ComputedBorderRadius;
-import com.facebook.react.uimanager.style.CornerRadii;
 import com.facebook.react.uimanager.style.LogicalEdge;
 import com.facebook.react.uimanager.style.Overflow;
-import java.util.List;
+import java.util.HashSet;
+import java.util.Set;
 
 import java.lang.ref.WeakReference;
 import java.util.ArrayList;
@@ -93,6 +87,7 @@ import java.util.ArrayList;
  * Backing for a React View. Has support for borders, but since borders aren't common, lazy
  * initializes most of the storage needed for them.
  */
+@Nullsafe(Nullsafe.Mode.LOCAL)
 public class ReactViewGroup extends ViewGroup
     implements ReactInterceptingViewGroup,
         ReactClippingViewGroup,
@@ -102,11 +97,8 @@ public class ReactViewGroup extends ViewGroup
         ReactOverflowViewWithInset {
 
   private static final int ARRAY_CAPACITY_INCREMENT = 12;
-  private static final int DEFAULT_BACKGROUND_COLOR = Color.TRANSPARENT;
   private static final LayoutParams sDefaultLayoutParam = new ViewGroup.LayoutParams(0, 0);
   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;
@@ -130,7 +122,7 @@ public class ReactViewGroup extends ViewGroup
    */
   private static final class ChildrenLayoutChangeListener implements View.OnLayoutChangeListener {
 
-    private final ReactViewGroup mParent;
+    @Nullable private ReactViewGroup mParent;
 
     private ChildrenLayoutChangeListener(ReactViewGroup parent) {
       mParent = parent;
@@ -147,12 +139,18 @@ public class ReactViewGroup extends ViewGroup
         int oldTop,
         int oldRight,
         int oldBottom) {
-      if (mParent.getRemoveClippedSubviews()) {
+      if (mParent != null && mParent.getRemoveClippedSubviews()) {
         mParent.updateSubviewClipStatus(v);
       }
     }
+
+    public void shutdown() {
+      mParent = null;
+    }
   }
 
+  private int mRecycleCount = 0;
+
   // Following properties are here to support the option {@code removeClippedSubviews}. This is a
   // temporary optimization/hack that is mainly applicable to the large list of images. The way
   // it's implemented is that we store an additional array of children in view node. We selectively
@@ -167,17 +165,22 @@ public class ReactViewGroup extends ViewGroup
   private @Nullable Rect mClippingRect;
   private @Nullable Rect mHitSlopRect;
   private Overflow mOverflow;
-  private PointerEvents mPointerEvents;
+  private PointerEvents mPointerEvents = PointerEvents.AUTO;
   private @Nullable ChildrenLayoutChangeListener mChildrenLayoutChangeListener;
-  private @Nullable CSSBackgroundDrawable mCSSBackgroundDrawable;
   private @Nullable OnInterceptTouchEventListener mOnInterceptTouchEventListener;
   private boolean mNeedsOffscreenAlphaCompositing;
   private @Nullable ViewGroupDrawingOrderHelper mDrawingOrderHelper;
-  private @Nullable Path mPath;
   private float mBackfaceOpacity;
   private String mBackfaceVisibility;
+  private @Nullable Set<Integer> mChildrenRemovedWhileTransitioning;
 
-  public ReactViewGroup(Context context) {
+  /**
+   * Creates a new `ReactViewGroup` instance.
+   *
+   * @param context A {@link Context} instance. It's Nullable to not break compatibility with OSS
+   *     users (could be made non-null in the future but requires proper comms).
+   */
+  public ReactViewGroup(@Nullable Context context) {
     super(context);
     initView();
   }
@@ -185,7 +188,7 @@ public class ReactViewGroup extends ViewGroup
   /**
    * Set all default values here as opposed to in the constructor or field defaults. It is important
    * that these properties are set during the constructor, but also on-demand whenever an existing
-   * ReactTextView is recycled.
+   * ReactViewGroup is recycled.
    */
   private void initView() {
     setClipChildren(false);
@@ -198,18 +201,19 @@ public class ReactViewGroup extends ViewGroup
     mOverflow = Overflow.VISIBLE;
     mPointerEvents = PointerEvents.AUTO;
     mChildrenLayoutChangeListener = null;
-    mCSSBackgroundDrawable = null;
     mOnInterceptTouchEventListener = null;
     mNeedsOffscreenAlphaCompositing = false;
     mDrawingOrderHelper = null;
-    mPath = null;
     mBackfaceOpacity = 1.f;
     mBackfaceVisibility = "visible";
+    mChildrenRemovedWhileTransitioning = null;
   }
 
   /* package */ void recycleView() {
+    mRecycleCount++;
     // Remove dangling listeners
     if (mAllChildren != null && mChildrenLayoutChangeListener != null) {
+      mChildrenLayoutChangeListener.shutdown();
       for (int i = 0; i < mAllChildrenCount; i++) {
         mAllChildren[i].removeOnLayoutChangeListener(mChildrenLayoutChangeListener);
       }
@@ -218,7 +222,6 @@ public class ReactViewGroup extends ViewGroup
     // Set default field values
     initView();
     mOverflowInset.setEmpty();
-    sHelperRect.setEmpty();
 
     // Remove any children
     removeAllViews();
@@ -270,44 +273,12 @@ public class ReactViewGroup extends ViewGroup
 
   @Override
   public void setBackgroundColor(int color) {
-    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
-      BackgroundStyleApplicator.setBackgroundColor(this, color);
-    } else {
-      if (color == Color.TRANSPARENT && mCSSBackgroundDrawable == null) {
-        // don't do anything, no need to allocate ReactBackgroundDrawable for transparent background
-      } else {
-        getOrCreateReactViewBackground().setColor(color);
-      }
-    }
-  }
-
-  @UnstableReactNativeAPI
-  /*package*/ void setBackgroundImage(@Nullable List<BackgroundImageLayer> backgroundImageLayers) {
-    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
-      BackgroundStyleApplicator.setBackgroundImage(this, backgroundImageLayers);
-    } else {
-      getOrCreateReactViewBackground().setBackgroundImage(backgroundImageLayers);
-    }
+    BackgroundStyleApplicator.setBackgroundColor(this, color);
   }
 
   @Deprecated(since = "0.76.0", forRemoval = true)
   public void setTranslucentBackgroundDrawable(@Nullable Drawable background) {
-    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
-      BackgroundStyleApplicator.setFeedbackUnderlay(this, background);
-    } else {
-      // it's required to call setBackground to null, as in some of the cases we may set new
-      // background to be a layer drawable that contains a drawable that has been setup
-      // as a background previously. This will not work correctly as the drawable callback logic is
-      // messed up in AOSP
-      updateBackgroundDrawable(null);
-      if (mCSSBackgroundDrawable != null && background != null) {
-        LayerDrawable layerDrawable =
-            new LayerDrawable(new Drawable[] {mCSSBackgroundDrawable, background});
-        updateBackgroundDrawable(layerDrawable);
-      } else if (background != null) {
-        updateBackgroundDrawable(background);
-      }
-    }
+    BackgroundStyleApplicator.setFeedbackUnderlay(this, background);
   }
 
   @Override
@@ -329,7 +300,7 @@ public class ReactViewGroup extends ViewGroup
   }
 
   @Override
-  public boolean onTouchEvent(MotionEvent ev) {
+  public boolean onTouchEvent(MotionEvent event) {
     // We do not accept the touch event if this view is not supposed to receive it.
     if (!PointerEvents.canBeTouchTarget(mPointerEvents)) {
       return false;
@@ -342,6 +313,15 @@ public class ReactViewGroup extends ViewGroup
     return true;
   }
 
+  @Override
+  public boolean onHoverEvent(MotionEvent event) {
+    if (ReactFeatureFlags.dispatchPointerEvents) {
+      // Match the logic from onTouchEvent if pointer events are enabled
+      return PointerEvents.canBeTouchTarget(mPointerEvents);
+    }
+    return super.onHoverEvent(event);
+  }
+
   @Override
   public boolean dispatchGenericMotionEvent(MotionEvent ev) {
     // We do not dispatch the motion event if its children are not supposed to receive it
@@ -367,20 +347,12 @@ public class ReactViewGroup extends ViewGroup
   }
 
   public void setBorderWidth(int position, float width) {
-    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
-      BackgroundStyleApplicator.setBorderWidth(
-          this, LogicalEdge.values()[position], PixelUtil.toDIPFromPixel(width));
-    } else {
-      getOrCreateReactViewBackground().setBorderWidth(position, width);
-    }
+    BackgroundStyleApplicator.setBorderWidth(
+        this, LogicalEdge.values()[position], PixelUtil.toDIPFromPixel(width));
   }
 
   public void setBorderColor(int position, @Nullable Integer color) {
-    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
-      BackgroundStyleApplicator.setBorderColor(this, LogicalEdge.values()[position], color);
-    } else {
-      getOrCreateReactViewBackground().setBorderColor(position, color);
-    }
+    BackgroundStyleApplicator.setBorderColor(this, LogicalEdge.values()[position], color);
   }
 
   /**
@@ -396,34 +368,21 @@ public class ReactViewGroup extends ViewGroup
    */
   @Deprecated(since = "0.75.0", forRemoval = true)
   public void setBorderRadius(float borderRadius, int position) {
-    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
-      @Nullable
-      LengthPercentage radius =
-          Float.isNaN(borderRadius)
-              ? null
-              : new LengthPercentage(borderRadius, LengthPercentageType.POINT);
-      BackgroundStyleApplicator.setBorderRadius(this, BorderRadiusProp.values()[position], radius);
-    } else {
-      getOrCreateReactViewBackground().setRadius(borderRadius, position);
-    }
+    @Nullable
+    LengthPercentage radius =
+        Float.isNaN(borderRadius)
+            ? null
+            : new LengthPercentage(borderRadius, LengthPercentageType.POINT);
+    BackgroundStyleApplicator.setBorderRadius(this, BorderRadiusProp.values()[position], radius);
   }
 
   public void setBorderRadius(BorderRadiusProp property, @Nullable LengthPercentage borderRadius) {
-    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
-      BackgroundStyleApplicator.setBorderRadius(this, property, borderRadius);
-    } else {
-      CSSBackgroundDrawable backgroundDrawable = getOrCreateReactViewBackground();
-      backgroundDrawable.setBorderRadius(property, borderRadius);
-    }
+    BackgroundStyleApplicator.setBorderRadius(this, property, borderRadius);
   }
 
   public void setBorderStyle(@Nullable String style) {
-    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
-      BackgroundStyleApplicator.setBorderStyle(
-          this, style == null ? null : BorderStyle.fromString(style));
-    } else {
-      getOrCreateReactViewBackground().setBorderStyle(style);
-    }
+    BackgroundStyleApplicator.setBorderStyle(
+        this, style == null ? null : BorderStyle.fromString(style));
   }
 
   @Override
@@ -432,6 +391,7 @@ public class ReactViewGroup extends ViewGroup
       return;
     }
     mRemoveClippedSubviews = removeClippedSubviews;
+    mChildrenRemovedWhileTransitioning = null;
     if (removeClippedSubviews) {
       mClippingRect = new Rect();
       ReactClippingViewGroupHelper.calculateClippingRect(this, mClippingRect);
@@ -469,7 +429,7 @@ public class ReactViewGroup extends ViewGroup
 
   @Override
   public void getClippingRect(Rect outClippingRect) {
-    outClippingRect.set(mClippingRect);
+    outClippingRect.set(nullsafeFIXME(mClippingRect, "Fix in Kotlin"));
   }
 
   @Override
@@ -485,12 +445,47 @@ public class ReactViewGroup extends ViewGroup
     updateClippingToRect(mClippingRect);
   }
 
+  @Override
+  public void endViewTransition(View view) {
+    super.endViewTransition(view);
+    if (mChildrenRemovedWhileTransitioning != null) {
+      mChildrenRemovedWhileTransitioning.remove(view.getId());
+    }
+  }
+
+  private void trackChildViewTransition(int childId) {
+    if (mChildrenRemovedWhileTransitioning == null) {
+      mChildrenRemovedWhileTransitioning = new HashSet<>();
+    }
+    mChildrenRemovedWhileTransitioning.add(childId);
+  }
+
+  private boolean isChildRemovedWhileTransitioning(View child) {
+    return mChildrenRemovedWhileTransitioning != null
+        && mChildrenRemovedWhileTransitioning.contains(child.getId());
+  }
+
   private void updateClippingToRect(Rect clippingRect) {
     Assertions.assertNotNull(mAllChildren);
     int clippedSoFar = 0;
     for (int i = 0; i < mAllChildrenCount; i++) {
-      updateSubviewClipStatus(clippingRect, i, clippedSoFar);
-      if (mAllChildren[i].getParent() == null) {
+      try {
+        updateSubviewClipStatus(clippingRect, i, clippedSoFar);
+      } catch (IndexOutOfBoundsException e) {
+        throw new IllegalStateException(
+            "Invalid clipping state. i="
+                + i
+                + " clippedSoFar="
+                + clippedSoFar
+                + " count="
+                + getChildCount()
+                + " allChildrenCount="
+                + mAllChildrenCount
+                + " recycleCount="
+                + mRecycleCount,
+            e);
+      }
+      if (isViewClipped(mAllChildren[i])) {
         clippedSoFar++;
       }
     }
@@ -500,10 +495,9 @@ public class ReactViewGroup extends ViewGroup
     UiThreadUtil.assertOnUiThread();
 
     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);
+            child.getLeft(), child.getTop(), child.getRight(), child.getBottom());
     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
@@ -513,13 +507,13 @@ public class ReactViewGroup extends ViewGroup
     // it won't be size and located properly.
     Animation animation = child.getAnimation();
     boolean isAnimating = animation != null && !animation.hasEnded();
-    if (!intersects && child.getParent() != null && !isAnimating) {
+    if (!intersects && !isViewClipped(child) && !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.
       removeViewInLayout(child);
       needUpdateClippingRecursive = true;
-    } else if (intersects && child.getParent() == null) {
+    } else if (intersects && isViewClipped(child)) {
       addViewInLayout(child, idx - clippedSoFar, sDefaultLayoutParam, true);
       invalidate();
       needUpdateClippingRecursive = true;
@@ -529,8 +523,6 @@ public class ReactViewGroup extends ViewGroup
     }
     if (needUpdateClippingRecursive) {
       if (child instanceof ReactClippingViewGroup) {
-        // we don't use {@link sHelperRect} until the end of this loop, therefore it's safe
-        // to call this method that may write to the same {@link sHelperRect} object.
         ReactClippingViewGroup clippingChild = (ReactClippingViewGroup) child;
         if (clippingChild.getRemoveClippedSubviews()) {
           clippingChild.updateClippingRect();
@@ -548,13 +540,12 @@ public class ReactViewGroup extends ViewGroup
     Assertions.assertNotNull(mAllChildren);
 
     // 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);
+            subview.getLeft(), subview.getTop(), subview.getRight(), subview.getBottom());
 
     // If it was intersecting before, should be attached to the parent
-    boolean oldIntersects = (subview.getParent() != null);
+    boolean oldIntersects = !isViewClipped(subview);
 
     if (intersects != oldIntersects) {
       int clippedSoFar = 0;
@@ -563,18 +554,13 @@ public class ReactViewGroup extends ViewGroup
           updateSubviewClipStatus(mClippingRect, i, clippedSoFar);
           break;
         }
-        if (mAllChildren[i].getParent() == null) {
+        if (isViewClipped(mAllChildren[i])) {
           clippedSoFar++;
         }
       }
     }
   }
 
-  @Override
-  public boolean getChildVisibleRect(View child, Rect r, android.graphics.Point offset) {
-    return super.getChildVisibleRect(child, r, offset);
-  }
-
   private View getFirstFocusableView(ReactViewGroup viewGroup) {
     ArrayList<View> focusables = new ArrayList<View>(0);
     /**
@@ -683,85 +669,39 @@ public class ReactViewGroup extends ViewGroup
     return ViewUtil.getUIManagerType(getId()) == UIManagerType.FABRIC;
   }
 
-  private void handleAddView(View view) {
+  @Override
+  public void onViewAdded(View child) {
     UiThreadUtil.assertOnUiThread();
 
     if (!customDrawOrderDisabled()) {
-      getDrawingOrderHelper().handleAddView(view);
+      getDrawingOrderHelper().handleAddView(child);
       setChildrenDrawingOrderEnabled(getDrawingOrderHelper().shouldEnableCustomDrawingOrder());
     } else {
       setChildrenDrawingOrderEnabled(false);
     }
+    super.onViewAdded(child);
   }
 
-  private void handleRemoveView(View view) {
+  @Override
+  public void onViewRemoved(View child) {
     UiThreadUtil.assertOnUiThread();
 
     if (!customDrawOrderDisabled()) {
-      if (indexOfChild(view) == -1) {
+      if (indexOfChild(child) == -1) {
         return;
       }
-      getDrawingOrderHelper().handleRemoveView(view);
+      getDrawingOrderHelper().handleRemoveView(child);
       setChildrenDrawingOrderEnabled(getDrawingOrderHelper().shouldEnableCustomDrawingOrder());
     } else {
       setChildrenDrawingOrderEnabled(false);
     }
-  }
 
-  private void handleRemoveViews(int start, int count) {
-    int endIndex = start + count;
-    for (int index = start; index < endIndex; index++) {
-      if (index < getChildCount()) {
-        handleRemoveView(getChildAt(index));
-      }
+    // The parent might not be null in case the child is transitioning.
+    if (child.getParent() != null) {
+      trackChildViewTransition(child.getId());
     }
-  }
 
-  @Override
-  public void addView(View child, int index, ViewGroup.LayoutParams params) {
-    // This will get called for every overload of addView so there is not need to override every
-    // method.
-    handleAddView(child);
-    super.addView(child, index, params);
-  }
-
-  @Override
-  protected boolean addViewInLayout(
-      View child, int index, LayoutParams params, boolean preventRequestLayout) {
-    handleAddView(child);
-    return super.addViewInLayout(child, index, params, preventRequestLayout);
-  }
-
-  @Override
-  public void removeView(View view) {
-    handleRemoveView(view);
-    recoverFocus(view);
-    super.removeView(view);
-  }
-
-  @Override
-  public void removeViewAt(int index) {
-    handleRemoveView(getChildAt(index));
-    recoverFocus(getChildAt(index));
-    super.removeViewAt(index);
-  }
-
-  @Override
-  public void removeViewInLayout(View view) {
-    handleRemoveView(view);
-    super.removeViewInLayout(view);
-  }
-
-  @Override
-  public void removeViewsInLayout(int start, int count) {
-    handleRemoveViews(start, count);
-    super.removeViewsInLayout(start, count);
-  }
-
-  @Override
-  public void removeViews(int start, int count) {
-    handleRemoveViews(start, count);
-    super.removeViews(start, count);
+    super.onViewRemoved(child);
   }
 
   @Override
@@ -835,18 +775,19 @@ public class ReactViewGroup extends ViewGroup
   /*package*/ void addViewWithSubviewClippingEnabled(
       final View child, int index, ViewGroup.LayoutParams params) {
     Assertions.assertCondition(mRemoveClippedSubviews);
-    Assertions.assertNotNull(mClippingRect);
-    Assertions.assertNotNull(mAllChildren);
     addInArray(child, index);
+
     // we add view as "clipped" and then run {@link #updateSubviewClipStatus} to conditionally
     // attach it
+    Rect clippingRect = Assertions.assertNotNull(mClippingRect);
+    View[] childArray = Assertions.assertNotNull(mAllChildren);
     int clippedSoFar = 0;
     for (int i = 0; i < index; i++) {
-      if (mAllChildren[i].getParent() == null) {
+      if (isViewClipped(childArray[i])) {
         clippedSoFar++;
       }
     }
-    updateSubviewClipStatus(mClippingRect, index, clippedSoFar);
+    updateSubviewClipStatus(clippingRect, index, clippedSoFar);
     child.addOnLayoutChangeListener(mChildrenLayoutChangeListener);
 
     if (child instanceof ReactClippingProhibitedView) {
@@ -878,36 +819,44 @@ public class ReactViewGroup extends ViewGroup
 
     Assertions.assertCondition(mRemoveClippedSubviews);
     Assertions.assertNotNull(mClippingRect);
-    Assertions.assertNotNull(mAllChildren);
+    View[] childArray = Assertions.assertNotNull(mAllChildren);
     view.removeOnLayoutChangeListener(mChildrenLayoutChangeListener);
     int index = indexOfChildInAllChildren(view);
-    if (mAllChildren[index].getParent() != null) {
+    if (!isViewClipped(childArray[index])) {
       int clippedSoFar = 0;
       for (int i = 0; i < index; i++) {
-        if (mAllChildren[i].getParent() == null) {
+        if (isViewClipped(childArray[i])) {
           clippedSoFar++;
         }
       }
       removeViewsInLayout(index - clippedSoFar, 1);
+      invalidate();
     }
     removeFromArray(index);
   }
 
   /*package*/ void removeAllViewsWithSubviewClippingEnabled() {
     Assertions.assertCondition(mRemoveClippedSubviews);
-    Assertions.assertNotNull(mAllChildren);
+    View[] childArray = Assertions.assertNotNull(mAllChildren);
     for (int i = 0; i < mAllChildrenCount; i++) {
-      mAllChildren[i].removeOnLayoutChangeListener(mChildrenLayoutChangeListener);
+      childArray[i].removeOnLayoutChangeListener(mChildrenLayoutChangeListener);
     }
     removeAllViewsInLayout();
     mAllChildrenCount = 0;
   }
 
+  /**
+   * @return {@code true} if the view has been removed from the ViewGroup.
+   */
+  private boolean isViewClipped(View view) {
+    return view.getParent() == null;
+  }
+
   private int indexOfChildInAllChildren(View child) {
     final int count = mAllChildrenCount;
-    final View[] children = Assertions.assertNotNull(mAllChildren);
+    final View[] childArray = Assertions.assertNotNull(mAllChildren);
     for (int i = 0; i < count; i++) {
-      if (children[i] == child) {
+      if (childArray[i] == child) {
         return i;
       }
     }
@@ -915,26 +864,26 @@ public class ReactViewGroup extends ViewGroup
   }
 
   private void addInArray(View child, int index) {
-    View[] children = Assertions.assertNotNull(mAllChildren);
+    View[] childArray = Assertions.assertNotNull(mAllChildren);
     final int count = mAllChildrenCount;
-    final int size = children.length;
+    final int size = childArray.length;
     if (index == count) {
       if (size == count) {
         mAllChildren = new View[size + ARRAY_CAPACITY_INCREMENT];
-        System.arraycopy(children, 0, mAllChildren, 0, size);
-        children = mAllChildren;
+        System.arraycopy(childArray, 0, mAllChildren, 0, size);
+        childArray = mAllChildren;
       }
-      children[mAllChildrenCount++] = child;
+      childArray[mAllChildrenCount++] = child;
     } else if (index < count) {
       if (size == count) {
         mAllChildren = new View[size + ARRAY_CAPACITY_INCREMENT];
-        System.arraycopy(children, 0, mAllChildren, 0, index);
-        System.arraycopy(children, index, mAllChildren, index + 1, count - index);
-        children = mAllChildren;
+        System.arraycopy(childArray, 0, mAllChildren, 0, index);
+        System.arraycopy(childArray, index, mAllChildren, index + 1, count - index);
+        childArray = mAllChildren;
       } else {
-        System.arraycopy(children, index, children, index + 1, count - index);
+        System.arraycopy(childArray, index, childArray, index + 1, count - index);
       }
-      children[index] = child;
+      childArray[index] = child;
       mAllChildrenCount++;
     } else {
       throw new IndexOutOfBoundsException("index=" + index + " count=" + count);
@@ -942,69 +891,18 @@ public class ReactViewGroup extends ViewGroup
   }
 
   private void removeFromArray(int index) {
-    final View[] children = Assertions.assertNotNull(mAllChildren);
+    final View[] childArray = Assertions.assertNotNull(mAllChildren);
     final int count = mAllChildrenCount;
     if (index == count - 1) {
-      children[--mAllChildrenCount] = null;
+      childArray[--mAllChildrenCount] = null;
     } else if (index >= 0 && index < count) {
-      System.arraycopy(children, index + 1, children, index, count - index - 1);
-      children[--mAllChildrenCount] = null;
+      System.arraycopy(childArray, index + 1, childArray, index, count - index - 1);
+      childArray[--mAllChildrenCount] = null;
     } else {
       throw new IndexOutOfBoundsException();
     }
   }
 
-  private boolean needsIsolatedLayer() {
-    if (!ReactNativeFeatureFlags.enableAndroidMixBlendModeProp()) {
-      return false;
-    }
-
-    for (int i = 0; i < getChildCount(); i++) {
-      if (getChildAt(i).getTag(R.id.mix_blend_mode) != null) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  @VisibleForTesting
-  public int getBackgroundColor() {
-    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
-      @Nullable Integer color = BackgroundStyleApplicator.getBackgroundColor(this);
-      return color == null ? DEFAULT_BACKGROUND_COLOR : color;
-    } else {
-      if (getBackground() != null) {
-        return ((CSSBackgroundDrawable) getBackground()).getColor();
-      }
-      return DEFAULT_BACKGROUND_COLOR;
-    }
-  }
-
-  /* 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
-      // drawable back as a part of LayerDrawable
-      if (backgroundDrawable == null) {
-        updateBackgroundDrawable(mCSSBackgroundDrawable);
-      } else {
-        LayerDrawable layerDrawable =
-            new LayerDrawable(new Drawable[] {mCSSBackgroundDrawable, backgroundDrawable});
-        updateBackgroundDrawable(layerDrawable);
-      }
-      if (!ReactNativeFeatureFlags.setAndroidLayoutDirection()) {
-        mCSSBackgroundDrawable.setLayoutDirectionOverride(
-            I18nUtil.getInstance().isRTL(getContext())
-                ? LAYOUT_DIRECTION_RTL
-                : LAYOUT_DIRECTION_LTR);
-      }
-    }
-    return mCSSBackgroundDrawable;
-  }
-
   @Override
   public @Nullable Rect getHitSlopRect() {
     return mHitSlopRect;
@@ -1041,7 +939,7 @@ public class ReactViewGroup extends ViewGroup
 
   @Override
   public void setOverflowInset(int left, int top, int right, int bottom) {
-    if (needsIsolatedLayer()
+    if (BlendModeHelper.needsIsolatedLayer(this)
         && (mOverflowInset.left != left
             || mOverflowInset.top != top
             || mOverflowInset.right != right
@@ -1071,7 +969,7 @@ public class ReactViewGroup extends ViewGroup
   public void draw(Canvas canvas) {
     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q
         && ViewUtil.getUIManagerType(this) == UIManagerType.FABRIC
-        && needsIsolatedLayer()) {
+        && BlendModeHelper.needsIsolatedLayer(this)) {
 
       // Check if the view is a stacking context and has children, if it does, do the rendering
       // offscreen and then composite back. This follows the idea of group isolation on blending
@@ -1092,33 +990,10 @@ public class ReactViewGroup extends ViewGroup
 
   @Override
   protected void dispatchDraw(Canvas canvas) {
-    if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
-      if (mOverflow != Overflow.VISIBLE || getTag(R.id.filter) != null) {
-        BackgroundStyleApplicator.clipToPaddingBox(this, canvas);
-      }
-      super.dispatchDraw(canvas);
-      return;
-    }
-
-    try {
-      dispatchOverflowDraw(canvas);
-      super.dispatchDraw(canvas);
-    } catch (NullPointerException | StackOverflowError e) {
-      // Adding special exception management for StackOverflowError for logging purposes.
-      // This will be removed in the future.
-      RootView rootView = RootViewUtil.getRootView(ReactViewGroup.this);
-      if (rootView != null) {
-        rootView.handleException(e);
-      } else {
-        if (getContext() instanceof ReactContext) {
-          ReactContext reactContext = (ReactContext) getContext();
-          reactContext.handleException(
-              new IllegalViewOperationException("StackOverflowException", this, e));
-        } else {
-          throw e;
-        }
-      }
+    if (mOverflow != Overflow.VISIBLE || getTag(R.id.filter) != null) {
+      BackgroundStyleApplicator.clipToPaddingBox(this, canvas);
     }
+    super.dispatchDraw(canvas);
   }
 
   @Override
@@ -1130,7 +1005,8 @@ public class ReactViewGroup extends ViewGroup
     }
 
     BlendMode mixBlendMode = null;
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q && needsIsolatedLayer()) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q
+        && BlendModeHelper.needsIsolatedLayer(this)) {
       mixBlendMode = (BlendMode) child.getTag(R.id.mix_blend_mode);
       if (mixBlendMode != null) {
         Paint p = new Paint();
@@ -1157,83 +1033,6 @@ public class ReactViewGroup extends ViewGroup
     return result;
   }
 
-  private void dispatchOverflowDraw(Canvas canvas) {
-    Overflow tempOverflow = mOverflow;
-
-    // If the view contains a filter, we clip to the padding box.
-    if (getTag(R.id.filter) != null) {
-      tempOverflow = Overflow.HIDDEN;
-    }
-
-    switch (tempOverflow) {
-      case VISIBLE:
-        if (mPath != null) {
-          mPath.rewind();
-        }
-        break;
-      case HIDDEN:
-      case SCROLL:
-        float left = 0f;
-        float top = 0f;
-        float right = getWidth();
-        float bottom = getHeight();
-
-        boolean hasClipPath = false;
-
-        if (mCSSBackgroundDrawable != null) {
-          final RectF borderWidth = mCSSBackgroundDrawable.getDirectionAwareBorderInsets();
-
-          if (borderWidth.top > 0
-              || borderWidth.left > 0
-              || borderWidth.bottom > 0
-              || borderWidth.right > 0) {
-            left += borderWidth.left;
-            top += borderWidth.top;
-            right -= borderWidth.right;
-            bottom -= borderWidth.bottom;
-          }
-
-          final ComputedBorderRadius borderRadius =
-              mCSSBackgroundDrawable.getComputedBorderRadius();
-
-          if (borderRadius.hasRoundedBorders()) {
-            if (mPath == null) {
-              mPath = new Path();
-            }
-
-            CornerRadii topLeftRadius = borderRadius.getTopLeft().toPixelFromDIP();
-            CornerRadii topRightRadius = borderRadius.getTopRight().toPixelFromDIP();
-            CornerRadii bottomLeftRadius = borderRadius.getBottomLeft().toPixelFromDIP();
-            CornerRadii bottomRightRadius = borderRadius.getBottomRight().toPixelFromDIP();
-
-            mPath.rewind();
-            mPath.addRoundRect(
-                new RectF(left, top, right, bottom),
-                new float[] {
-                  Math.max(topLeftRadius.getHorizontal() - borderWidth.left, 0),
-                  Math.max(topLeftRadius.getVertical() - borderWidth.top, 0),
-                  Math.max(topRightRadius.getHorizontal() - borderWidth.right, 0),
-                  Math.max(topRightRadius.getVertical() - borderWidth.top, 0),
-                  Math.max(bottomRightRadius.getHorizontal() - borderWidth.right, 0),
-                  Math.max(bottomRightRadius.getVertical() - borderWidth.bottom, 0),
-                  Math.max(bottomLeftRadius.getHorizontal() - borderWidth.left, 0),
-                  Math.max(bottomLeftRadius.getVertical() - borderWidth.bottom, 0),
-                },
-                Path.Direction.CW);
-            canvas.clipPath(mPath);
-            hasClipPath = true;
-          }
-        }
-
-        if (!hasClipPath) {
-          canvas.clipRect(new RectF(left, top, right, bottom));
-        }
-        break;
-      default:
-        break;
-    }
-  }
-
   public void setOpacityIfPossible(float opacity) {
     mBackfaceOpacity = opacity;
     setBackfaceVisibilityDependantOpacity();