blank area always showing on each scroll

[hotaryuzaki]

Current behavior

i create an Explore page like Instagram, but with the same size for all images.
the issue is similar with this, but it is worse if the list contains an image.
if i change to flatlist, there is no more blank area but less performance

is it possible because of the Key props?
the problem is that when i remove the key props, the image order changes.

Expected behavior

"No more blank cells" as advertised

To Reproduce

just using this code

  const renderItem = useCallback(({ index, item }) => {
    const checkedIndex = imageChecked.findIndex((checkedItem) => checkedItem.id == item.id);

    return (
      <RenderItem
        key={`${index}-${item.id}`}
        index={index}
        item={item}
        onPress={_onPressCheckbox}
        selectedAlbum={selectedAlbum}
        checkedIndex={checkedIndex != -1 ? true : false}
      />
    );

  }, [photos, imageChecked]);

              <FlashList
                numColumns={3}
                data={photos}
                extraData={imageChecked}
                renderItem={renderItem}
                ListFooterComponent={renderFlatListFooter}
                estimatedItemSize={200}
                onEndReached={_handleLoadMore}
                onEndReachedThreshold={0.3}
                onMomentumScrollBegin={() => onEndReachedCalledDuringMomentum = false}
                drawDistance={Layout.window.height * 5}
              />

Platform:

• iOS
• Android

Environment

System:
OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
Memory: 5.70 GB / 15.55 GB
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.13.2/bin/yarn
npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
Watchman: 20220123.190932.0 - /usr/local/bin/watchman
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 11.0.18 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: ^0.70.7 => 0.70.7
npmGlobalPackages:
react-native: Not Found

[fortmarek]

Refer to the docs. For example, you shouldn't include a key in your component.

[mickdewald]

But when I remove the key, the sort order changes during scroll.
When I scroll down and the back-up, suddenly the items have been rearranged

[hotaryuzaki]

But when I remove the key, the sort order changes during scroll. When I scroll down and the back-up, suddenly the items have been rearranged

Yes we have same issue like I stated above, if we remove the key the images rearranged

[mohamed2m2018]

Have the same issue

[vishal-nayak07]

Facing the same issue. i am using @shopify/flash-list version 1.5.0 in my react native app.

#854 (comment)

[dippathak1912]

Have the same issue.

"@shopify/flash-list": "^1.5.0",
"react-native": "^0.70.1",
"react": "18.1.0"

Is there any way out of this? Issue is closed but still facing it.