title: React Native setState not updating - called twice in a function. Wait's until finished to update
body: <p>So I am using React native and Realm. Basically I want to show an indicator before a Realm query starts and then hide it when it's finished. But the indicator doesn't seem to show up. My understandings of React native are still new!</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>  &lt;SegmentedControlIOS 
      values={['Matched', 'Last Active', 'Distance', 'Age']}
      momentary={false}
      tintColor={'#DB4C2C'}
      style={{
        width: width,
        marginTop: 10
      }}
      selectedIndex={this.state.scIndex}
      onValueChange={(value) =&gt; {}}
      onChange={(event) =&gt; {
        console.log("CHANGE")
        var selectedIndex = event.nativeEvent.selectedSegmentIndex;
  
        this.sortMatches(selectedIndex)
        this.setState({
          scIndex: event.nativeEvent.selectedSegmentIndex
        })
      }}/&gt;
  
  
    sortMatches(index) {
      this.setState({loading: true})
  
      var sortMatches = null;
  
      if (index == 0) {
        sortedMatches = this._sort_matched()
      } else if (index == 1) {
        sortedMatches = this._sort_last_active()
      } else if (index == 3) {
        sortedMatches = this._sort_birthdate()
      }
  
      let dataSource = ds.cloneWithRows(sortedMatches)
      this.setState({dataSource: dataSource, loading: false})
    }
  
    &lt;ActivityIndicator
      animating={this.state.loading}
      style={[styles.centering, {height: 30, paddingTop: 20}]}
      size="small"/&gt;
  </code></pre>