'ReactNative Flatlist onEndReached not working

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;

Solution 1:^[1]

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

Solution 2:^[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

Solution 3:^[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.

Solution 4:^[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.

Solution 5:^[5]

Got stuck with this issue for a long time. I think React is having confusions in calculating the screen height vs the container height. So the best thing we can do is to increase the onEndReachedThreshold value to something higher than 0 to some 0.2, 0.4 etc.

Solution 6:^[6]

for improving onEndReached performance I suggest to provide exact height to contentContainerStyle for example :

contentContainerStyle={{ height : items.length * itemHeight }}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	nating
Solution 2	Farhan
Solution 3	vaklinzi
Solution 4	David
Solution 5	Manoj Perumarath
Solution 6

'ReactNative Flatlist onEndReached not working

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]