BorderWidth is causing laggy experience in android when you render it inside FlatList or ScrollView #22221
Description
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.