Inverted Flatlist(VirtualizedList) with specific conditions in Web has rendering problem.

[shine784]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Flatlist(VirtualizedList) has problem specific conditions in Web
This list rendered the wrong range of index items, Sometimes It is rendered again constantly

• only web, not includes IOS and Android

1. Inverted : true
2. renderItems height type is Number (not flex)

React Native version:

"0.62.1",

Steps To Reproduce

1. Just scroll up the list
2. If you scroll up to near by 70~80 , you can see the malfunction

Code Line makes the wrong calculations

react-native\Libraries\Lists\VirtualizeUtils.js

...
const leadFactor = 0.5; // Math.max(0, Math.min(1, velocity / 25 + 0.5));

  const fillPreference =
    velocity > 1 ? 'after' : velocity < -1 ? 'before' : 'none';

  const overscanBegin = Math.max(0,visibleBegin - (1 - leadFactor) * overscanLength, );
  const overscanEnd = Math.max(0, visibleEnd + leadFactor * overscanLength);

  const lastItemOffset = getFrameMetricsApprox(itemCount - 1).offset;
  if (lastItemOffset < overscanBegin) {
    // Entire list is before our overscan window
    return {
      first: Math.max(0, itemCount - 1 - maxToRenderPerBatch),
      last: itemCount - 1,
    };
  }
...

leadFactor(0.5) is not suitable value with some conditions
this makes the overscanBegin value bigger than 0
so It cause the wrong retern with wrong first, last

Expected Results

normal operation

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/@kunhee_lee/kunhee_lee_test

[safaiyeh]

Hi @shine784 thanks for the issue. Unfortunately this repo does not maintain the web implementation of React Native. Could you make an issue with react-native-web?

[shine784]

Hi @shine784 thanks for the issue. Unfortunately this repo does not maintain the web implementation of React Native. Could you make an issue with react-native-web?

sure, thank you

[necolas]

This isn't a problem with the web implementation per se, because it's using the exact same code as the RN implementation.

[CoinCoderBuffalo]

I am seeing the same issue using an inverted SectionList w/ react native web. Once I scroll up to around 70 rows of data it malfunctions and renders the incorrect range (starts again from beginning). In my case it doesn't matter if the renderItem has a height or is flexed, same issue occurs.

As a temporary workaround I am doing this:

<SectionList
  ...
  disableVirtualization={Platform.OS == "web"}
/>

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.