Blank space still exists

[lekbit]

Perhaps the FlashList developers expect us to set a limit on scrolling at once, or is there something I don't know?

Current behavior

screenrecorder-2023-07-04-13-55-53-302.mp4

Expected behavior

Don't see blank space.

To Reproduce

import React from "react";
import { View, Text, StatusBar } from "react-native";
import { FlashList } from "@shopify/flash-list";

const DATA = [
  {
    title: "First Item",
  },
  {
    title: "Second Item",
  },
];

export default function MyList() {
  for (let index = 0; index < 500; index++) {
    DATA.push({
      title: "First Item" + index,
    })
  }
  return (
    <FlashList
      data={DATA}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      estimatedItemSize={200}
    />
  );
};

Platform:

• Android

Environment

"@shopify/flash-list": "^1.4.3"

[vagnerlandio]

FlashList expect a correct estimatedItemSize value based on the rendered item height

[lekbit]

FlashList expect a correct estimatedItemSize value based on the rendered item height

Now my values ​​are set correctly?

screen-recording.Ready.mp4

[SohelIslamImran]

I still couldn't use FlashList because of this issue. This experience is worse than FlatList.

[rokkoo]

Im also trying to fix this problem, let us know is you fix it or something, thanks!

[lekbit]

Alright, guys, I was wrong. Well, to be precise, it wasn't mentioned anywhere, but after compiling the release version of the project into bundle .abb file, I installed it on the phone, and it worked quite well.

flashLRecord.mp4

[coofzilla]

I'm having the same issue. built it on my phone and still had the blanks even with setting the estimatedItemSize to the exact height of the component to render.

However, in my case, I also have a component that takes up height but isn't actually visible until a certain action is performed. When I removed that, it worked fine; so, I'm not sure if the calculation of the height should include items that exist on the render but aren't physically present. To clarify, this hidden component just has an opacity of 0 until action then its 1.

[pavelustenko]

As far as I can see, the flashlist is good for lists with the same element height. If you have elements of different heights, then glitches and blanks begin when scrolling (mostly in release mode on low-end (Quallcom 4 cores, 4Gb ram) android phones). I couldnt get it fixed by guessing estimated size of even scroll decelleration.
:( So I went back to Flatlist.

[itajenglish]

+1

[lucasmachadoalvino]

+1

[iway1]

FlashList expect a correct estimatedItemSize value based on the rendered item height

No it doesn't (or it shouldn't according to docs). Docs specifically say "Doesn't have to be very accurate"

[dippathak1912]

Have the same issue.

"@shopify/flash-list": "^1.5.0",
"react-native": "^0.70.1",
"react": "18.1.0"

Is there any way out of this?

[zoobibackups]

I have created a contact list of about 1000 users. it has still issues in release versions. I have to create a release apk.

Screenrecorder-2024-01-02-15-09-05-126.mp4

[Med-Amine-Fredj]

+1

[orlynbsd]

under the hood they are using recyclerlistview from Flipkart
and have same issue

Flipkart/recyclerlistview#716

[ZaharGusyatin]

any solutions?

[csulit]

Same issue

[ZaharGusyatin]

say goodbye Shopify

[mahaaoo]

Any update?