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

Its not supported in react-native. Check this. github.com/facebook/react-native/issues/… — Abhishek
– Abhishek, Commented Jul 14, 2016 at 10:34

Srinivas Guni · Accepted Answer · 2016-07-14 06:47:43Z

2

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>
      );
 }

answered Jul 14, 2016 at 6:47

Srinivas Guni

2,2742 gold badges18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jo Ko Over a year ago

It works! But please check EDIT *** in the original post. I am trying to achieve that, but still getting an error.

Kelvin Aitken Over a year ago

Thanks @Srinivas Guni, it works. stackoverflow.com/questions/56797041/…

farwayer · Accepted Answer · 2016-07-14 23:09:05Z

0

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

edited Jul 14, 2016 at 23:09

answered Jul 14, 2016 at 22:39

farwayer

4,1923 gold badges23 silver badges23 bronze badges

1 Comment

Jo Ko Over a year ago

You the savior! Worked!

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related