From 8676e525ee1185512b20cba74244cf6c4d0901e2 Mon Sep 17 00:00:00 2001
From: Harry Yu <harry@wanderlog.com>
Date: Thu, 13 Aug 2026 18:43:02 -0700
Subject: [PATCH] Fix Android MVCP anchor selection when z-index reorders
 children
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When Fabric reorders scroll content children due to z-index, the old
computeTargetView logic picked the first child in hierarchy order whose
end position exceeded the scroll offset. That could anchor to the wrong
item, so height changes kept the bottom edge fixed instead of the top.

Scan all children and select the topmost visible anchor instead. Extend
the RNTester AppendingList example with negative z-index values and a
"Change height at id" control to reproduce the bug.

Test plan (Android):
1. Open RNTester → ScrollView → "smooth bi-directional content loading"
2. Add a few items and scroll so there are items above and below the
   current item
3. Use "Change height at id" to change the height of an item in the
   middle
4. Verify the top edge of that item stays in place, rather than the
   bottom edge jumping

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../MaintainVisibleScrollPositionHelper.kt    |  26 +-
 .../examples/ScrollView/ScrollViewExample.js  | 270 +++++++++++-------
 2 files changed, 182 insertions(+), 114 deletions(-)

diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/MaintainVisibleScrollPositionHelper.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/MaintainVisibleScrollPositionHelper.kt
index cca66c7a7334..cdd0d8d2cf44 100644
--- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/MaintainVisibleScrollPositionHelper.kt
+++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/MaintainVisibleScrollPositionHelper.kt
@@ -83,6 +83,7 @@ internal class MaintainVisibleScrollPositionHelper<ScrollViewT>(
       return
     }
     isListening = false
+    firstVisibleViewRef = null
     uIManager.removeUIManagerEventListener(this)
   }
 
