A parent component passes down data received through a database call to the child component.
My code for the child component being rendered is as follows:
import React, { Component } from 'react'
import { Image, View, Text } from 'react-native'
class ListItem extends Component {
render () {
const { name, image } = this.props.item
return <View>
<Image
style={{ width: 50, height: 50 }}
source={{ uri: image }} />
<Text>
{name}
</Text>
</View>
}
}
export default ListItem
With the code above, no image shows up, although a 50 x 50 element does take up space (seen using inspector).
The URL being tested works fine and the image shows up in the app when hard-coded as such:
source={{ uri: 'test URL here' }}
I've also used console.log to check that the image prop exists before the return call. Everything indicates that the URL (ie the image prop) already exists from the database call.
On a side-note, I was originally using react-native's ListItem component and passing it the image prop as its avatar attribute; the same issue occurs where the image doesn't show up, just a grey box. This is also fixed by setting the following:
avatar={'test URL here'}