Adding Images stored in JSON Array in a ListView - ReactNative

Question

I'm having trouble displaying images stored in a JSON array in a ReactNative ListView. Let's say this is my data:

var data = [
  {
    id: 0,
    photo: '../images/test.png',
  },
  {
    id: 1,
    photo: '../images/test.png',
  },
  {
    id: 2,
    photo: '../images/test.png',
  },
]

Then, in my class, first I require the data (assume it's being exported correctly):

var data = require("../data").data

Then for each element in the datasource, I loop through the JSON array, and try to display the Image:

<Image source={{uri:item.photo}} style={styles.photo}></Image>

However, nothing displays on screen. I know the data is being pulled through correctly because other text fields (not shown above) display properly, for example:

<Text style = {styles.name}>{item.id}</Text>

This displays properly. Also if I try to require the image directly in the source, i.e.

<Image source={require('../images/test.png')} style={styles.photo}></Image>

It works fine. Does anyone know why the Image source isn't pulling when referenced as a variable?

Answer 1

You can do that in this way:

var data = [
  {
    id: 0,
    photo: require('../images/test.png'),
  },
  {
    id: 1,
    photo: require('../images/test.png'),
  },
  {
    id: 2,
    photo: require('../images/test.png'),
  },
]