Blank area when scrolling fast

[phantrungviet98]

Current behavior

• Display blank area when scrolling fast.

aa.webm

Expected behavior

• No blank when scrolling fast

To Reproduce

Please try the code

const App: () => Node = () => {
  const [list, setList] = useState([])

  useEffect(() => {
     fetch('https://api.coinpaprika.com/v1/tickers').then(data => {
      data.json().then(jsonData => {
        setList(jsonData)
      })
    })
  }, [])

  return (
    <View style={{flex: 1}}>
      <FlashList estimatedItemSize={19.4} renderItem={({item, index}) => <Text>{item.name}</Text>} data={list} />
    </View>
  );
};

Platform:

• iOS
• Android

Environment

1.3.0

[naqvitalha]

Can you mention the device being used and whether Dev mode was off?

[phantrungviet98]

@naqvitalha
Yes,

• Dev mode was off
• I was using Emulator: Pixel 2 API 29. it happen to my ios device/simulator also when i scroll fast enough. And anyone in my team can also see the blank on android real devices - Release mode.

Actually, it will be more visible on low end device

[wcandillon]

I created a snack for the issue at https://snack.expo.dev/@wcandillon/flashlist-test and it seems to work fine. Should I try it on a very low-end device? is it related to the power of the device?

[shrihari1999]

The uploaded video shows 50-100% of the screen to be blank.

I tried the created snack on two devices, and here are the results

1. Android Moto g7 plus
The first time around, 20-30% of the screen was white. But after that, no matter how fast i scroll there was no issue. Maybe it caches things somehow? Idk.

2. iPhone X
Couldn't reproduce despite great effort.

Maybe the process of screen recording slows down the phone too much to exacerbate the issue?

[naqvitalha]

@phantrungviet98 I tried it on Moto G10. Here's the result: https://user-images.githubusercontent.com/7811728/193417131-2d39ad46-67c7-4611-9cf8-b12995f1d216.mp4

It's possible that something could be wrong in your app or emulator. Anything above Snapdragon 625 shouldn't be a problem. It's difficult to debug specific instances without a repro. We always test on low end devices by default.
If you can't find the problem you can try playing with drawDistance.

[phantrungviet98]

Thanks @wcandillon @shrihari1999 @naqvitalha for reply.

From my side, the more slow device, the more fast scroll, the more heavily component, then more visible the blank.
i tested it on Xiaomi Redmi Note 10 - Snapdragon 678
List item has 1 text and SVGUri. Please check my video

4546098435929163243.mp4

[naqvitalha]

@phantrungviet98 Yeah, it's important to optimize the component. There are still compute limitations, if the component is too slow to update then you can have blank space. In your new example, most likely the SVG is too slow to update. Check your JS FPS.

[phantrungviet98]

@naqvitalha Thank you for answer, i think i need to optimize the component

[naqvitalha]

Let us know how it goes. I'm going to close this in the meantime.

[VanThanhHoang]

c

[lucasmachadoalvino]

+1

[shivo-ham]

+2