React-native-web: FlatList onScroll never triggers

Created on 27 Nov 2020  路  8Comments  路  Source: necolas/react-native-web

The problem

When using FlatList's onScroll property it never triggers on Web, but triggers on Android and iOS. Even when setting scrollEventThrottle to 16 still never causes it to trigger.

How to reproduce

Simplified test case: https://snack.expo.io/GWLY9XaUD

Steps to reproduce:

  1. use FlatList
  2. Fill screen with elements
  3. set onScroll
    a. set scrollEventThrottle to 16 (iOS only)
    b. log something or do something
  4. Scroll
  5. Don't see the thing you wanted to occur happen

Expected behavior

When scrolling the onScroll callback for FlatList should be invoked.

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.13.7
  • React (version): 16.13.1
  • Browser: Chrome

Using Expo for both Android/iOS and Web

All 8 comments

Thanks, sorry about that I assumed the expo snack would display the same behavior. This leads me to believe the issue is with Expo then :+1:

Probably works fine there too. The value you're using to update state probably isn't changing on scroll

I don't believe so, comparing https://codesandbox.io/s/funny-ptolemy-9mi1n versus https://snack.expo.io/@nickhackman/flatlist-simple same code different host provider when scrolling yields a different result, at least on Linux Chrome 87. The value does change when scrolling as expected on codesandbox, but not on Expo web.

I've got the same issue with an expo bare project apparently and if I copy-paste the working example above from codesandbox to expo snack, it doesn't log on scroll on web (it logs correctly on native devices though).
I tried different expo, react, react-native and react-native-web versions, but I couldn't pinpoint the issue.
I keep investigating...

Did anyone manage to resolve this issue?

@necolas I have setup an app using create-react-app and only copied the code from codesandbox (no other change)
https://github.com/vishalnarkhede/rnw-flatlist-example

onScroll handler never gets called for some reason. On codesandbox it seems to work fine. Any hints?

You haven't looked at the index.html root elements styles. This is documented and has been covered many times

@necolas Thanks a ton for quick response!! Indeed I missed that part, my bad. Cheers ;)

Was this page helpful?
0 / 5 - 0 ratings