@@ -125,6 +126,12 @@ internal class MaintainVisibleScrollPositionHelper<ScrollViewT>(
     val contentView = contentView ?: return
 
     val currentScroll = if (horizontal) scrollView.scrollX else scrollView.scrollY
+    var firstVisibleView: View? = null
+    // We cannot assume that the views will be in position order because of things like z-index
+    // which will change the order of views in their parent. This means we need to iterate through
+    // the full children array and find the view with the smallest position that is bigger than
+    // the scroll position.
+    var firstVisibleViewPosition = Float.MAX_VALUE
     for (i in config.minIndexForVisible until contentView.childCount) {
       val child = contentView.getChildAt(i)
 
@@ -132,14 +139,21 @@ internal class MaintainVisibleScrollPositionHelper<ScrollViewT>(
       val position = if (horizontal) child.x + child.width else child.y + child.height
 
       // If the child is partially visible or this is the last child, select it as the anchor.
-      if (position > currentScroll || i == contentView.childCount - 1) {
-        firstVisibleViewRef = WeakReference(child)
-        val frame = Rect()
-        child.getHitRect(frame)
-        prevFirstVisibleFrame = frame
-        break
+      if ((position > currentScroll && position < firstVisibleViewPosition) ||
+          (firstVisibleView == null && i == contentView.childCount - 1)) {
+        firstVisibleView = child
+        firstVisibleViewPosition = position
       }
     }
+
+    if (firstVisibleView == null) {
+      return
+    }
+
+    firstVisibleViewRef = WeakReference(firstVisibleView)
+    val frame = Rect()
+    firstVisibleView.getHitRect(frame)
+    prevFirstVisibleFrame = frame
   }
 
   // UIManagerListener
diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index 11abb88cde7a..3e1b5a0b927d 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -15,7 +15,7 @@ import RNTesterText from '../../components/RNTesterText';
 import ScrollViewPressableStickyHeaderExample from './ScrollViewPressableStickyHeaderExample';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
-import {cloneElement, useCallback, useRef, useState} from 'react';
+import {useCallback, useRef, useState} from 'react';
 import {
   Platform,
   RefreshControl,
@@ -62,114 +62,153 @@ class EnableDisableList extends React.Component<{}, {scrollEnabled: boolean}> {
 }
 
 let AppendingListItemCount = 6;
-class AppendingList extends React.Component<
-  {},
-  {items: Array<ExactReactElement_DEPRECATED<Class<Item>>>},
-> {
-  state: {items: Array<ExactReactElement_DEPRECATED<Class<Item>>>} = {
-    items: [...Array(AppendingListItemCount)].map((_, ii) => (
-      <Item msg={`Item ${ii}`} />
-    )),
-  };
-  render(): React.Node {
-    return (
-      <View>
-        <ScrollView
-          automaticallyAdjustContentInsets={false}
-          maintainVisibleContentPosition={{
-            minIndexForVisible: 0,
-            autoscrollToTopThreshold: 10,
+
+type ItemInfo = {
+  id: number,
+  paddingTop?: number,
+  paddingBottom?: number,
+};
+
+function AppendingList(): React.Node {
+  const [changeAtId, setChangeAtId] = useState('1');
+  const [items, setItems] = useState<Array<ItemInfo>>(() =>
+    [...Array(AppendingListItemCount)].map((_, ii) => ({
+      id: ii,
+    })),
+  );
+
+  const renderItem = (item: ItemInfo, horizontal: boolean) => (
+    <Item
+      key={item.id}
+      msg={`Item ${item.id}`}
+      // When changing an item's height, its top position should stay fixed
+      // rather than its bottom. This used to not be the case with negative
+      // zIndex.
+      zIndex={-item.id}
+      style={
+        horizontal
+          ? {
+              paddingLeft: item.paddingTop,
+              paddingRight: item.paddingBottom,
+            }
+          : {
+              paddingTop: item.paddingTop,
+              paddingBottom: item.paddingBottom,
+            }
+      }
+    />
+  );
+
+  return (
+    <View>
+      <ScrollView
+        automaticallyAdjustContentInsets={false}
+        maintainVisibleContentPosition={{
+          minIndexForVisible: 0,
+          autoscrollToTopThreshold: 10,
+        }}
+        nestedScrollEnabled
+        style={styles.scrollView}>
+        {items.map(item => renderItem(item, false))}
+      </ScrollView>
+      <ScrollView
+        horizontal={true}
+        automaticallyAdjustContentInsets={false}
+        maintainVisibleContentPosition={{
+          minIndexForVisible: 1,
+          autoscrollToTopThreshold: 10,
+        }}
+        style={[styles.scrollView, styles.horizontalScrollView]}>
+        {items.map(item => renderItem(item, true))}
+      </ScrollView>
+      <View style={styles.row}>
+        <Button
+          label="Add to top"
+          onPress={() => {
+            setItems(prevItems => {
+              const idx = AppendingListItemCount++;
+              return [{id: idx, paddingTop: idx * 5}, ...prevItems];
+            });
           }}
-          nestedScrollEnabled
-          style={styles.scrollView}>
-          {this.state.items.map(item =>
-            // $FlowFixMe[prop-missing] React.Element internal inspection
-            cloneElement(item, {key: item.props.msg}),
-          )}
-        </ScrollView>
-        <ScrollView
-          horizontal={true}
-          automaticallyAdjustContentInsets={false}
-          maintainVisibleContentPosition={{
-            minIndexForVisible: 1,
-            autoscrollToTopThreshold: 10,
+        />
+        <Button
+          label="Remove top"
+          onPress={() => {
+            setItems(prevItems => prevItems.slice(1));
           }}
-          style={[styles.scrollView, styles.horizontalScrollView]}>
-          {this.state.items.map(item =>
-            // $FlowFixMe[prop-missing] React.Element internal inspection
-            cloneElement(item, {key: item.props.msg, style: null}),
-          )}
-        </ScrollView>
-        <View style={styles.row}>
-          <Button
-            label="Add to top"
-            onPress={() => {
-              this.setState(state => {
-                const idx = AppendingListItemCount++;
-                return {
-                  items: [
-                    <Item style={{paddingTop: idx * 5}} msg={`Item ${idx}`} />,
-                  ].concat(state.items),
-                };
-              });
-            }}
-          />
-          <Button
-            label="Remove top"
-            onPress={() => {
-              this.setState(state => ({
-                items: state.items.slice(1),
-              }));
-            }}
-          />
-          <Button
-            label="Change height top"
-            onPress={() => {
-              this.setState(state => ({
-                items: [
-                  cloneElement(state.items[0], {
-                    style: {paddingBottom: Math.random() * 40},
-                  }),
-                ].concat(state.items.slice(1)),
-              }));
-            }}
-          />
-        </View>
-        <View style={styles.row}>
-          <Button
-            label="Add to end"
-            onPress={() => {
-              this.setState(state => ({
-                items: state.items.concat(
-                  <Item msg={`Item ${AppendingListItemCount++}`} />,
-                ),
-              }));
-            }}
-          />
-          <Button
-            label="Remove end"
-            onPress={() => {
-              this.setState(state => ({
-                items: state.items.slice(0, -1),
-              }));
-            }}
-          />
-          <Button
-            label="Change height end"
-            onPress={() => {
-              this.setState(state => ({
-                items: state.items.slice(0, -1).concat(
-                  cloneElement(state.items[state.items.length - 1], {
-                    style: {paddingBottom: Math.random() * 40},
-                  }),
-                ),
-              }));
-            }}
-          />
-        </View>
+        />
+        <Button
+          label="Change height top"
+          onPress={() => {
+            setItems(prevItems => {
+              if (prevItems.length === 0) {
+                return prevItems;
+              }
+              const [first, ...rest] = prevItems;
+              return [{...first, paddingBottom: Math.random() * 40}, ...rest];
+            });
+          }}
+        />
       </View>
-    );
-  }
+      <View style={styles.row}>
+        <Button
+          label="Add to end"
+          onPress={() => {
+            setItems(prevItems => {
+              const idx = AppendingListItemCount++;
+              return [...prevItems, {id: idx}];
+            });
+          }}
+        />
+        <Button
+          label="Remove end"
+          onPress={() => {
+            setItems(prevItems => prevItems.slice(0, -1));
+          }}
+        />
+        <Button
+          label="Change height end"
+          onPress={() => {
+            setItems(prevItems => {
+              if (prevItems.length === 0) {
+                return prevItems;
+              }
+              const last = prevItems[prevItems.length - 1];
+              return [
+                ...prevItems.slice(0, -1),
+                {...last, paddingBottom: Math.random() * 40},
+              ];
+            });
+          }}
+        />
+      </View>
+      <View style={styles.row}>
+        <TextInput
+          keyboardType="number-pad"
+          onChangeText={setChangeAtId}
+          placeholder="Id"
+          style={styles.indexInput}
+          value={changeAtId}
+        />
+        <Button
+          label="Change height at id"
+          onPress={() => {
+            const id = parseInt(changeAtId, 10);
+            if (Number.isNaN(id)) {
+              return;
+            }
+            setItems(prevItems =>
+              prevItems.map(item =>
+                item.id === id
+                  ? {...item, paddingBottom: Math.random() * 40}
+                  : item,
+              ),
+            );
+          }}
+        />
+      </View>
+    </View>
+  );
 }
 
 function CenterContentList(): React.Node {
@@ -436,7 +475,9 @@ const examples: Array<RNTesterModuleExample> = [
     title: '<ScrollView> smooth bi-directional content loading\n',
     description:
       'The `maintainVisibleContentPosition` prop allows insertions to either end of the content ' +
-      'without causing the visible content to jump. Re-ordering is not supported.',
+      'without causing the visible content to jump. Re-ordering is not supported. Items use ' +
+      'inverted z-index values so Fabric may reorder native children; the anchor should still ' +
+      'be the topmost visible item, not whichever child happens to appear first in the hierarchy.',
     render() {
       return <AppendingList />;
     },
@@ -1477,10 +1518,12 @@ function ChildrenWithTouchEventsOverflowingContainerHorizontal() {
 class Item extends React.PureComponent<{
   msg?: string,
   style?: ViewStyleProp,
+  zIndex?: number,
 }> {
   render(): $FlowFixMe {
     return (
-      <View style={[styles.item, this.props.style]}>
+      <View
+        style={[styles.item, this.props.style, {zIndex: this.props.zIndex}]}>
         <Text>{this.props.msg}</Text>
       </View>
     );
@@ -1537,6 +1580,17 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-around',
   },
+  indexInput: {
+    alignSelf: 'center',
+    backgroundColor: '#ffffff',
+    borderColor: '#cccccc',
+    borderRadius: 3,
+    borderWidth: 1,
+    flex: 1,
+    margin: 5,
+    padding: 5,
+    textAlign: 'center',
+  },
   item: {
     margin: 5,
     padding: 5,