React-native Image URL loaded from REST API not showing

Question

My app fetches latest posts from a Wordpress backend and populates a Listview with the text components an Image component. The Image component URI points to a function called fetchimageurl(id)

<Image 
    source={{uri: this.fetchimageurl(post.featured_media)}}
    style={{width: 400, height: 400}}
/>

The function fetchimageurl(id) takes the id value of the post object and hits the backend API/Media endpoint with the specific post ID to return the thumbnail URL.

fetchimageurl(id){
    fetch('http://ipaddress/sitename/wp-json/wp/v2/media/'+id)
    .then(function(response){
        if (!response.ok){
            console.log("Rewrite error handling - Draft code")
            return
        }
        response.json().then(function(data){
            return data.media_details.sizes.medium_large.source_url
        })
    })
}

The fetch method is working fine and is parsing and returning the URL correctly, however, the Image component fails to display the image once the parsed URL is passed back.

I am guessing the issue has to do with RN rendering the component prior to having the URLs returned by the function or something of that sort. I could not find much in the docs related to the life cycle of the image component. Can someone please point me in the right direction?

Answer 1

You can't pass a Promise to uri.

Somewhere in your Component invoke the Promise and then set resulting URI in component's state:

this.fetchimageurl(post.featured_media).then(res => {
  this.setState({imageUri: res})
})

Then in render:

<Image 
    source={{uri: this.state.imageUri}}
    style={{width: 400, height: 400}}
/>