Blank area when scrolling fast

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

[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

[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.