Table of contents

React Native 0.64.1 require static Image resources error: None of these files exist

React Native May 23, 2021 Viewed 1.9K Comments 0


According to the React Native Upgrade Helper, I upgrade my React Native project from v0.60.2  to v0.64.1. But the bundler throws a fatal error: None of these files exist.

The directory structure of my project is as follows:

├── button.js
└── img
    └── check@2x.ios.png

And button.js code contains:

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

The error is as follows:

error: Error: Unable to resolve module ./check.png from button.js:

None of these files exist:
  * check.png
  * check.png/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
at ModuleResolver.resolveDependency (/Volumes/develop//node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15)
at DependencyGraph.resolveDependency (/Volumes/develop//node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
at Object.resolve (/Volumes/develop//node_modules/metro/src/lib/transformHelpers.js:317:42)
at resolve (/Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:629:33)
at /Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:645:26
at Array.reduce (<anonymous>)
at resolveDependencies (/Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:644:33)
at /Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:329:33
at (<anonymous>)
at asyncGeneratorStep (/Volumes/develop//node_modules/metro/src/DeltaBundler/traverseDependencies.js:137:24)


The new version of Metro requires original files, in my project is check.png. Refer to the Image document. If you need to display different images according to different platforms, you can add and check.ios.png. You can also use the @2x and @3x suffixes to provide images for different screen densities.

Finally, the project directory is as follows.

├── button.js
└── img
    ├── check.png
    ├── check.ios.png
    └── check@2x.ios.png

Updated May 23, 2021