For 2 days I am struggling why my flatlist and scrollview has laggy feelings, did all the optimization settings suggested from different blogs but everything does not work. The laggy experience is all there.
Did some trial and error on my design and finally figured out. Here is my sample code:
<FlatList
horizontal={false}
initialNumToRender={20}
showsVerticalScrollIndicator={false}
numColumns={2}
bounces={true}
keyExtractor={(item) => item[0]}
data={Object.entries(data)}
renderItem={this.renderItem}
/>
renderItem(data) {
return (
<View style={{
marginLeft: 3,
borderRadius: 360,
flexWrap: 'wrap',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: height * .10,
width: height * .35,
backgroundColor: '#32C5A4',
borderWidth: 1, **// THIS IS THE ONE CAUSING THE LAGGY EXPERIENCE**
}}>
</View>
)
}
Whenever I comment out the borderWidth everything runs smoothly, enabling it back makes the user experience go bad. Is this a bug? Please help.
For 2 days I am struggling why my flatlist and scrollview has laggy feelings, did all the optimization settings suggested from different blogs but everything does not work. The laggy experience is all there.
Did some trial and error on my design and finally figured out. Here is my sample code:
Whenever I comment out the borderWidth everything runs smoothly, enabling it back makes the user experience go bad. Is this a bug? Please help.