React-native-reanimated: FlatList onScroll event

[davx1992]

Hello All,
I have an issue that when I use FlatList to create horizontal scroll I need to listen for OnScroll event.
When I mapping Native event with event() I receive error that I need to add Animated prefix to FlatList to use event(), however then I receive error:
Invariant violation: element type is invalid: expect a string or class/function but got undefined.

Does FlatList is working in reanimated? When I changed FlatList to ScrollView it worked with Animated.ScrollView .
Do we have any working example with OnScroll and FlatList?

[terrysahaidak]

Hi @davx1992. react-native-reanimated does not provide an Animated FlatList, but it provides the ScrollView component, so you can use renderScrollComponent to provide an Animated ScrollView to your FlatList:

<FlatList 
  {...props}
  renderScrollComponent={(props) => <ScrollView {...props} onScroll={(evt) => {
    console.log(evt);
  }} />}
/>

[davx1992]

Thank you @terrysahaidak, will try with your example.

[Daavidaviid]

I can't make it works, it's like the renderScrollComponent prop is not called.

[MoeMamdouh]

It doesn't work with me too

[terrysahaidak]

Hi @MoeMamdouh, could you provide a snack or some sample code, please?

[CoryWritesCode]

I have an Animated.createAnimatedComponent(FlatList) and it doesn't seem to be firing the onScroll={({ nativeEvent }) => console.log(nativeEvent)}

Adding a Animated.ScrollView to renderScrollComponent allows it to fire now but the reason I wanted a flatlist is for it's performance properties in the first place so making the scroll component a scroll view kinda defeats the purpose.

[jakub-gonet]

@CoryWritesCode, please provide a small repro we can test it on.