While working on a CRNA project using Typescript, I've encountered a problem with resolving images properly. Despite following the documentation provided here, I am unable to get the images to display correctly.
Upon attempting to build for both IOS and Android simulators, I receive the following error:
Unable to resolve './img.png' from './build/components/PlateCounter.js': The module './img.png' could not be found"
Failed building JavaScript bundle
The issue seems to stem from the fact that the images do not appear in the /build folder alongside my .js files after compilation. This absence of images is likely causing the Expo build failure, but I'm unsure how to ensure that the images compile into the /build directory.
See screenshot of the build folder here.
Below is the component where I'm trying to render the image:
import React from 'react';
import { View, Image } from 'react-native';
export default class PlateCounter extends React.Component<any, any> {
public render() {
return (
<View>
<Image source={require('./img.png')} />
</View>
);
}
}
Additionally, here's the file structure within the folder: Screenshot
Despite attempting to add @2x and @3x variants as shown in the image, it hasn't made any difference.
My package.json setup is as follows:
{
"name": "TestRN",
"version": "0.1.0",
"private": true,
...
(Remaining content of the package.json file)
...
}