React-native cannot find images within same directory - image

Question

I'm running a React Native app off of Xcode 10.3 and am attempting to load some icon images within a detailView screen, but for whatever reason React Native cannot see them. Whether I reload or rebuild the project (react-native run-ios), I receive the following error message:
/Path/To/Project/src/components/DetailView.js: The module ../images/call#2x.png could not be found from /Path/To/Project/src/components/DetailView.js. Indeed, none of these files exist:
call#2x.png
/Path/To/Project/src/images/call#2x.png/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
Here is my project's src directory:
And this image snippets from my detailView.js:
<ScrollView showsVerticalScrollIndicator={false}>
<Image
source={require('../images/background.jpg')}
style={[theme.cardImageStyle, styles.image]}
/>
</ScrollView>
// ... More code here
<View style={styles.actionArea}>
<TouchableOpacity>
<Image
source={require('../images/call#2x.png')}
style={styles.actionImage}
/>
</TouchableOpacity>
<TouchableOpacity>
<Image
source={require('../images/sms#2x.png')}
style={styles.actionImage}
/>
</TouchableOpacity>
<TouchableOpacity>
<Image
source={require('../images/email#2x.png')}
style={styles.actionImage}
/>
</TouchableOpacity>
</View>
Here is my dependencies list from package.json:
"dependencies": {
"lodash": "^4.17.15",
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-gesture-handler": "^1.3.0",
"react-native-material-kit": "^0.5.1",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^3.11.1",
"react-redux": "^7.1.0",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/runtime": "^7.5.5",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.8.0",
"eslint": "^6.1.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.55.0",
"react-test-renderer": "16.8.6"
},
The strange thing is that it has no trouble finding the background.jpg file, but I receive the same error message whether or not I change the name of the file I am looking for in the require() statement. I assume this is a problem with how RN or Xcode is building the project (Xcode is killing me right now, moving slower than 90s dialup).
All help is much appreciated.

Answer 1

Remove #2x from image path or try to make other files for different screen densities like below:
call#1x.png
call#2x.png
call#3x.png
Then just use
source={require('../images/call.png')
DOCS

Answer 2

remove #2x suffix from image path, they're reserved to provide images for different screen densities, just
source={require('../images/call.png')
from RN Images docs
the packager will bundle and serve the image corresponding to device's screen density.
If there is no image matching the screen density, the closest best option will be selected
You don't need to specify image corresponding size to device by yourself