CODEWITHSUNDEEP
androidlistviewreact-native
cubbuk
cubbuk

Reputation: 7920

onEndReached doesn't work as expected using ListView on Android with ReactNative

I am trying to list hundreds of items in a ListView using React-Native on Android platform. Version of react-native is 0.22. Here is my ListView component:

<ListView dataSource={dataSource}
                      onEndReached={onEndReached}
                      renderRow={this.renderRow.bind(this)}/>

When the page loads I retrieve batch of data and fullfill datasource as follows: 

onEndReached(page) {
    let {dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})} = this.state;

    return myService.search({page})
        .then(newRows => {
            this.setState({
                dataSource: dataSource.cloneWithRows(newRows),
                page: page
            });
        });
}

renderRow(row){console.log(row.id); // This is printed for all rows regardless of whether it is displayed on the screen or not}

Basically what happens is, onEndReached function is triggered with a slight slide or sometimes even without any gestures. I thought this function will only be called when all the rows given to dataSource is rendered. Strangely I see that my renderRow function is called for all my rows, not just for the row displayed on the screen. I tried using scrollRenderAheadDistance but to no avail.

May anyone point me what am I doing wrong?

Upvotes: 1

Views: 654

Answers (1)

cubbuk
cubbuk

Reputation: 7920

The problem was I had my ListView under a ScrollView it was breaking its behaviour. After removing the ListView outside ScrollView it started to work as expected.

Upvotes: 1

Related Questions