React Native ListView doesn't display all data with custom ScrollView

Question

React Native ListView shows only half of the content first. And then not updating properly.

Here's my code:

1) Create dataSource in constructor:

const dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1.id !== r2.id });

2) After loading my content

this.setState({ dealsList: this.state.dataSource.cloneWithRows(response.data), hasNextPage: hnp });

3) And inside the render function

<ListView
    dataSource={this.state.dealsList}
    renderRow={this._renderDealRow.bind(this)}
    renderFooter={this.renderLoadMoreButton.bind(this)}
    renderScrollComponent={this.renderScroll.bind(this)}
/>

The length of the response array is 20. But I see only 10 rows in my ListView

UPDATE

I found that the reason is than I'm using custom scroll view. My scroll view is

<ScrollView
    style={styles.scrollview}
    refreshControl={
          <RefreshControl
            refreshing={this.state.reloading}
            onRefresh={() => {
                this.setState({reloading: true});
                this.load(1);
            }}
            tintColor={commonStyles.colors.primary}
            colors={['white']}
            progressBackgroundColor="#00b7bb"
     />
}/>

In your datasource method, you're comparing rows with their ids, are you sure some don't have the same id ? — G. Hamaide
Even is I set this function to true/false. I'll have the same issue — Oly

Oly Oly · Accepted Answer · 2016-03-21T08:32:57

Ok, the reason was that I used custom ScrollView and didn't include props into the component. To fix this problem I have to change my renderScroll function to

return (
    <ScrollView
        {...props} // this line
        style={styles.scrollview}
        refreshControl={
          <RefreshControl
            refreshing={this.state.dealsReloading}
            onRefresh={() => {
                this.setState({dealsReloading: true});
                this.loadDeals(1);
            }}
            tintColor={commonStyles.colors.primary}
            colors={['white']}
            progressBackgroundColor="#00b7bb"
          />
    }/>
);

React Native ListView doesn't display all data with custom ScrollView

1 Answers