React-native FlatList not rerendering row when props change

Simply you can solve this problem passing props to extraData in flat list component like this,

  <FlatList
    data={this.props.data}
    extraData={this.props}
    keyExtractor={this._keyExtractor}
    renderItem={this._renderItem}
  />

In my case I just made a simple mistake when using keyExtractor

I changed

keyExtractor={(item, index) => index.toString()} 

To

keyExtractor={(item, index) => item.key} 

I was seeing some strange effect after filtering my list where props of filtered out components were being rendered in place of new component's props, my hunch is that because I was using the index of the array rather than a unique key, I was just passing the old props to the new component even though the base component was in fact changing.

The problem here lies within the fact that

1. You are mutating an existing slice of state instead of creating a mutated copy

---

_onCategoryChosen = category => {
    var oldReportCopy = this.state.report; // This does not create a copy!
    oldReportCopy.selectedCategory = category;
    this.setState(Object.assign({}, this.state, { report: oldReportCopy }));
};

This should be

_onCategoryChosen = category => {
    var oldReportCopy = Object.assign({}, this.state.report);
    oldReportCopy.selectedCategory = category;
    // setState handles partial updates just fine, no need to create a copy
    this.setState({ report: oldReportCopy });
};

---

2. The props of FlatList remain the same, your _renderRow function may rely on the selectedCategory prop which does change (If not for the first mistake), but the FlatList component does not know about that. To solve this, use the extraData prop.

    <FlatList
      data={this.props.items.categories.edges}
      renderItem={this._renderRow}
      horizontal={true}
      keyExtractor={(item, index) => item.node.id}
      extraData={this.props.selectedCategory}
    />