Problem when rendering image with React Native api wordpress

Question

Speaks beauty guys, I’m doing tests extracting data from a wp api using React I can extract all the data but the image was not successful, I started a short time with React

export default class App extends Component {

state={
    data:[],
  }



fetchData = async() =>{
  const response = await
  fetch('http://dominio.com.br/app/wp-json/wp/v2/posts');

  const posts = await response.json();

  this.setState({data:posts});

}  

componentDidMount(){
    this.fetchData();
}  

render() {
    return (
     <View>


        <FlatList 
            data={this.state.data}
            renderItem={({item})=><Postagens data={item} />}
            keyExtractor={(item, index)=> item.id}
            />


     </View>
    );
  }
}

class Postagens extends Component {


  render(){


    return(


      <View style={styles.posts}>


        <Image source={{uri:'this.props.data.better_featured_image.media_details.sizes.thumbnail.source_url'}} style={styles.imagem} />


        <Text>{this.props.data.title.rendered}</Text>


        <Text>{this.props.data.excerpt.rendered}</Text>


      </View>
    );
  }
}

Answer 1

Your problem is that you are passing the value as string and not string template, which is the crase accent ` .

<Image source={{uri: `${this.props.data.better_featured_image.media_details.sizes.thumbnail.source_url}`}}>

However it is not necessary to use this format, as you are passing a variable to Uri. Then just the path:

<Image source={{uri: this.props.data.better_featured_image.media_details.sizes.thumbnail.source_url}}>

I hope I’ve helped

Answer 2

You are using the variable as a string. Remove the quotes from the value of the object you apply to the URI of the Image component.

Ex.:

<Image source={{ uri: this.props.post.image }} />