title: React component does not react to mobx observable data
body: <p>I am using <strong>mobX</strong> for my react native project. Please consider this store class:</p>
  
  <pre><code>class Birds {
      @observable listOne = [];
      @observable fetchingListOne = false;
      @observable fetchErrorOne = '';
  
      @action setListOne = () =&gt; {
          this.fetchingListOne = true;
          api.getList()
              .then((data) =&gt; {
                  this.listOne.replace(data);
                  this.fetchingListOne = false;
              })
              .catch((error) =&gt; {
                  this.fetchingListOne = false;
                  this.fetchErrorOne = error;
              });
      };
  }
  </code></pre>
  
  <p>And this the react component:</p>
  
  <pre><code>@inject('BirdStore') @observer
  export default class Flat extends React.Component {
      componentDidMount() {
          this.props.BirdStore.setListOne();
      }
  
      _renderHeader = () =&gt; {
          return &lt;Text style={styles.listHeaderText}&gt;
              Hello {this.props.BirdStore.listOne.length} is {this.props.BirdStore.fetchingListOne.toString()}
              &lt;/Text&gt;;
      };
  
      _renderItem = ({item}) =&gt; {
          return &lt;Text style={styles.item}&gt;{item.name}&lt;/Text&gt;
      };
  
      _renderFooter = () =&gt; {
          if (this.props.BirdStore.fetchingListOne) {
              return &lt;ActivityIndicator/&gt;
          }
          else {
              return null
          }
      };
  
      render() {
          const dataSource = this.props.BirdStore.listOne.slice();
  
          return (
                  &lt;View style={styles.container}&gt;
                      &lt;Text&gt;Fetching: {this.props.BirdStore.fetchingListOne.toString()}&lt;/Text&gt;
                      &lt;FlatList
                          style={styles.listContainer}
                          ListHeaderComponent={this._renderHeader}
                          data={dataSource}
                          renderItem={this._renderItem}
                          keyExtractor={(item, i) =&gt; item.id}
                          ListFooterComponent={this._renderFooter}
                      /&gt;
                  &lt;/View&gt;
          )
      }
  }
  </code></pre>
  
  <p>From above it looks to me that:</p>
  
  <ol>
  <li>When the <code>Flat</code> component mounts, it call the method of the store <code>setListOne()</code>.</li>
  <li><code>setListOne()</code> sets <code>fetchingListOne</code> to true and makes an api call.</li>
  <li>On the component side, when the <code>fetchingListOne</code> is true, the <em>ActivityIndicator</em> displays, and in the <em>ListHeaderComponent</em> it should display true.</li>
  <li>On the store side, after successful/unsuccessful response, it sets <code>fetchingListOne</code> to false.</li>
  <li>Finally on the component side, because <code>fetchingListOne</code> is set to false, <em>ActivityIndicator</em> should not display and in the <em>ListHeaderComponent</em> it should display false.</li>
  </ol>
  
  <p>However, this is not what's happening. Here when the <code>setListOne()</code> method is called, after it sets the <code>fetchingListOne</code> to true, the component does not react to the changes made after api call. And the <em>ActivityIndicator</em> keeps displaying and in <em>ListHeaderComponent</em> its displaying true.</p>
  
  <p>What am I doing wrong here? Could you please help me. Thank you</p>
  
  <p><strong>Update</strong></p>
  
  <p>I have added a Text component before the FlatList. Adding a Text component or console logging inside the component class's render method does makes the FlatList react to the changes. I don't know why this is happening though.</p>