ReactNative Flatlist onEndReached not working

Question

Im trying to call a function on onEndReached of a FlatList but it's not working.

I'm calling the this.state.pageNo at the end and it's not updating. I want to use this logic later in infinite scroll but not able to get it working now.

 import React, { Component } from "react";
 import {
  View,
  Text,
  StyleSheet,
  Button,
  TouchableOpacity,
  FlatList,
  Alert
  } from "react-native";

 class InfiniteScrollRedux extends Component {
   constructor(props) {
      super(props);
      this.state = {
        loading: false,
        pageNo: 1,
        data: [
            { id: 1, name: "Name01" },
            { id: 2, name: "Name02" },
            { id: 3, name: "Name03" },
            { id: 4, name: "Name04" },
            { id: 5, name: "Name05" },
            { id: 6, name: "Name06" }
        ]
    };
}

myFunction = () => {
    this.setState({ pageNo: this.state.pageNo++ });
};

render() {
    return (
        <View>
            <FlatList
                data={this.state.data}
                renderItem={({ item }) => (
                    <View style={mystyle.mainCard}>
                        <Text style={mystyle.titleText}> {item.id} </Text>
                        <View style={{ marginTop: 200 }} />
                        <Text style={mystyle.nameText}> {item.name} </Text>
                    </View>
                )}
                keyExtractor={item => item.id}
                onEndReached={this.myFunction}
                onEndThreshold={0}
            />
            <Text style={{ margin: 20, padding: 20, fontSize: 20 }}>
                {this.state.pageNo}
            </Text>
        </View>
      );
   }
}

const mystyle = StyleSheet.create({
 mainCard: {
    backgroundColor: "#2F4F4F",
    marginBottom: 1,
    padding: 5
},
titleText: {
    fontSize: 20,
    color: "#F0FFFF"
},
nameText: {
    fontSize: 14,
    color: "#F0FFFF"
 }
 });

 export default InfiniteScrollRedux;

Answer 1

The property you are looking for in FlatList is onEndReachedThreshold instead of onEndThreshold.

Answer 2

In my case the problem was with nativebase <Content>. It was creating problems when <FlatList> was used inside it. Solution :

<Content
  style={{flex: 1}}
  contentContainerStyle={{flex: 1}} // important!
>

Source : https://github.com/GeekyAnts/NativeBase/issues/1736

Answer 3

There is an issue for that here: https://github.com/facebook/react-native/issues/14312. Looks like a lot of people are experiencing the same. There is a suggestion to change the onEndReachedThreshold to value bigger that 0, for example: 0.3.

Answer 4

First of all, you should make sure that your onEndReached listens to your onMomentumScrollBegin and onMomentumScrollEnd props of FlatList. Another important thing is distanceFromEnd param of onEndReached prop of FaltList. So you can use it as follows:

          onMomentumScrollBegin={() => this.setState({ scrollBegin: true })}
          onMomentumScrollEnd={() => this.setState({ scrollBegin: false })}
          onEndReached={({ distanceFromEnd }) =>
            distanceFromEnd<=0.5&&
            this.state.scrollBegin &&
            this.onEndReached()
          }

And then you can define your onEndReached function, which will work as needed.

Hope this will help someone to save time on this.