Fix image flash in WaterfallList
1 min read

Fix image flash in WaterfallList

While building a React Native app, I'm using the WaterfallList component in react-native-largelist, the best waterfall-style component out there.

However there's a small defect: if you scroll quickly through a long image list, the old images persist before the new ones finish loading, and causes a visual flash.

It's because the component is reusing list items for better performance. I tried to change the item layout to avoid the reusing, but it didn't work, then I found the lasest release note says you can speficy a key for the list item to disable reusing, which is missing in the document.

For example:

<WaterfallList
    style={styles.waterfall}
    data={this.state.waterfallData}
    heightForItem={item => 200 }
    preferColumnWidth={150}
    numColumns={2}
    renderItem={({item, index}) => <View key={index} />}
/>