React Native ListView doesn't rerender for large data

Question

React Native ListView won't re-render its rows after calling this.setState if list has large data source i.e. everything works correctly if I have few rows (1 to 9), but if I add more data, then the re-rendering won't happen.

There are similar posts about this topic, but I didn't find any that tackled exactly this problem.

Here is some simplified sample code:

render() {
    return (
        <View style={Styles.listContainer}>
            <ListView
                dataSource={this.state.triggerDataSource}
                enableEmptySections={true}
                renderRow={(data) => this._renderListRow(data)}
                renderHeader={() => this._renderListHeader()}/>
        </View>
    );
}

...

_renderListRow(data) {
    return (
        <View style={Styles.listRow}>
            {this._renderX(data)}
            <View style={Styles.listItem}>
                <Text style={Styles.listLabel}>{data.symbol}</Text>
            </View>
        </View>
    );
}

...

_renderX(data) {
    if (this.state.isShowing) {
        return (
            <Button>
                Some button
            </Button>
        );
    } else {
        return null;
    }
}

If the ListView datasource is relatively small, then calling this.setState({isShowing: true}); will trigger re-render and each of the rows will now contain the Button, but when I add more data, then changing state does nothing.

EDIT: My solution is partially working (i.e. for small data size) - I would like to know why and how the ListView functionality changes if the data size increases. Suggested answers don't answer exactly this question. My code stops working if the row count reaches 10. If it's below then everything works just fine.

Possible duplicate of [React Native - Force ListView Re-render when data has not changed](http://stackoverflow.com/questions/38000667/react-native-force-listview-re-render-when-data-has-not-changed) — dting, Sep 27 '16 at 09:37

score 1 · Answer 1 · answered Dec 12 '16 at 07:49

Find the way to solve it with this:

ReactNative ListView component calculates how many rows to render on initial component mount using initialListSize property. By default the initialListSize is set to 10.

For reference, See the below function from ReactNative ListView source code,

 var DEFAULT_INITIAL_ROWS = 10;      
  getDefaultProps: function() {
    return {
      initialListSize: DEFAULT_INITIAL_ROWS,
      pageSize: DEFAULT_PAGE_SIZE,
      renderScrollComponent: props => <ScrollView {...props} />,
      scrollRenderAheadDistance: DEFAULT_SCROLL_RENDER_AHEAD,
      onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
      stickyHeaderIndices: [],
    };
  }

React Native ListView doesn't rerender for large data

1 Answers1

Linked