Infinite scroll with items with different size

Current behavior

When onEndReached callback execute and new items are being added to the list, we see content jumping (list is shifting to top or bottom automatically)

Expected behavior

When onEndReached callback execute and new items are being added to the list, list must stay at the same place where it was before new items were added

To Reproduce

Let say average item height is 100 and floating in size is between 100-200. Also I’ve sighted that shifting is more agressive when renderItem contains complecated components, for example 10 Views, 1 ImageView and 3 TextViews, and also when scrolling is fast

https://user-images.githubusercontent.com/60893275/195725090-885ceb55-b6cf-4d4c-a07d-1bf8db1b3d23.mp4

import React, { useState } from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { FlashList } from '@shopify/flash-list';
import { chunk, range } from 'lodash';

const ITEMS = range(1000);
const CHUNKS = chunk(ITEMS, 20);

export const Screen = () => {
  const [page, setPage] = useState(1);
  const [data, setData] = useState(CHUNKS[0]);

  const renderItem = ({ item }) => {
    return (
      <View style={{ height: 100 + Math.random() * 100 }}>
        <View style={styles.item}>
          <Text>Item index {item}</Text>
        </View>
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.flex}>
      <FlashList
        data={data}
        estimatedItemSize={100}
        renderItem={renderItem}
        onEndReached={() => {
          setData((prev) => [...prev, ...CHUNKS[page]]);
          setPage((prev) => prev + 1);
        }}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  flex: { flex: 1 },
  item: {
    flex: 1,
    backgroundColor: 'aqua',
    margin: 20,
    borderRadius: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Platform:

• iOS
• Android

Environment

  "react": "18.0.0"
  "react-native": "0.69.1"
  "@shopify/flash-list": "^1.3.0"

[Navipro70]

Sorry, I’ve not seen that Math.random() is recalculate height for every rerender, but I had this bug with real server and layout (without random), and after some hours of researching, I saw that my requests and data storing are not correct, with valid data it works fine. I close the issue, thanks for the lib!

[Navipro70]

@joesermon Hello, I think trouble has been RTK-Query in my case, maybe it’s convert data wrongly.