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

Question

I am trying to do the following:

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

return(
        <Image
          source={require(itemImage)}
        />

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:

renderRow(rowData){
    var itemImage = require(rowData.name)

    return(
            <Image
              source={itemImage}
            />

But I am still getting the same error:

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

Answer 1

Try this with single curly brace in image source. and storing image path in image variable with require() method.

render(){
    var image=require('../img/image1.jpg');
    return(
       <View >
           <Image source={image}/>
       </View>
      );
 }

Answer 2

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