title: React Native execute a function after fetch has ended
body: <p>The problem I have is that when I change the page, the fetch hasn't still ended the fetching so some variables are empty. I need that until the fetch function is completely done he doesn't call the next function. Here are the 2 functions conflicting:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  componentDidMount() { 
   this.fetchData();  
  
   setTimeout(() =&gt; {
    InteractionManager.runAfterInteractions(() =&gt; {   
      this.setState({renderPlaceholderOnly: true});   
    });    
      }, 300);
    }
    
    fetchData() {   
    return fetch(REQUEST_URL+this.props.boat.id)
      .then((response) =&gt; response.json())
      .then((responseData) =&gt; {
     this.setState({
      boat2: responseData,
      loaded: true,
      name:responseData.name,
      maker:responseData.maker,
      model:responseData.model,
      buildYear:responseData.buildYear,
      refitYear:responseData.refitYear,
      boatType:responseData.boatType,
      withSkipper:responseData.withSkipper,
      licenseNeeded:responseData.licenseNeeded, 
      places:responseData.places,
      berths:responseData.berths,
      cabins:responseData.cabins,
      toilets:responseData.toilets,
      length:responseData.length,
      beam:responseData.beam,
      draft:responseData.draft,
      motorType:responseData.motorType,
      power:responseData.power,
      maxSpeed:responseData.maxSpeed,
      cruiseSpeed:responseData.cruiseSpeed,
      consumption:responseData.consumption,
      water:responseData.water,
      tank:responseData.tank,
      IMGS : [
        'https://images.unsplash.com/photo-1441742917377-57f78ee0e582?h=1024',
        'https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?h=1024',
        'https://images.unsplash.com/photo-1441448770220-76743f9e6af6?h=1024'
      ],   
     });
     
      })
      .catch((error) =&gt; alert(error) )
      .done();     
    }    </code></pre>
  </div>
  </div>
  </p>
  
  <p>In the <code>componentDidMount</code> the fetch is executed but he executes the <code>interactionManager</code> before the fetch has ended, that's why I used <code>setTimeout</code> as a temporal solution.</p>