Subview clipping for VirtualViewExperiment (#53759)

lunaleaps · facebook-github-bot · commit 4f20e4d0fc11 · 2025-09-13T21:41:49.000-07:00
Summary: Pull Request resolved: #53759 Changelog: [Internal] - Enable subview clipping for experimental version of VirtualView Reviewed By: mdvacca Differential Revision: D82313841 fbshipit-source-id: c6726fd5f443a55ec47c93ef13092fe8bb9297e0
diff --git a/packages/react-native/ReactAndroid/api/ReactAndroid.api b/packages/react-native/ReactAndroid/api/ReactAndroid.api
@@ -5246,6 +5246,7 @@ public class com/facebook/react/viewmanagers/VirtualViewExperimentalManagerDeleg
 
 public abstract interface class com/facebook/react/viewmanagers/VirtualViewExperimentalManagerInterface : com/facebook/react/uimanager/ViewManagerWithGeneratedInterface {
 	public abstract fun setInitialHidden (Landroid/view/View;Z)V
+	public abstract fun setRemoveClippedSubviews (Landroid/view/View;Z)V
 	public abstract fun setRenderState (Landroid/view/View;I)V
 }
 
@@ -6725,9 +6726,10 @@ public final class com/facebook/react/views/virtual/viewexperimental/ReactVirtua
 	public fun onLayoutChange (Landroid/view/View;IIIIIIII)V
 	public fun onModeChange (Lcom/facebook/react/views/virtual/VirtualViewMode;Landroid/graphics/Rect;)V
 	public synthetic fun recycleView$xplat_js_react_native_github_packages_react_native_ReactAndroid_src_main_java_com_facebook_react_views_view_viewAndroid ()V
+	public fun updateClippingRect (Ljava/util/Set;)V
 }
 
