React Native - How can I display an image returned by Google Place Photos API?

Question

I have developed a backend API which given the latitude and longitude of a location it returns an image for the city using Google Places Photos API

My React Native app calls the endpoint to try and load the image into an Image view. This is how the app calls the endpoint and receives the response...

  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);
  }

The backend code for getting an image from Google and sending the response back to my React Native app...

var locationimage = {
    uri: `https://maps.googleapis.com/maps/api/place/photo?photoreference=${photo_reference}&sensor=false&maxheight=1600&maxwidth=1600&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' }));
    })

You may try the endpoint to see what the response looks like on success here

I am not sure how to display the image from the response in an Image view since the response is not a network image with a url or a local file.

Answer 1

The Photos API returns an image like this: https://lh4.googleusercontent.com/-1wzlVdxiW14/USSFZnhNqxI/AAAAAAAABGw/YpdANqaoGh4/s1600-w400/Google%2BSydney

which you can use in an Image component as you would with any other network image:

<Image
  style={styles.image}
  source={{
    uri:'https://lh4.googleusercontent.com/-1wzlVdxiW14/USSFZnhNqxI/AAAAAAAABGw/YpdANqaoGh4/s1600-w400/Google%2BSydney'
  }}
/>

I think the problem in your case is that your response is not an actual image, I mean if you hit it in a browser you'll see no image just some encoded image data. Try to add some content type headers in your response like this and see if it will work:

Content-Type: image/svg+xml