React Native - Image Component does not accept variable for Source URI attribute

Viewed 1244

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'}

2 Answers

Are we 100% sure image is a string? Since it works when hardcoding the url, perhaps the image prop isn't strictly a string

Related