WindowedListView lags on scroll up on Android

[sibelius]

Description

I've implemented a List of Items using WindowedListView

<WindowedListView
          data={values}
          renderRow={this.renderCell}
          initialNumToRender={10}
          onEndReached={this.handleOnEndReached}
          maxNumToRender={30}
          numToRenderAhead={20}
          viewablePercentThreshold={50}
          renderWindowBoundaryIndicator={this.renderWindowBoundaryIndicator}
          />

it works fine on iOS, but it lags a lot on Android.

this is a video of the bug: https://youtu.be/aFDBJU93b-o

it takes a lot of time to rerender the row when we scroll up, and it waits one row to be rendered after another.

this do not happen on ios

Additional Information

• React Native version: 0.39.2
• Platform: Android
• Operating System: MacOS

[sibelius]

I figure it out that WindowedListView uses contentInset prop of ScrollView here:

react-native/Libraries/Experimental/WindowedListView.js

Line 531 in 942b933

const contentInset = {top: firstRow === 0 ? 0 : -spacerHeight};

that only works on iOS

I've tried to replace it to use contentContainerStyle as described here #2914 (comment) by @satya164,

but it did not work

any ideas of how can I fix this for android?

[satya164]

@sibelius it works for that use case, but it's not quite the same.

[bharath-kamath]

@sibelius Did you manage to fix the scroll issue?

[sibelius]

No, I've migrated to FlatList

But it also has the same problem with the list has a bunch of rows

[bharath-kamath]

@sibelius Please reopen this issue as its still not fixed.

[sibelius]

@bharath-kamath I recommend to move to FlatList instead of using WindowedListView,

and open another issue if you have the same problem with FlatList