React Native Snap carousel not displaying images while fetching from API - reactjs

Question

I am trying to fetch posts from a Wordpress API including image sources and then display them in Snap Carousel, However images are not displaying while the text is displayed and images is getting undefined.
Here is the code, the URL i have removed for now.
Everything seems to be working fine, only the images are not loading.
import React, { Component } from 'react';
import { Text, View, Button, Image, flex } from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import Carousel from 'react-native-snap-carousel';
class HomeSlider extends Component{
constructor(props){
super(props);
this.state = {
activeIndex:0,
posts: {},
loading: true,
}
}
componentDidMount(){
fetch("https://#/wp-json/wp/v2/posts?per_page=4")
.then((response) => response.json())
.then((data => {
this.setState({
posts: data,
loading: false,
})
}
))
}
renderItem({item,index}){
return (
<View style={{
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
borderRadius: 20,
height: 250,
marginLeft: 16,
backgroundColor: 'white',
elevation: 20,
marginBottom:20,
marginTop: 20,
shadowColor: 'white',
shadowOffset: {
width: 0,
height: 10,
},
shadowOpacity: 0.58,
shadowRadius: 16.00,
display: flex, flexDirection: 'column'}}>
<Image style={{height: 150, width: '100%' ,borderTopLeftRadius: 20,
borderTopRightRadius: 20}}
source={{uri: item.illustration}} />
<Text style={{fontSize: 14, padding: 12 ,marginTop: 20, fontFamily: 'poppins_semibold'}}>{item.title}</Text>
</View>
)
}
render(){
if(this.state.loading){
return(<View><Text>Loading</Text></View>)
}else{
const carouselItems = this.state.posts.map(function(x){
return (
{
title: x.title.rendered,
illustration: x.better_featured_image.source_url,
}
)
})
return(
<View style={{ flex: 1, flexDirection:'row', marginTop: 20, backgroundColor: '#FBFEFB'}}>
<Carousel
loop={true}
loopClonesPerSide={2}
autoplay={true}
autoplayDelay={200}
autoplayInterval={15000}
layout={"default"}
ref={ref => this.carousel = ref}
data={carouselItems}
sliderWidth={100}
itemWidth={350}
renderItem={this.renderItem}
onSnapToItem = { index => this.setState({activeIndex:index}) } />
</View>
)
}
}
}
export default HomeSlider;

Answer 1

Looks perfect!
Just checked in below code whether illustration is giving you the correct URL.
const carouselItems = this.state.posts.map(function(x){
return (
{
title: x.title.rendered,
illustration: x.better_featured_image.source_url, // test here by placing dummy url.
}
)
})