I have an array of objects. Each object has two properties: The first one is a string and the second one is an array of urls.this is an example of the json that I am working with:
{ data : [ {contentString : "eating sushi", ["url", "url", "url"] },... ]}
I want to use a FlatList to render each url in an Image component. However, in visual studio code I find that the property source in the Image component is undelined and displays the following error:
Type '{ uri: IUrl; }' is not assignable to type 'ImageSourcePropType | undefined'. Types of property 'uri' are incompatible. Type 'IUrl' is not assignable to type 'string'.
As I understand, url is indeed a string because, as shown in the code below, the interface IUrl defines its data type as a string so I can not see why I am getting this error.This is my code:
const Dashboard : React.FC <DashScreenProps>= (props)=>{ //interfaces //As mentioned above url is a string interface IUrl{ url : string } interface IPost{ contentString : string urls : IUrl[] } //local state variables const [arrayOfPosts, setArrayOfPosts] = useState<IPost[]>([]) const getPostsFromFollowingUsers = async():Promise<boolean>=>{ try { const response = await fetch(REMOTE_SERVER+`/userPost/getPostsFromFollowingUsers/${id}`) const parseResponse = await response.json() console.log('those are the posts', parseResponse) setArrayOfPosts(parseResponse.data) } catch (error) { console.log(error) } } useEffect(()=>{ getPostsFromFollowingUsers() },[]) return(<View> {arrayOfPosts.map(post=>{ //{contentString, urls} return(<FlatList data = {post.urls} renderItem={({item}) => { return (<Image source={{ uri: item }} style={{ width: 50, height: 50 }} /> ) }} /> ) })}</View> )}export default Dashboard