V2: MVCP not adjusting position when item above changes layout

[hannojg]

Current behavior

• List with items
• maintainVisibleContentPosition active
• An item is aligned to the top edge of the list (ie. initialScrollIndex or user scrolled there)
• A react update changes one of the items above the current top item to change its height
• The item we were previously scrolled to doesn't stay in position, or it does but there is a flickering

Repro in fixture	In a production app
ScreenRecording_08-04-2025.21-54-59_1.MP4	CleanShot.2025-08-04.at.22.27.00.mp4

In the video from the production app we can see how:

1. We click on the image with the glass, however on the first frame we aren't scrolled to the right position
2. On the second frame the image with the glass is correctly positioned
3. On the third frame the item above the glass has changed its height and we can see how the glass image got pushed down
4. On the forth frame the glass image is back its correct position

Expected behavior

When using maintainVisibleContentPosition and initialScrollIndex there should be no erratic flickering.

To Reproduce

https://github.com/margelo/flash-list/tree/reproduction-scroll-mvcp-issue

• Specifically: https://github.com/margelo/flash-list/blob/reproduction-scroll-mvcp-issue/fixture/react-native/src/MVCPExample.tsx

Note: this is not reproducible with a plain React Native ScrollView.

Platform:

• iOS
• Android (Potentially android as well, haven' tested yet)

Environment

2.0.1

[naqvitalha]

Thanks for reporting this issue. I might not be able to get to it this week but it'll be on my list for next week.

[naqvitalha]

@hannojg I looked into the sample you provided. The primary issue is the lack of keyExtractor on the list. We don't do offset corrections without stable ids on items. Once I added it, it works fine. You might see a small flicker due to async resize and that can be solved by using useRecyclingState or useLayoutState. Since you were using a store in the sample, I ended up doing this:

  const updateAncestorHeight = useStore((state) => state.updateAncestor);
+  const flashListContext = useFlashListContext();

+  useLayoutEffect(() => {
+    flashListContext?.layout();
+  }, [height]);

This makes it work perfectly. There's nothing to change in FlashList, we already had a way to manually request layout for these scenarios. Let me know if this solves the problem. We'll be able to close the issue then.