React Native FlashList Flickering

[nawafthedistance]

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.

Screen.Recording.2023-10-18.at.10.17.43.pm.mov

Screen.Recording.2023-10-18.at.10.19.09.pm.mov

Code of one of the lists

<FlashList
data={dummyInfoData}
keyExtractor={(item, index) => item?.title + index}
renderItem={({item}) => (

)}
ItemSeparatorComponent={item => (
<Spacer
vertical
size={15}
testID={${testID}.infoTab.spacer}
/>
)}
/>

Platform:

• iOS
• Android

Environment

@shopify/flash-list@^1.5.0
[email protected]

[sathish123345]

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

[nduyvu1511]

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

[marcusnunes89]

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]

i experience the same way :

i am using

• react-native-tab-view @ 3.5.2
• react-native 0.73.7 (new arch enabled)
• android
• @shopify/flash-list 1.6.4

any idea how to solve it?

[young-st511]

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.