CODEWITHSUNDEEP
react-nativescrollviewreact-native-flatlist
goldvenus
goldvenus

Reputation: 938

FlatList onEndReached event not working in ScrollView on React-Native

I am going to show the items by using the FlatList and the FlatList component is the child of the ScrollView because there is some animation. The OnEndReached event is working without parent ScrollView but in ScrollView, not working for me. I am sure why this happened. I should use the ScrollView for the animation and also working the FlatList event. Is there any solution?

Here is my FlatList code and structure.

<Animated.ScrollView style={{ flex: 1 }}
  scrollEventThrottle={1}
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
     { useNativeDriver: true }
  )}>

   <ProductSearchResults
      products={this.state.products}
      itemAction={this.navigateToProduct}
      onLoadMore={ async () => {await this.findProducts();}}
      more={this.state.more} />

</Animated.ScrollView>

This is ProductSearchResults component code with FlatList.

  render() {
    const { products, setScrolling } = this.props;

    return (
      <FlatList
        contentContainerStyle={styles.container}
        data={products}
        initialNumToRender={1}
        renderItem={this.renderItem}
        keyExtractor={(item, index) => index.toString() }
        removeClippedSubviews={false}
        numColumns={2}
        showsVerticalScrollIndicator={false}
        legacyImplementation={false}
        onEndReached={({ distanceFromEnd }) => {
          console.log('onEndReached:', distanceFromEnd); **// not working**

          if (this.props.more && !this.onEndReachedCalledDuringMomentum)
            this.props.onLoadMore();
        }}
        onEndReachedThreshold={Platform.OS === 'ios' ? 0 : Dimensions.get('window').height / 2}
        onMomentumScrollBegin={() => { this.onEndReachedCalledDuringMomentum = false; }}
        scrollsToTop={false}
        ListFooterComponent={
          this.props.more && <InnerLoading />
        }
        onScrollBeginDrag={() => setScrolling(true)}
      />
    );
  }

Upvotes: 3

Views: 6644

Answers (2)

smekho-alexei
smekho-alexei

Reputation: 123

This is not a onEndReached event issue. Maybe this event is working for you and will be happened when the FlatList is mounted on your project. There is an issue that your structure is not correct. For this event works correctly, you should change the structure without ScrollView and it is possible for your code. You can remove the ScrollView Component.

   <ProductSearchResults
      products={this.state.products}
      itemAction={this.navigateToProduct}
      onLoadMore={ async () => {await this.findProducts();}}
      more={this.state.more}
      onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }])} 
   />



   <FlatList
    .....
    onScroll={this.props.onScroll}
    .....

   />

Like the above code, you can add the scroll event on FlatList for the parent animation. Wish to help you.

Upvotes: 3

Yasser G
Yasser G

Reputation: 1

Replace this line:

onEndReachedThreshold={Platform.OS === 'ios' ? 0 : Dimensions.get('window').height / 2}

with this:

onEndReachedThreshold={0.5}

and it will work.

Upvotes: 0

Related Questions