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
Related
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'm working on a task where I have to update a product images. Expo cache is posing a problem, when I update the product images and re-render the screen it does update my store state but doesn't show it. When I manually cleared expo cache it did work.
I have also tried using the 'Cache-Control' header, but that didn't solve the problem.
Is there a method I can call to clear expo cache ?
As far as I know the only way to clear Expo's cache is to add the -c flag to your expo start command.
Here's their page on useful commands:
expo start -c --localhost --ios
start expo server, clear cache, load only on localhost and open on iOS simulator
I don't think there's a method in their SDK that clears the cache while the app is running like you want to.
If you want to delete the cache you can use FileSystem from Expo. In that example you can delete the directory in the cache using FileSystem.deleteAsync
// Deletes whole giphy directory with all its content
export async function deleteAllGifs() {
console.log('Deleting all GIF files...');
await FileSystem.deleteAsync(gifDir);
}
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
according to expo documentation:
The most straightforward way to provide an icon for your app is to provide the icon key in app.json
so I added my own icon to the assets folder where expo's default icons are, and modified app.json to point to my icon:
"expo": {
...
"icon": "./assets/myIcon.png"
}
but when launching I get this error from expo:
Field: icon - cannot access file at './assets/myIcon.png
what am I missing? where should I put my Icon picture?
Solved
by running expo start -c to clear cache.
*Note: it took me a few minutes to sync with my expo client app!
Based on the conversation that I had with the question poster (#Blue Turtle) there are some take aways from this.
Image sizes
It is important to make sure that the image that you are using for your icon must be a perfect square. If it is not Expo will give an error similar to below
Error: Problems validating asset fields in app.json. See https://docs.expo.io/
• Field: icon - image should be square, but the file at './assets/icon.png' has dimensions 1242x2436.
The documents recommend that you use an image that has size 1024x1024 https://docs.expo.io/versions/latest/workflow/configuration/#icon
Local path or remote url to an image to use for your app's icon. We
recommend that you use a 1024x1024 png file. This icon will appear on
the home screen and within the Expo app.
Clearing the cache
Also when updating assets etc, it is advisable to close and restart your bundler, restarting using the following command expo start -c. Starting the bundler this way will ensure that your cache is cleared and that any changes that you have made to packages, assets etc will be made and you will hopefully experience less errors.
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)