ScrollView property 'onScroll' only fires once

user_7231581 0
Viewed 1480

I'm trying to get this extremely simple React Native (Expo) Code to work:

Inside my App.js:

return (
  <ScrollView
    scrollEventThrottle={16}
    onScroll={console.log("Scrolled")}>
    <Text style={{fontSize: 30}}>
      ...
    </Text>
  </ScrollView>
)

It seems as if onScroll would only be fired once when I'm first starting the App, but is not responding to actual scrolling. Any ideas on what could be blocking it?

(using Expo version 3.17.18)

expo react-native javascript
2 Answers

I'm guessing the way that the onScroll is written could be causing it to never trigger it more than once. Please try the following code (I would also recommend having an scrollEventThrottle of 400 or so, 16 will be triggered far too many times, but I wouldn't say that's the root of the current issue):

 return (
  <ScrollView
    scrollEventThrottle={16}
    onScroll={({nativeEvent}) => {console.log("Scrolled")}}>
    <Text style={{fontSize: 30}}>
      ...
    </Text>
  </ScrollView>
)
user_62315620

One of the main reason of this is not using scrollEventThrottle as I can see you have already used it. because you need to specify how often you want to get the scrolling information by passing an additional scrollEventThrottle props with a minimum value of 16 (to get the event every 16ms, which amounts to once for every frame in 60fps)

If you want to implement infinite scrolling you might be better of with a FlatList. Because the React Native Documentation says that ScrollViews are better for a small amount of items

user_40506010
Related