title: React Native - How can I display an image returned by Google Place Photos API?
body: <p>I have developed a backend API which given the latitude and longitude of a location it returns an image for the city using <a href="https://developers.google.com/places/web-service/photos" rel="nofollow noreferrer">Google Places Photos API</a></p>
  
  <p>My React Native app calls the endpoint to try and load the image into an <code>Image</code> view. This is how the app calls the endpoint and receives the response...</p>
  
  <pre><code>  try {
      let imageResponse = await fetch(
        `https://budgettrip.herokuapp.com/locationimage/${latitude}/${longitude}`
      );
      let response = await imageResponse;
      this.setState({ locationImage: response });
    } catch (error) {
      console.error('location image error', error);
    }
  </code></pre>
  
  <p>The backend code for getting an image from Google and sending the response back to my React Native app...</p>
  
  <pre><code>var locationimage = {
      uri: `https://maps.googleapis.com/maps/api/place/photo?photoreference=${photo_reference}&amp;sensor=false&amp;maxheight=1600&amp;maxwidth=1600&amp;key=${process.env.GOOGLE_PLACES_API_KEY}`,
      headers: {
        'User-Agent': 'Request-Promise'
      }
    };
  
    rp(locationimage)
      .then(function(repos) {
        res.send(repos);
      })
      .catch(function(err) {
        // API call failed...
        res.send(JSON.stringify({ error: 'Could not get image' }));
      })
  </code></pre>
  
  <p>You may try the endpoint to see what the response looks like on success <a href="https://budgettrip.herokuapp.com/locationimage/-8.409518/115.188919" rel="nofollow noreferrer">here</a></p>
  
  <p>I am not sure how to display the image from the response in an <code>Image</code> view since the response is not a network image with a url or a local file.</p>