Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6290

How to render an array of images in Typescript?

$
0
0

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

Viewing all articles
Browse latest Browse all 6290

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>