I'm having an issue with adding static images to my project. I added a resource folder with images inside, restarted the packager and get the following error:
error: bundling failed:
Error: Unable to resolve module `../../assets/img/receiptIcon.PNG` from
`C:\Users\Keith\Desktop\Phase1\Screens\Receipts\ReceiptRow.js`:
The module `../../assets/img/receiptIcon.PNG` could not be found from
`C:\Users\Keith\Desktop\Phase1\Screens\Receipts\ReceiptRow.js`. Indeed, none of
these files exist:`C:\Users\Keith\Desktop\Phase1\assets\img\receiptIcon.PNG(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`
`C:\Users\Keith\Desktop\Phase1\assets\img\receiptIcon.PNG\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`
Copying the path below into File Explorer opens the image as expected. I've made sure there are no special chars in the file path as suggested in other posts, I've copied the image into the same directory as the js file but I still get an unresolved module error.
This is how I am adding the image:
(I've tried using different paths with the same result, 'receiptIcon.png', './receiptIcon.png', './../../assets/img/receiptIcon.png', './../../assets/img/receiptIcon.PNG' )
<View style={styles.iconContainer}>
{/* icon image*/}
<Image source={require('./receiptIcon.PNG')} style={styles.icon} />
</View>
Is there anything I am missing because as far as the documentation says I just need to add the image to the project dir and the packager does the rest?
I'm using
react-native-cli: 2.0.1
react-native: 0.52.0
(I also have images working when loaded from a URL, from taking a picture and from the Camera Roll/Gallery)
Related
When I add some image from my assets folder using require, the image is apparently being taken from a folder .png-cache , but react native probably has bad paths stored in them because I get an error wherever I've used the same file as the image source.
My code is:
<Image
source={require('#assets/images/thunder.svg')}
height={20}
width={20}
resizeMode={'contain'}
style={styles.actionButtonIconStyle}
/>
The image doesn't show up and the console shows:
Error: Asset not found: C:\Users\<project path>\src\assets\images\.png-cache\thunder-31748fee8334daf886e2bea1259f80c9#3x.png for platform: android
at getAbsoluteAssetRecord (C:\Users\<project path>\node_modules\metro\src\Assets.js:110:11)
at async getAsset (C:\Users\<project path>\node_modules\metro\src\Assets.js:238:18)
at async Server._processSingleAssetRequest (C:\Users\<project path>\node_modules\metro\src\Server.js:352:20)
at async Server._processRequest (C:\Users\<project path>\node_modules\metro\src\Server.js:427:7)
Not sure why the current paths are not valid. Is it possible to make it so that the old cached paths are forgotten and new cache file generated?
What I've tried:
I renamed one image file and it worked but I wouldn't want to rename all the files, looking for a way to reset the cache.
I looked at the solution in Reset internal android image cache in React Native but I can't have dynamic paths in require so this solution didn't work.
I see first time using like #asset...
In my code i everytime use like this:
<Image
source={require('../assets/images/thunder.svg')}
height={20}
width={20}
resizeMode={'contain'}
style={styles.actionButtonIconStyle}
/>
am i missunderstanding what you need?
My problem was solved by resetting the react native cache with the command:
npm start -- --reset-cache
I am building an IOS application using ReactNative. My app needs to display image from the local file system or gallery or the ones captured by the camera. But it is not working. I am displaying something like this.
<FastImage
style={[imageStyle.image]}
source={{ uri: source }}
/>
This is the library I am using, https://github.com/DylanVann/react-native-fast-image. The source value is something like this.
As you can see, it is not displaying the image. What is wrong with my code and how can I fix it?
I also tried prepending "file://" to the path as well. It did not work either.
If you are using a local file. The source prop should have a file path instead of a uri. Let’s say your image is located at ./Images/myImage.png. Try this:
source={require("./Images/myImage.png")}
const directoryPath = Platform.OS === 'android' ? RNFS.PicturesDirectoryPath : RNFS.DocumentDirectoryPath;
<FastImage
style={YOUR_IMAGE_STYLE}
source={{uri: `file://${directoryPath}/${YOUR_IMAGE_FILE_NAME}`}}
/>
PS: on Android, must use file://
PS: Need enable fs permission, ref to ENOENT: open failed: EACCES (Permission denied), open '/storage/emulated/0/Download/ on Android, and IOS file downloaded not able to be located on device on iOS.
I am using react-native-config for setting environment variable in my react native project. I have a local image url in my .env config file. I am able to get the local image url in my component using Config.LOGO_URL. Code snippets of files are following:
Environment config file i.e .env
LOGO_URL='logo.png'
I am using the LOGO_URL in the component as below:
import Config from 'react-native-config';
render() {
<View>
<Image source={require(`../../assets/images/${Config.LOGO_URL}`)} />
</View>
}
When I am trying to use config variable Config.LOGO_URL in Image source I am getting error invalid call in require(). However, hardcoded path to image source is working as expected.
Am I missing something? Thanks! in advance.
The problem is not with Config its with the way that you are accessing the images in runtime, as its a static resource you will have to require it beforehand and the use something like a switch to change your logo.
More info in the below answer on requiring images.
React Native - Image Require Module using Dynamic Names
Building a React Native app with Expo, the Javascript bundle fails after getting the error Unable to resolve "../stores/__fixtures__/matchlist/matchlistSourceFixture" from "src/containers/MatchlistSwipeContainer.tsx", despite the fact that I am 100% sure this file exists and its relative path in this instance is correct – especially as I’m using VSCode and it complains if the path isn’t right and I’m using VSCode’s autocomplete to begin with.
If I move the file into any other directory that is not with __ dunder affixes and update the relative path accordingly, it can find the file perfectly fine.
I’ve checked other similar topics with Unable to resolve module errors, but they all seem to be related to third-party packages, whereas this is a local file.
Import statement:
import { matchlistSourceFixture } from '../stores/__fixtures__/matchlist/matchlistSourceFixture';
Export statement in the file in matchlistSourceFixture.ts:
export const matchlistSourceFixture = {...}
Attached is an image of the error message in the Expo iOS app. The message stating that the file doesn’t even exist (it has a .ts extension by the way) makes me think the relative path isn’t really the issue here anyway.
Versions:
React 16.3.1
Expo 27.0.0
Exp 54.0.0
It seems like __fixtures__ dirs are blacklisted by default in RN: react-native/local-cli/util/Config.js.
See this comment on overriding the default.
When I do the following:
<Image source={require('./images/hex-loader2.gif')} style={{width:400,
height: 400}} />
I get the following error:
Unable to resolve module ./images/hex-loader2.gif from
/Applications/react/xxxx/views/LoginView.js: Invalid directory
/Applications/react/xxxx/views/images/hex-loader2.gif
Folder Structure is:
projectRoot > views > images
Any ideas why?
When I put the image at the same level of LoginView.js it works but as soon as I add it to the images folder I get the above error.