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} />}
/>