Blank item on fast scroll

[umardev500]

The docs say this faster then flashlist but honestly this is slower that it am i wrong

import {LegendList, LegendListRenderItemProps} from '@legendapp/list';
import {ReactNode} from 'react';
import {Text, View} from 'react-native';

export const SurahScreen = () => {
  const dummyArray = Array.from({length: 114}, (_, index) => index + 1);
  const renderItem = ({item}: LegendListRenderItemProps<number>) => {
    return (
      <View
        style={{
          height: 90,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'darkred',
          marginVertical: 16,
        }}>
        <Text style={{color: 'white'}}>{item}</Text>
      </View>
    );
  };

  return (
    <LegendList
      initialScrollIndex={50}
      initialNumContainers={10}
      recycleItems
      data={dummyArray}
      renderItem={renderItem}
      estimatedItemSize={80}
    />
  );
};

[umardev500]

this unusable even after i add initial scroll index and then scrollling to top item that slow many blank item

[michbil]

@umardev500 Pls add maintainVisibleContentPosition prop to make initialScrollIndex work properly with dynamically-sized components

[umardev500]

@umardev500 Pls add maintainVisibleContentPosition prop to make initialScrollIndex work properly with dynamically-sized components

ill try

[umardev500]

@umardev500 Pls add maintainVisibleContentPosition prop to make initialScrollIndex work properly with dynamically-sized components

honestly i still get janky

[michbil]

@umardev500 Pls define janky, better with video, it's very subjective metric.

[michbil]

Regarding to the issue title "Blank item on fast scroll", I would not expect miracle from the LegendList, it will still blank, especially in developer mode, because it's still javascript View recycler library. If there is case where Legendlist is blanking much more then FlashList, that would be valid issue.

[jmeistrich]

Using paddingVertical: 16 instead of marginVertical: 16 may improve performance, but I haven't tested that specifically. You're also providing an estimatedItemSize (80) which is much smaller than the actual item size (122). Changing the estimate to match the actual size should improve performance significantly. I think that's the main scenario where FlashList could appear faster because of their native AutoLayout. You can add this prop to see what the actual rendered item size is so that you can set the estimate to it:

onItemSizeChanged={(info) => {
    console.log("item size changed", info);
}}