-public final class com/facebook/react/views/virtual/viewexperimental/ReactVirtualViewExperimentalManager : com/facebook/react/uimanager/ViewGroupManager, com/facebook/react/viewmanagers/VirtualViewExperimentalManagerInterface {
+public final class com/facebook/react/views/virtual/viewexperimental/ReactVirtualViewExperimentalManager : com/facebook/react/views/view/ReactClippingViewManager, com/facebook/react/viewmanagers/VirtualViewExperimentalManagerInterface {
 	public static final field Companion Lcom/facebook/react/views/virtual/viewexperimental/ReactVirtualViewExperimentalManager$Companion;
 	public static final field REACT_CLASS Ljava/lang/String;
 	public fun <init> ()V
@@ -6739,6 +6741,7 @@ public final class com/facebook/react/views/virtual/viewexperimental/ReactVirtua
 	public fun setInitialHidden (Lcom/facebook/react/views/virtual/viewexperimental/ReactVirtualViewExperimental;Z)V
 	public synthetic fun setNativeId (Landroid/view/View;Ljava/lang/String;)V
 	public fun setNativeId (Lcom/facebook/react/views/virtual/viewexperimental/ReactVirtualViewExperimental;Ljava/lang/String;)V
+	public synthetic fun setRemoveClippedSubviews (Landroid/view/View;Z)V
 	public synthetic fun setRenderState (Landroid/view/View;I)V
 	public fun setRenderState (Lcom/facebook/react/views/virtual/viewexperimental/ReactVirtualViewExperimental;I)V
 }
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/VirtualViewContainer.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/VirtualViewContainer.kt
@@ -119,7 +119,8 @@ internal class VirtualViewContainerState {
         (-prerenderRect.height() * prerenderRatio).toInt(),
     )
 
-    val virtualViewsIt = if (virtualView != null) listOf(virtualView) else virtualViews
+    val virtualViewsIt =
+        if (virtualView != null) listOf(virtualView) else virtualViews.toMutableSet()
     virtualViewsIt.forEach { vv ->
       val rect = vv.containerRelativeRect
 
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/virtual/viewexperimental/ReactVirtualViewExperimental.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/virtual/viewexperimental/ReactVirtualViewExperimental.kt
@@ -16,6 +16,7 @@ import com.facebook.common.logging.FLog
 import com.facebook.react.R
 import com.facebook.react.common.build.ReactBuildConfig
 import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
+import com.facebook.react.uimanager.ReactClippingViewGroup
 import com.facebook.react.uimanager.ReactRoot
 import com.facebook.react.views.scroll.VirtualView
 import com.facebook.react.views.scroll.VirtualViewContainer
@@ -34,6 +35,7 @@ public class ReactVirtualViewExperimental(context: Context) :
   private var scrollView: VirtualViewContainer? = null
 
   private val lastContainerRelativeRect: Rect = Rect()
+  private val lastClippingRect: Rect = Rect()
   override val containerRelativeRect: Rect = Rect()
   private var offsetX: Int = 0
   private var offsetY: Int = 0
@@ -120,6 +122,7 @@ public class ReactVirtualViewExperimental(context: Context) :
     modeChangeEmitter = null
     hadLayout = false
     lastContainerRelativeRect.setEmpty()
+    lastClippingRect.setEmpty()
     containerRelativeRect.setEmpty()
   }
 
@@ -132,7 +135,12 @@ public class ReactVirtualViewExperimental(context: Context) :
     modeChangeEmitter ?: return
     scrollView ?: return
 
+    if (newMode == VirtualViewMode.Visible) {
+      updateClippingRect(null)
+    }
+
     if (newMode == mode) {
+      debugLog("onModeChange") { "no change $newMode" }
       return
     }
 
@@ -141,6 +149,10 @@ public class ReactVirtualViewExperimental(context: Context) :
 
     debugLog("onModeChange") { "$oldMode->$newMode" }
 
+    if (oldMode == VirtualViewMode.Visible) {
+      updateClippingRect(null)
+    }
+
     when (newMode) {
       VirtualViewMode.Visible -> {
         if (renderState == VirtualViewRenderState.Unknown) {
@@ -187,6 +199,37 @@ public class ReactVirtualViewExperimental(context: Context) :
     }
   }
 
+  // Note: We co-opt subview clipping on ReactVirtualView by returning the
+  // clipping rect of the ScrollView. This means we clip the children of ReactVirtualView
+  // when they are out of the viewport, but not ReactVirtualView itself.
+  override fun updateClippingRect(excludedViews: Set<Int>?) {
+    if (!_removeClippedSubviews) {
+      return
+    }
+
+    // If no ScrollView, or ScrollView has disabled removeClippedSubviews, use default behavior
+    if (
+        scrollView == null ||
+            !((scrollView as ReactClippingViewGroup)?.removeClippedSubviews ?: false)
+    ) {
+      super.updateClippingRect(excludedViews)
+      return
+    }
+
+    val clippingRect = checkNotNull(clippingRect)
+
+    (scrollView as ReactClippingViewGroup).getClippingRect(clippingRect)
+    clippingRect.intersect(containerRelativeRect)
+    clippingRect.offset(-containerRelativeRect.left, -containerRelativeRect.top)
+
+    if (lastClippingRect == clippingRect) {
+      return
+    }
+
+    updateClippingToRect(clippingRect, excludedViews)
+    lastClippingRect.set(clippingRect)
+  }
+
   private fun updateParentOffset() {
     val virtualViewScrollView = scrollView ?: return
     offsetX = 0
@@ -212,8 +255,11 @@ public class ReactVirtualViewExperimental(context: Context) :
       debugLog("reportRectChangeToContainer") { "no rect change $containerRelativeRect" }
       return
     }
-    scrollView?.virtualViewContainerState?.onChange(this)
-    lastContainerRelativeRect.set(containerRelativeRect)
+
+    if (scrollView != null) {
+      scrollView?.virtualViewContainerState?.onChange(this)
+      lastContainerRelativeRect.set(containerRelativeRect)
+    }
   }
 
   private fun getScrollView(): VirtualViewContainer? = traverseParentStack(true)
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/virtual/viewexperimental/ReactVirtualViewExperimentalManager.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/virtual/viewexperimental/ReactVirtualViewExperimentalManager.kt
@@ -13,20 +13,20 @@ import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
-import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
 import com.facebook.react.uimanager.events.EventDispatcher
 import com.facebook.react.viewmanagers.VirtualViewExperimentalManagerDelegate
 import com.facebook.react.viewmanagers.VirtualViewExperimentalManagerInterface
+import com.facebook.react.views.view.ReactClippingViewManager
 import com.facebook.react.views.virtual.VirtualViewMode
 import com.facebook.react.views.virtual.VirtualViewModeChangeEmitter
 import com.facebook.react.views.virtual.VirtualViewModeChangeEvent
 import com.facebook.react.views.virtual.VirtualViewRenderState
 
 @ReactModule(name = ReactVirtualViewExperimentalManager.REACT_CLASS)
 public class ReactVirtualViewExperimentalManager :
-    ViewGroupManager<ReactVirtualViewExperimental>(),
+    ReactClippingViewManager<ReactVirtualViewExperimental>(),
     VirtualViewExperimentalManagerInterface<ReactVirtualViewExperimental> {
 
   private val _delegate = VirtualViewExperimentalManagerDelegate(this)
diff --git a/packages/react-native/src/private/components/virtualview/VirtualViewExperimentalNativeComponent.js b/packages/react-native/src/private/components/virtualview/VirtualViewExperimentalNativeComponent.js
@@ -79,6 +79,12 @@ type VirtualViewExperimentalNativeProps = $ReadOnly<{
    */
   renderState: Int32,
 
+  /**
+   * This was needed to get VirtualViewManagerDelegate to set this property.
+   * TODO: Investigate why spread ViewProps doesn't call setter
+   */
+  removeClippedSubviews?: boolean,
+
   /**
    * See `NativeModeChangeEvent`.
    */

Original file line number	Diff line number	Diff line change
`@@ -119,7 +119,8 @@ internal class VirtualViewContainerState {`
`119`	`119`	`(-prerenderRect.height() * prerenderRatio).toInt(),`
`120`	`120`	`)`
`121`	`121`
`122`		`- val virtualViewsIt = if (virtualView != null) listOf(virtualView) else virtualViews`
	`122`	`+ val virtualViewsIt =`
	`123`	`+ if (virtualView != null) listOf(virtualView) else virtualViews.toMutableSet()`
`123`	`124`	`virtualViewsIt.forEach { vv ->`
`124`	`125`	`val rect = vv.containerRelativeRect`
`125`	`126`