CODEWITHSUNDEEP
react-nativereact-native-iosreact-native-flatlist
Shubham Bisht
Shubham Bisht

Reputation: 687

FlatList onEndReached called On Load (React Native)

When I use onEndReached function in FlatList, it gets called automatically.

Below is the link of this issue.

Link

Is there a solution available for it or any alternative in iOS?

Edited:

Below is the code I tried but this doesn't seems to work.

constructor(props){
        super(props);
        this.state = {
            flatListReady:false
        }
    }

    loadMore(){
        if(!this.state.flatListReady){
            return null;
        }
        else{
            alert("End Reached")
        }
    }

    _scrolled(){
        this.setState({flatListReady:true});
    }

    render() {
        return (
            <Layout style={{ flex: 1 }}>

                <FlatList
                    data={listData}
                    renderItem={({item}) => this._renderItem(item)}
                    keyExtractor={(item, index) => item.key}
                    onEndReached={() => this.loadMore()}
                    onEndReachedThreshold={0.5}
                    onScroll={() => this._scrolled()}
                />

            </Layout>

Upvotes: 7

Views: 11557

Answers (3)

Abdurhman An-naggar
Abdurhman An-naggar

Reputation: 61

Sometimes things don't work like they are supposed to, at the end of the day it's not native code where, so may the order of your components or the fact that the Flatlist is encapsulated in a component that is not intended to be, or there is some property should be passed to the Flatlist component itself to activate the onEndReached callback properly.

I've faced this myself, and I didn't know what to do to make it work properly.

A beautiful workaround is derived from the fact the Flatlist inherits ScorllView properties. so you could use the onScroll property to detect if the end has reached or not.

<FlatList
    data={this.props.dashboard.toPreviewComplaints}
    onScroll={({nativeEvent})=>{
        //console.log(nativeEvent);
        if(!this.scrollToEndNotified && this.isCloseToBottom(nativeEvent)){
             this.scrollToEndNotified = true;
             this.loadMoreData();
        }
    }}
/>

this.scrollToEndNotified is used as a flag not to abuse the call to the loadMore endpoint

isCloseToBottom({layoutMeasurement, contentOffset, contentSize}){
    return layoutMeasurement.height + contentOffset.y >= contentSize.height - 100;
}

So whenever it succeed in the isCloseToBottom call it means that you have reached the end of the list, so you can call the loadMoreData function

Upvotes: 6

Trinadh Koya
Trinadh Koya

Reputation: 1087

handle this function very carefully,

  endReached=()=>{
          //take care of ES6 Fat arrow function and trigger your conditions properly with current state and new state data or current state with new Props.
    Based on those conditions only, you need to trigger the other API call

    }

<FlatList data={this.state.data}
     extraData={this.state.load}
     renderItem={this.renderCard}
     keyExtractor={item => item.fundRequestId}
     onEndReached={this.endReached}
     onEndReachedThreshold={.7}
     ListFooterComponent={this.renderFooter}
     />

Upvotes: -3

Gokul Kulkarni
Gokul Kulkarni

Reputation: 2239

Try this,

onEndReachedThreshold={0.5}
onEndReached={({ distanceFromEnd }) => {
if(distanceFromEnd >= 0) {
     //Call pagination function
}
}}

Upvotes: 15

Related Questions