1

Folder Structure

├── app.js
└── assets
    ├── play.android.png
    └── play.ios.png

OR

   ├── app.js
   ├── play.android.png
   └── play.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.

But when I am trying to load images according to OS. It is showing me error in Android device. In iOS able to load the image. Code:-

const App=()=>{
  return (<View>
    <Image source={require("./assets/play.png")} style={{height:500,width:300}}/>
    </View>
  )
}

Error:-

assets/play.png.js (1091:882) Unable to resolve module 'module://assets/play.png.js' (Device)
Evaluating module://assets/play.png.js

Environment

Code:- Expo Snack@40.0

Device Tested:- Redmi Note 8 pro

Tested in Virtual Android Device embedded with Snack :-No Error but Not able to see image.

enter image description here

Tested in Virtual iOS Device embedded with Snack :-Able to see image.

I am able to recreate the scenario in Expo CLI I am not able to launch the same in the above device.

Error:-

Failed building JavaScript bundle.
Unable to resolve "./assets/play.png" from "App.js"

Attaching the Screenshot for the same in Mobile. enter image description here

Prafull
  • 33
  • 5

1 Answers1

0

here ie the modified solution for your error (https://snack.expo.io/@haryanvidev/experimentals-images)

HaryanviDeveloper
  • 1,005
  • 1
  • 8
  • 15