Problem when use dynamic value with image component react native

Question

I get data from DB and put it into source image, it will be error, but if i put only string it will run ok

Run ok: <Image source={require('./src/image/honda-accord.png')} />

Run fail: <Image source={require("./src/image/" + carOfPerson[0]["cars"][i]["picture"] + "")} />

Value of carOfPerson[0]["cars"][i]["picture"] is honda-accord.png

Image error was taked screen snapshot in android emulator:

And console log in log cat:

  Body:
{"type":"TransformError","lineNumber":0,"errors":[{"description":"App.js: App.js:Invalid call at line 130: require(\"./src/image/\" + carOfPerson[0][\"cars\"][i][\"picture\"] + \"\")","lineNumber":0}],"name":"SyntaxError","message":"App.js: App.js:Invalid call at line 130: require(\"./src/image/\" + carOfPerson[0][\"cars\"][i][\"picture\"] + \"\")","stack":"Error: App.js:Invalid call at line 130: require(\"./src/image/\" + carOfPerson[0][\"cars\"][i][\"picture\"] + \"\")\n    at F:\\Workspace_ReactNative\\ReactNativeRealm\\node_modules\\metro\\src\\JSTransformer\\worker.js:247:19\n    at Generator.next (<anonymous>)\n    at step (F:\\Workspace_ReactNative\\ReactNativeRealm\\node_modules\\metro\\src\\JSTransformer\\worker.js:40:30)\n    at F:\\Workspace_ReactNative\\ReactNativeRealm\\node_modules\\metro\\src\\JSTransformer\\worker.js:51:15"}
    at com.facebook.react.devsupport.BundleDownloader.processBundleResult(BundleDownloader.java:296)
    at com.facebook.react.devsupport.BundleDownloader.access$200(BundleDownloader.java:37)
    at com.facebook.react.devsupport.BundleDownloader$1.onResponse(BundleDownloader.java:174)
    at okhttp3.RealCall$AsyncCall.execute(RealCall.java:153)
    at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1162)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:636)
    at java.lang.Thread.run(Thread.java:764)

Thanks for all the help.

mehulmpt · Accepted Answer · 2018-12-22 19:48:50Z

1

React Native at the moment doesn't support dynamic require calls, i.e. you have to pass a complete constant string inside your require statement for it to work.

See this github issue for more details: https://github.com/facebook/react-native/issues/6391

answered Dec 22, 2018 at 19:48

mehulmpt

16.7k13 gold badges54 silver badges90 bronze badges

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

Comments

Thomas Vu · Accepted Answer · 2019-12-04 08:32:12Z

1

You need to require the source in the array so that React Native can display your images dynamically. In carOfPerson array requires the link to the images

instead of ['img1', 'img2'], you will have [require('img1'), require('img2')]

answered Dec 4, 2019 at 8:32

Thomas Vu

2953 silver badges10 bronze badges

Collectives™ on Stack Overflow

Problem when use dynamic value with image component react native

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related