BorderWidth is causing laggy experience in android when you render it inside FlatList or ScrollView

[nateblog]

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.

[react-native-bot]

We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

Please make use of the bug report template to let us know about a reproducible bug or regression in the core React Native library.

If you'd like to propose a change or discuss a feature request, there is a repository dedicated to Discussions and Proposals you may use for this purpose.