How execute this two OnScrolls?

Question

I'm following this tutorial https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a to create a navbar collapsed. Work's fine, but there's a problem, in this tutorial the autor set the props onscroll of the FlatList:

onScroll={Animated.event( [{ nativeEvent: { contentOffset: { y: this.state.scrollAnim } } }], { useNativeDriver: true },)}

But i already using this onScroll Props for:

onScroll={event => this.handleScroll(event)}

My handle scroll will verify if is the end of the scroll and load more feed:

  handleScroll (event) {
    var endOfPage = event.nativeEvent.layoutMeasurement.height + event.nativeEvent.contentOffset.y >=
        event.nativeEvent.contentSize.height;

    if (endOfPage) {
      this.getSections()
    }
  }

I cant running my function and the autor command in the same time. Is there a way to execute this two OnScroll?

My componenet AnimatedFlatList (The first OnScroll will not work because the other will override the last):

    <AnimatedFlatList
      contentContainerStyle={[collapse.contentContainer, {paddingTop: this.props.navigation.state.params.category == '' ? 166.5 : 96.5}]}
      onMomentumScrollBegin={this._onMomentumScrollBegin}
      onMomentumScrollEnd={this._onMomentumScrollEnd}
      onScroll={event => this.handleScroll(event)}
      onScrollEndDrag={this._onScrollEndDrag}
      data={this.state.sections}
      renderItem={this._renderSectionItem}
      extraData={this.state}
      keyExtractor={(item, index) => index.toString()}
      removeClippedSubviews
      onScroll={Animated.event( [{ nativeEvent: { contentOffset: { y: this.state.scrollAnim } } }], { useNativeDriver: true },)}
      />

Zaytri · Accepted Answer · 2019-05-02T17:02:09.123

1

Based off of this answer:

onScroll={Animated.event(
  [{ nativeEvent: { contentOffset: { y: this.state.scrollAnim } } }],
  {
    useNativeDriver: true,
    listener: event => this.handleScroll(event)
  });
}}

edited May 02 '19 at 17:02

answered Apr 30 '19 at 00:53

Zaytri

2,582
2
13
19

@ViniciusMorais Does it work if you swap the 2 lines? – Zaytri Apr 30 '19 at 17:31
No, but i just realized the FlatList has the props: `onEndReached`, solve my problem, but i still dont know how execute another function inside onScroll using event together with Animated.event – Vinicius Morais May 02 '19 at 12:12
I found another answer that solves this issue: https://stackoverflow.com/questions/45549355/react-native-animated-event-custom-onscroll-listener and I've updated my answer accordingly – Zaytri May 02 '19 at 17:02
This resolve my question: but i use `onScroll={Animated.event( [{ nativeEvent: { contentOffset: { y: this.state.scrollAnim } } }], {listener: event => {this.handleScroll(event);}}, { useNativeDriver: true },)}` and works fine, i will test with two params. – Vinicius Morais May 02 '19 at 18:17

How execute this two OnScrolls?

1 Answers1