I have in the home screen 4 FlatList and it's work very well,
I render items as cards "Image, Name", I render items horizontally, it's work fine, but when I swipe to right/left I see some wired things like they get me back to the first item or render item previous another item "Some lag",
I don't know why! But when I delete horizontal
it works very well without any issues!
Does any Body have an explanation for this issue?
By The Way, I got Data from API, And it's large :)
Sample Code
class Home extends PureComponent {
.....
render() {
<View style={styles.container}>
<ScrollView>
<View style={{marginVertical: 10}}>
<FlatList
horizontal={true}
showsHorizontalScrollIndicator={false}
data={data.recent_tracks}
contentContainerStyle={{flexGrow: 1}}
ListEmptyComponent={<EmptyList />}
keyExtractor={(track, index) => track.id.toString()}
initialNumToRender={10}
renderItem={this._renderItem}
/>
</View>
</ScrollView>
</View>
....
}
}
I Got this in Log, Although I use PureComponent
and react-native-fast-image For Images
VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {dt: 1393, prevDt: 2471, contentLength: 3669.818115234375}