I have tried many ways to get out of this problem. I have a folder named Screens in which I have a file name HomeScreen.js

assets--
       |__ padlock.png
Screens--
        |__ HomeScreen.js

When I am trying to import padlock.png into HomeScreen.js it gives following error.

Unable to resolve module ./assets/padlock.png from D:\User\react\myproject\Screens\HomeScreen.js:

Following methods I have tried in HomeScreen.js

const imageLock = require("../assets/padlock.png"); //Not working
const imageLock = { uri: "../assets/padlock.png" }; //Not Working
import imageLock from "../assets/padlock.png"; //not working

I have make sure that padlock.png exist and I am not making any mistakes. Full error message is as below.

Unable to resolve module ./assets/padlock.png from D:\User\react\myproject\Screens\HomeScreen.js:

None of these files exist:

• padlock.png
• Screens\assets\padlock.png\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  27 | const imageLock = require("../assets/padlock.png"); | ^ 28 | 29 | export default function HomeScreen({ navigation }) { 30 | const [modalOpen, setModalOpen] = useState(false);