[RN 0.64] Image component is not able to find images marked as .android.png & .ios.png

As per react-native documentation

The image name is resolved the same way JS modules are resolved. In the example above, the bundler will look for my-icon.png in the same folder as the component that requires it. Also, if you have my-icon.ios.png and my-icon.android.png, the bundler will pick the correct file for the platform.

Folder Structure

 assets
     add.android.png
     [e-mail]
     [e-mail]
     add.ios.png
     [e-mail]
     [e-mail]

Code:

<Image source={require(‘./add.png’)} />

Error:

Unable to resolve module add.png from AwesomeProject/App.js: add.png could not be found within the project or in these directories: node_modules

[tplorts]

Update: https://github.com/facebook/react-native/issues/31348#issuecomment-867298139

---

@irodeanu I was having this problem too. I ended up finding (just by tinkering around) that requiring images with these platform-specific extensions works fine if I just provide a default file.

So in your case, since you have add.ios.png & add.android.png, try also picking one to version to be your default and copy it into add.png. I would be curious to know if that ends up working for you (and any others here that have experience this problem).

If this is now the intended requirement for platform-specific image files, then perhaps it would be helpful to add a note to https://reactnative.dev/docs/images Right now it just says

Also, if you have my-icon.ios.png and my-icon.android.png, the bundler will pick the correct file for the platform.

So something like “you must also provide a default image file my-icon.png”

[kasl]

we got the answer to this issue in https://github.com/facebook/metro/issues/676#issuecomment-866712819