ReactNative Flatlist onEndReached 不工作

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

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 2

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 3

您在 FlatList 中查找的属性是onEndReachedThreshold而不是 onEndThreshold。

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.

Answer 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.

Answer 6

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

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

Answer 7

Just sharing one more reason why it wasn't working on my side. My FlatList was inside a ScrollView which was not letting the FlatList know that it has reached end. I moved my FlatList out of the ScrollView and it started to work again!

Answer 8

设置onEndReachedThreshold为我解决这个问题。