onScroll not triggering react native android

Hi,

I added onScroll event to RecyclerListView to implement collapsible navbar. Buth the OnScroll prop is not triggering. Below is the code

<RecyclerListView
         layoutProvider={this._layoutProvider} 
         dataProvider={this.state.dataProvider} 
         rowRenderer={this._rowRenderer} 
         onEndReached={() => this.handleLoadMore()}
         onEndReachedThreshold={0.1}
         renderFooter={this.renderFooter}
         refreshControl={<RefreshControl
         refreshing={this.state.refreshing}
         onRefresh={this._onRefresh.bind(this)}          
         showsVerticalScrollIndicator={false}  
         contentContainerStyle={{paddingTop: NAVBAR_HEIGHT}}         
         onscroll={Animated.event(
          [{nativeEvent: {contentOffset: {y: this.scroll}}}],
          {useNativeDriver: true},
)}
 
       />

[naqvitalha]

onScroll gets overridden by RLV internally. If you look at the contract that @AbdallaMohamed mentioned you cannot pass an Animated.event value. You however can extend a ScrollView on your own to achieve this. Look at the following:

class ExtendedScrollView extends BaseScrollView {
     render() {
        return <ScrollView onScroll={Animated.event([this.props.animatedEvent], {listener: this.props.onScroll}} />
     }
}
//While creating RLV
<RecyclerListView {...yourProps} externalScrollView={ExtendedScrollView} animatedEvent={{nativeEvent: {contentOffset: {y: this.scroll}}}} />

This should work. Try it.

[pijusz]

Hi, I have created collapsible header with these examples using react-native standard Animated library. I want to switch to react-native-reanimated, but I’m facing a problem, that onEndReached is no longer triggering. My guess there is a conflict with reanimated’s Animated.ScrollView, any tips in fixing/debugging this issue?