Jo Ko Jo Ko - 3 months ago 6x
iOS Question

Why can't string variable be used in <Image source={}/>? (React Native)

I am trying to do the following:

var itemImage = '../img/image1.jpg'


but it keeps saying the error:

Requiring unknown module '../img/image1.jpg'.

But when I directly put in: '../img/image1.jpg' inside require() then it works.

What may be the issue? Any guidance or insight would be appreciated.

EDIT ***

I have the following in my constructor as my dataSource:

this.state = {dataSource: ds.cloneWithRows([{name: '../img/item1.jpg'}, {name: '../img/item2.jpg'}])}

then in my renderRow(), I am trying to achieve something like the following so it updates based on the dataSource:

var itemImage = require(


But I am still getting the same error:

Requiring unknown module '../img/image1.jpg'.


Using require with any resource file is a special case. It is not common javascript require. Packager must know what image will be required while building application (before any code executed) to replace it with resource ID. So parameter can't be variable and must be constant.

But you can simply do:

   dataSource: ds.cloneWithRows([
       {image: require('../img/item1.jpg')},
       {image: require('../img/item2.jpg')}