The FlatList jumps while scrolling

[valery-lavrik]

Description

I am developing in windows for android

I have built a column of images in the FlatList. Many have different sizes.
but during scrolling, something goes wrong, and the list jumps to a certain place. I've recorded a video, and I'm attaching it to the message.

Steps to reproduce

I have created a repository where I can test the problem myself.

React Native Version

0.76.5

Affected Platforms

Runtime - Android

Output of npx react-native info

npx react-native info
info Fetching system and libraries information...
(node:1516) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
System:
  OS: Windows 11 10.0.22631
  CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-13620H
  Memory: 2.99 GB / 15.71 GB
Binaries:
  Node:
    version: 22.11.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 10.9.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-241.15989.150.2411.11948838
  Visual Studio: Not Found
Languages:
  Java:
    version: 17.0.11
    path: /c/Program Files/Microsoft/jdk-17.0.11.9-hotspot/bin/javac
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: 0.76.5
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

import React from 'react';
import { FlatList, Dimensions, Image } from 'react-native';


export default function App() {

    const IMAGES = [ { "id": 54760676, "url": "https://img.com-x.life/comix/17767/610982/1733835303.7601.jpg", "headers": { "Referer": "https://com-x.life/" }, "cache_key": "2818811-0", "width": 1200, "height": 1845, "index": 0 }, { "id": 54760677, "url": "https://img.com-x.life/comix/17767/610982/1733835304.6572.jpg", "headers": { "Referer": "https://com-x.life/" }, "cache_key": "2818811-0", "width": 1200, "height": 1845, "index": 1 }, { "id": 54760678, "url": "https://img.com-x.life/comix/17767/610982/1733835305.5284.jpg", "headers": { "Referer": "https://com-x.life/" }, "cache_key": "2818811-0", "width": 1200, "height": 1845, "index": 2 } ];

    const W = Dimensions.get('screen').width;
    const initialScrollIndex = 20;

    const gettSizeOfTheImageToTheScreen = (item) => parseInt(((W / item.width) * item.height), 10)

    return (
        <FlatList
            data={IMAGES}
            initialNumToRender={3}
            maxToRenderPerBatch={2}
            initialScrollIndex={initialScrollIndex}
            keyExtractor={(item) => `${item.id}`}
            getItemLayout={(data, index) => {
                const ITEM_HEIGHT = gettSizeOfTheImageToTheScreen(data[index]);
                return { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index }
            }}
            renderItem={({ item }) => (
                <Image
                    style={{
                        width: W,
                        height: gettSizeOfTheImageToTheScreen(item),
                        resizeMode: 'contain',
                    }}
                    source={{
                        uri: item.url,
                        headers: item.headers,
                    }}
                />
            )}
        />
    );
}

Reproducer

https://github.com/valery-lavrik/flatlist_test

Screenshots and Videos

output.compress-video-online.com.mp4

[ralph1233]

`export default function App() {
const W = Dimensions.get('window').width;
const initialScrollIndex = 20;

const gettSizeOfTheImageToTheScreen = item =>
parseInt((W / item.width) * item.height, 10);

// Calculate cumulative heights using useMemo
const cumulativeHeights = React.useMemo(() => {
return IMAGES.reduce((acc, item, index) => {
const currentHeight = gettSizeOfTheImageToTheScreen(item);
acc.push((acc[index - 1] || 0) + currentHeight); // Add current height to the previous sum
return acc;
}, []);
}, [IMAGES, W]);

// Function to get cumulative height of all images up to the given index
const gettSizeOfAllImagesToTheScreen = index =>
cumulativeHeights[index - 1] || 0; // Return 0 for index 0

return (
<FlatList
data={IMAGES}
initialNumToRender={3}
maxToRenderPerBatch={2}
initialScrollIndex={initialScrollIndex}
keyExtractor={item => ${item.id}}
getItemLayout={(data, index) => {
const ITEM_HEIGHT = gettSizeOfTheImageToTheScreen(data[index]);

    return {
      length: ITEM_HEIGHT,
      offset: gettSizeOfAllImagesToTheScreen(index),
      index,
    };
  }}
  renderItem={({item}) => (
    <Image
      style={{
        width: W,
        height: gettSizeOfTheImageToTheScreen(item),
        resizeMode: 'contain',
      }}
      source={{
        uri: item.url,
        headers: item.headers,
      }}
    />
  )}
/>

);
}
`

[valery-lavrik]

Thank you very much! it worked, I didn't think it could be a problem...