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);
}
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'm using amazon s3 as CDN, everything is working fine when I run the application using 'yarn dev'(domain added to next config). If I check inspect I can see the following value in the src attribute of the img element:
src="/_next/image?url=https%3A%2F%2Fcf-simple-s3-origin-gallery-hior-021672050205.s3.us-east-2.amazonaws.com%2FslidesImages%2Flogo.png&w=640&q=75"
When I'm running 'yarn build & yarn start' the src attribute set as the following:
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
which causing the issue loading the images, what am I missing here?
I was able to find the root cause for that issue(also reproduced with static images).
I added an unnecessary config variable inside the component which disabled the React client-side and causing the loading issue.
export const config = {
unstable_runtimeJS: false,
};
though this is probably not the issue, I had a similar problem, just make sure that if you are using ReactJS to have className instead of class
I have an Expo managed react native application. I created my .env file in the root of my project, installed react-native-dotenv and set up babel to use it. After a while I managed to get it to work.
I have my environment variable
ENDPOINT=http://127.0.0.1:8000/api
and i use it with
process.env.ENDPOINT
After a while I decided to test the android version of the app, so i changed the endpoint url to my LAN ip and restarted the server. The problem is that even after restarting the server, the cache and the computer, when I call process.env.ENDPOINT it keeps the first url I set.
Here's a list of the things i tried:
restarting the server
restarting the server and the cache
restarting the whole computer
change the variable name to REACT_APP_ENDPOINT as many suggested (I get undefined, it's still stuck to ENDPOINT)
empty expo cache
The strange thing is that I already changed that same variable twice (from 127.0.0.1:8000 to 127.0.0.1:8080 and back for a problem with backend) and had the same problem, but it went away by itself after a couple of minutes (and server restarts).
This time I've been trying to get it to work for 7 hours and nothing has changed.
Any idea?
I had the same issue and managed to run the app with .env changes after using the following command.
expo r -c
reference: https://github.com/goatandsheep/react-native-dotenv/issues/75#issuecomment-728055969
After a couple hundred more tests I gave up and implemented a "custom" solution, without any external library:
Switched .env files to TypeScript files (E.g. .env.development -> env.development.ts)
Set up an object named env that has all environmental variables as properties
export const env = {
VAR1: 'foo',
...
}
Imported this constant inside the application entry point (in my case App.tsx)
Inside the main constructor assign env to global.env
Use global.env instead of process.env
Not sure if this is the best practice, but solved my problem for now, works like a charm and doesn't require me to reload my application at every change. I'm a bit concerned by the security aspect of having the environment in a global variable inside a js project, so any suggestion is still welcome
I am getting this warning with using Swipeout:
"
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See
Move data fetching code or side effects to componentDidUpdate.
If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: *** to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.
Please update the following components: Swipeout
"
Same thing for componentWillMount.
Of note, using npx react-codemod rename-unsafe-lifecycles does not work to alleviate this error.
I went into the code for Swipeout and manually added the UNSAFE_ but every time I compile the code, it reverts back.
I've opened up an issue with the page on GitHub but no response after several days.
Suggestions?
Thank you,
Meanwhile, I'd recommend you fork the project. Make the change, remove the OG package from your dependencies and install your own fork with:
npm install <YOUR-GITHUB-USERNAME>/<YOUR-REPO-NAME>
Oh, and while you're at it, if you've got the time, send them a pull request ;)
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.