Merge pull request #88321 from callstack-internal/VickyStash/bugfix/maintainVisibleContentPosition-fix

[CP Staging] Fix `maintainVisibleContentPosition` behaviour after migration to FlashList

(cherry picked from commit 9b253b7)

(cherry-picked to staging by AndrewGable)

Author: mountiny

src/components/FlashList/InvertedFlashList/index.tsx

@@ -20,7 +20,7 @@ type InvertedFlashListProps<T> = FlashListProps<T> & {
 };
 
 function InvertedFlashList<T>({data, keyExtractor, initialScrollKey, onStartReached: onStartReachedProp, ...restProps}: InvertedFlashListProps<T>) {
-    const {displayedData, onStartReached} = useFlashListScrollKey<T>({
+    const {displayedData, onStartReached, maintainVisibleContentPosition} = useFlashListScrollKey<T>({
         data,
         keyExtractor,
         initialScrollKey,
@@ -36,6 +36,7 @@ function InvertedFlashList<T>({data, keyExtractor, initialScrollKey, onStartReac
             data={displayedData}
             keyExtractor={keyExtractor}
             CellRendererComponent={CellRendererComponent}
+            maintainVisibleContentPosition={maintainVisibleContentPosition}
         />
     );
 }

src/components/FlashList/useFlashListScrollKey.ts

@@ -17,26 +17,36 @@ type FlashListScrollKeyProps<T> = {
 
 export default function useFlashListScrollKey<T>({data, keyExtractor, initialScrollKey, onStartReached}: FlashListScrollKeyProps<T>) {
     const [isInitialRender, setIsInitialRender] = useState(true);
+    const [hasLinkingSettled, setHasLinkingSettled] = useState(!initialScrollKey);
 
-    // After the first render with sliced data, give FlashList one frame to lay out,
-    // then switch to the full data array. maintainVisibleContentPosition keeps the target pinned.
+    // Two-frame handoff for deep-link:
+    // RAF 1: switch from sliced data to the full array — FlashList's default MVCP pins the
+    //        linked item through the data swap.
+    // RAF 2: pinning has happened, disable MVCP so it doesn't cause later jumps.
     useEffect(() => {
         if (!isInitialRender || !initialScrollKey) {
             return;
         }
-        requestAnimationFrame(() => setIsInitialRender(false));
+        requestAnimationFrame(() => {
+            setIsInitialRender(false);
+            requestAnimationFrame(() => setHasLinkingSettled(true));
+        });
     }, [isInitialRender, initialScrollKey]);
 
+    // `undefined` = leave FlashList's default (MVCP enabled) while we're still pinning the linked item.
+    // `{disabled: true}` once that's done so MVCP can't interfere afterward.
+    const maintainVisibleContentPosition: FlashListProps<T>['maintainVisibleContentPosition'] = hasLinkingSettled ? {disabled: true} : undefined;
+
     if (!isInitialRender || !initialScrollKey) {
-        return {displayedData: data, onStartReached};
+        return {displayedData: data, onStartReached, maintainVisibleContentPosition};
     }
 
     const targetIndex = data.findIndex((item, index) => keyExtractor(item, index) === initialScrollKey);
     if (targetIndex <= 0) {
-        return {displayedData: data, onStartReached};
+        return {displayedData: data, onStartReached, maintainVisibleContentPosition};
     }
 
     // On the first render, slice from the target onward so the target item
     // appears at the visual bottom of the inverted list — no scrolling needed.
-    return {displayedData: data.slice(targetIndex), onStartReached: () => {}};
+    return {displayedData: data.slice(targetIndex), onStartReached: () => {}, maintainVisibleContentPosition};
 }