I have been working on a Yoga-oriented Fitness App for a React Native Project to be showcased at University, and the app structure is given below:

Fit/
├── screens/
│   ├── Login.js
│   ├── Signup.js
│   ├── Welcome.js
│   ├── onboarding.js
│   ├── home.js
│   ├── notifications.js
├── yoga_poses/
│   ├── Dhanur.js
│   ├── Pawan.js
│   ├── Shirsha.js
├── ayurvedic/
│   ├── Vaata.js
│   ├── Kapha.js
│   ├── Pitta.js
├── App.js

Now in accordance with this structure, in the file yoga_poses/Dhanur.js, we have this code:

import React from 'react';
import { SafeAreaView, StyleSheet, Image, Text, TouchableOpacity, Linking} from 'react-native';

// Define the image using require('path_to_image')
const dhanur_pic = require('Fit/assets/dhanuraasana.jpg');

//rest of the code

Note: All other files in the yoga_poses folder have this same problem and this same first few lines, only the yoga pose’s name changes.
None of the files in the yoga_poses folder seem to work. Nor do any files in “ayurvedic” folder works.
But the image does not link since the error is thrown:

Unable to resolve "Fit/assets/dhanuraasana.jpg" from "yoga_poses/Dhanur.js"

Could this be an Expo/Metro Builder problem instead of it being a React Native issue and if yes, then how to fix it?

Everything I tried until now:
The file and folder names are correct (I agree that they are quite long), I have re-checked the names twice as I write this question. I have tried using all sorts of file paths (i.e., both relative and absolute) in all different forms/syntax one can use to define the image except maybe the tag itself since if the linking does not work, then how can we be sure that the Image tag would work?
I am really sorry if this was a long read but I wanted to make the problem as clear as possible to any reader.