title: React Native FlatList extraData not rerendering
body: <p>I am not able to re-render my FlatList component. I have tried everything that I can think of. I have tried updating a boolean value for extraData with this.setState, I have passed Immutable.Map to extraData. But nothing seems to work although I know my component has updated correctly and everything is in place when component re-render, but FlatList does not re-render although I have passed changed data to extraData. I just cant figure out what I am doing wrong. </p>
  
  <p>Here is my component without imports and styles:</p>
  
  <pre><code>class DetailsScreen extends Component {
    constructor(props) {
      super(props);
  
      const {
        data: { list, letterIndexes, alphabet },
        savedList
      } = this.props.navigation.state.params;
      this.state = {
        alphabet,
        letter: "A",
        letterIndexes,
        letterIndexesValues: Object.values(letterIndexes),
        savedList: savedList || [],
        list,
        updated: false
      };
    }
  
    componentWillMount() {
      const { list, savedList, refreshFlatList, updated } = this.state;
  
      this.setState({
        list: this.updateListActiveState(list, savedList),
        updated: !updated
      });
    }
  
    static navigationOptions = ({ navigation }) =&gt; ({
      title: `${navigation.state.params.title}`
    });
  
    /**
     * Adds active prop to each object in array.
     * If they exists in savedList then we set active prop as true
     *
     * @param {Array&lt;Object&gt;} list - Names list
     * @param {Array&lt;Object&gt;} savedList - Saved names list
     * @returns {Array&lt;Object&gt;} list
     */
    updateListActiveState(list, savedList) {
      return list.map(item =&gt; {
        item.active = savedList.some(s =&gt; item.name === s.name);
        return item;
      });
    }
  
    /**
     * Updates list names state with new state
     */
    onClick = savedList =&gt; {
      const { list, updated } = this.state;
  
      this.setState({
        list: this.updateListActiveState(list, savedList),
        updated: !updated
      });
    };
  
    /**
     * Renders FlatList single item
     */
    renderItem = ({ item }) =&gt; {
      return &lt;NameItem key={item.id} item={item} onClick={this.onClick} /&gt;;
    };
  
    onLetterPress(letter) {
      const { letterIndexes } = this.state;
  
      this.setState({ letter });
  
      try {
        this.flatListRef.scrollToIndex({
          animated: true,
          index: letterIndexes[letter]
        });
      } catch (e) {}
    }
  
    getItemLayout = (data, index) =&gt; {
      return { length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index };
    };
  
    handleScroll = event =&gt; {
      const { letterIndexes, letterIndexesValues } = this.state;
      const y = event.nativeEvent.contentOffset.y + ROW_HEIGHT;
      const index = parseInt(y / ROW_HEIGHT);
  
      let letter = "A";
      let cnt = 0;
  
      for (const key in letterIndexes) {
        if (letterIndexes.hasOwnProperty(key)) {
          const startIndex = letterIndexes[key];
          const endIndex =
            letterIndexesValues[cnt + 1] !== undefined
              ? letterIndexesValues[cnt + 1]
              : startIndex;
  
          if (startIndex &lt;= index &amp;&amp; index &lt;= endIndex) {
            letter = key;
            break;
          }
        }
  
        cnt += 1;
      }
  
      if (letter !== this.state.letter) {
        this.setState({ letter });
      }
    };
  
    render() {
      const { list, letterIndexes, alphabet, savedList, updated } = this.state;
      const {
        alphabetContainer,
        container,
        letter,
        letterActive,
        letterLast
      } = styles;
      console.log(updated);
      return (
        &lt;View className={container}&gt;
          &lt;FlatList
            data={list}
            keyExtractor={item =&gt; item.id}
            renderItem={this.renderItem}
            getItemLayout={this.getItemLayout}
            initialNumToRender={20}
            onScrollEndDrag={this.handleScroll}
            extraData={updated}
            ref={ref =&gt; {
              this.flatListRef = ref;
            }}
          /&gt;
          &lt;ScrollView
            style={alphabetContainer}
            showsHorizontalScrollIndicator={false}
          &gt;
            &lt;View&gt;
              {alphabet.map((l, i) =&gt; {
                const active = l === this.state.letter ? letterActive : "";
                const last = i === alphabet.length - 1 ? letterLast : "";
  
                return (
                  &lt;Text
                    key={i}
                    style={[letter, active, last]}
                    onPress={() =&gt; this.onLetterPress(l)}
                  &gt;
                    {l}
                  &lt;/Text&gt;
                );
              })}
            &lt;/View&gt;
          &lt;/ScrollView&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>