React native, Unable to resolve module for static image

Question

I'm using react-native 0.14.1

react-native run-android

[3:10:56 PM] <START> find dependencies
Unable to resolve module image!ic_action_android_back_white3 from /Users/lion/Desktop/Developer/AwesomeProject/NewTrackActivity.js
Unable to resolve module image!ic_action_android_back_white3 from /Users/lion/Desktop/Developer/AwesomeProject/NewTrackActivity.js

If I force open my app in Genymotion it can't find my image.

Requiring unknown module image!ic_action_android_back_white3

I'm tried to move image to both ./android/app/src/main/res/drawable-xxx and ./assets/drawable-xxx but neither work.

Troposphere

this worked! for me – Jacquenette

Answer 1

Have you tried to mount the image, like the new asset manager allows you to do? It's described in the documentation.

Use the following prop for the Image component. Choose the right relative path and dont forget the extension.

<Image source={require('./my-icon.png')} />

Carvel

I've tried it. It's always work. But I'm very suspicious to my case. What's the difference between this method & image! ? – Troposphere

The new asset manager allows you to add images on the fly without rebuilding your whole project. 1. Same system on iOS and Android. and also 5. Adding and changing images doesn't require app recompilation, just refresh the simulator as you normally do. (Official documentation) – Carvel

Answer 2

Sometimes, your image might include an @2x or @3x for different screen dpi as mentioned in docs. In such case the path should specify the image name without the @2x or @3x suffix. For example if image file name is [email protected]:

<Image source={require('./img.png')} />

Darcydarda

Answer 3

Restart your react packager. That worked for me.

Denmark

That's not work for me I've also tried to build bundle by react-native bundle --platform android --dev true --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ but still doesn't work. – Troposphere

Worth mentioning that a running React packager won't pick up new directories/resource paths that you've added to your project that would otherwise be picked up if you restarted the packager i.e. a running packager won't pick up if you add ./img/favicon.png but if you restart the packager it will add ./img and any subsequent files added there will be picked up on reloads without restart of the packager. – Ungrounded

Answer 4

I think this is an issue of adding assets after your initial build.

I closed the emulator and bundler, cleared cache and ran RN - run-ios/run-andriod - and then not a problem.

I was also wondering if just running link might work, but did not get to test this.

Lexington

Answer 5

You can save your image in that folder itself instead of saving in asset folder and give path as :

<Image source={require('../download.png')} />

It worked for me

Wiredraw

Answer 6

I had the same error message Unable to resolve module for files with upper case characters.

My solution - rename file names to lower case.

Using in code:

<Image source={require('../download.png')} />

Versions:
react native - 0.62
expo - 38

Namara