search

Shopify / flash-list

A better list for React Native
https://shopify.github.io/flash-list/
MIT License
5.51k stars 283 forks source link

React Native FlashList Flickering #934

Open nawafthedistance opened 1 year ago

nawafthedistance commented 1 year ago

Current behavior

Lists I implemented with FlashList are flickering when any state on the screen changes. Just swtiching from FlashList to FlatList fixes the issue. Attaching FlashList (flickering) & FlatList (non-flickering) recordings.

https://github.com/Shopify/flash-list/assets/106528931/3214a2c4-e23e-411a-9b0c-c73c7515ee0a

https://github.com/Shopify/flash-list/assets/106528931/18161ae6-b5c7-4b26-81c6-a42bf2b3605f

Code of one of the lists

<FlashList data={dummyInfoData} keyExtractor={(item, index) => item?.title + index} renderItem={({item}) => ( <InfoListCard title={item?.title} iconAndDescriptionList={item?.iconAndDescriptionList} /> )} ItemSeparatorComponent={item => ( <Spacer vertical size={15} testID={${testID}.infoTab.spacer} /> )} />

Platform:

Environment

@shopify/flash-list@^1.5.0 react-native@0.71.13

sathish123345 commented 12 months ago

If you have any Math.random function in the renderItem component it will lead to flickering

nduyvu1511 commented 6 months ago

That happens because you are using the estimatedItemSize prop, but defining a number smaller than what the view should draw.

marcusnunes89 commented 5 months ago

I have the same issue. In my case, I need to update the state because I'm changing the number of columns in the list. Any ideas on how to improve this?

aqigif commented 5 months ago

i experience the same way :

i am using

any idea how to solve it?

young-st511 commented 5 months ago

I think I fixed it. I just added the estimatedListSize prop to FlashList. It seems that FlashList didn't know its initial size in some cases.