title: Activity indicator freezes during request
body: <p>I´m building a weather app in React Native where the weather forecast based on the users position is fetched directly on app launch. </p>
  
  <p>Since this request takes some time I want to show an activity indicator until the state is updated with the fetched data. Everything works fine with the indicator showing during the request and disappearing when it should, however there seem to be some problem with the animation of the indicator because it freezes almost directly and stays frozen until it disappears. Any suggestions what could be wrong?</p>
  
  <p><b>App's initial state:</b></p>
  
  <pre><code>   this.state = {
    searchedCity: '',
    placeholder: 'Search city...',
    city: '',
    country: '',
    temperature: null,
    weatherCondition: null,
    weatherDescription: null,
    error: null,
    icon: null,
    isLoading: true,
    };
  }
  </code></pre>
  
  <p><b>Gets position based on coordinates:  </b></p>
  
  <pre><code>componentDidMount() {
  
   navigator.geolocation.getCurrentPosition(    
     position =&gt; {
    this.getWeatherByLoc(position.coords.latitude, position.coords.longitude);
     },
     error =&gt; {
      this.setState({
         error: 'Error fetching weather conditions!'  
       })
     }
   )
  }
  </code></pre>
  
  <p><b>Fetches weather conditions and updates state. isLoading is set to false to hide the activity indicator:</b></p>
  
  <pre><code>getWeatherByLoc(lat, lon) {
  
  api.fetchWeatherByLoc(lat, lon).then((data) =&gt; {
  
    this.setState({
      temperature: data.main.temp,
      city: data.name,
      weatherCondition: data.weather[0].main,
      weatherDescription: data.weather[0].description,
      isLoading: false,
    });
  });
  }
  </code></pre>
  
  <p><b>Render method:</b></p>
  
  <pre><code>render() {
  const { weatherCondition, weatherDescription, temperature, city, country, isLoading } = this.state;
  
  return (
          &lt;View style={styles.container}&gt;
          &lt;Weather weatherCondition={weatherCondition} weatherDescription={weatherDescription} city={city} country={country} temperature={temperature}/&gt; 
          {this.renderLoading()}
          &lt;View style={styles.inputContainer}&gt;
          &lt;TextInput style={styles.textInputStyle}
          onChangeText={(searchedCity) =&gt; this.setState({searchedCity}) }
          onSubmitEditing={ () =&gt; this.setState(this.getWeather())}
          placeholder = {this.state.placeholder}
          clearTextOnFocus={true}
          enablesReturnKeyAutomatically={true}
          /&gt;
          &lt;/View&gt;
          )}&lt;/View&gt;);
  }
  </code></pre>
  
  <p><b>Method for showing the activity indicator:</b></p>
  
  <pre><code>  renderLoading() {
  const {isLoading} = this.state;  
    if(isLoading) {
      return (
    &lt;View style={styles.loading}&gt;&lt;BarIndicator color="white" animating = {isLoading}/&gt; &lt;/View&gt; 
      )
  } else {
    return (null)
  }
  }
  </code></pre>