Clearing the Cache of your React Native Project

React Native Clear Cache

RN < 0.50 - watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
RN >= 0.50 -  watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
RN >= 0.63 - watchman watch-del-all && rm -rf node_modules && npm install && rm -rf /tmp/metro-* && npm run start --reset-cache

npm >= 5 - watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start -- --reset-cache

Windows - del %appdata%\Temp\react-native-* & cd android & gradlew clean & cd .. & del node_modules/ & npm cache clean --force & npm install & npm start -- --reset-cache

Hmmm, not working for me, and I'm not using npm start, but I tried clearing the npm cache and running the watchmen command.

I just ran into an issue that required figuring out how to purge everything related to a React Native build and I feel all the pain here. For sanity, I finally went and Dockerized the bundler and pointed the native app at the container just to make sure I wasn't crazy. That helped, since I could at least know that my application was working in theory.

It is very frustrating to have to go to 6 different places to get this reset.

@safarishi
For the command:

rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-map-*

• rm -rf means to recursively remove all files/folders at the following path
• $TMPDIR is the environment variable for your systems temporary directory, it isn't the same on every platform
• $TMPDIR/metro-* means every file/folder that matches with the * wildcard (so metro-foo as well as metro-bar)
• The && means "run this command as well

So the whole command means to recursively purge any files that start with "metro-" or "haste-map-" from your system's temporary directory.

This worked for me, the metro cache file names have changed. I am using RN 0.59

So I get:

React Native version mismatch.

JavaScript version: 0.62.2
Native version: 0.59.8

Make sure that you have rebuilt the native code. If the problem persists try clearing the Watchman and packager caches with watchman watch-del-all && react-native start --reset-cache.

construct
[native code]:0

_construct
construct.js.19:9

Wrapper
wrapNativeSuper.js:26:22
```...

________________________
When I run:
MacBook-Pro$ watchman watch-del-all && rm yarn.lock && rm -rf node_modules && rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-map-* && yarn

I get:
bash: watchman: command not found

Any ideas on how to fix this?

@Carlos767
close your terminal, delete your project node_modules then
npm i && npm start -- --reset-cache

Thank me later or not at all. Either way it's all good:
npm start -- --reset-cache

Thanks!!

Thank you! deleting node_modules & npm install & npm start -- --reset-cache works fine.

what?

I had so many issues on clearing the cache. Turns out that the metro bundler and haste map has changed their directory structure. 👎

This is the script I use to clean the cache:
watchman watch-del-all && rm package-lock.json && rm -rf node_modules && rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-map-* && npm install

This has costed us DAYS, hope this helps someone :)

you save my day bro.. I tired every thing but nothing worked and finally your solution rocks

Getting same error.
error: bundling failed: Error: Unable to resolve module @babel/runtime/helpers/interopRequireDefault from <root>/index.android.js: Module @babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map

Yarn add @babel/runtime not working.

react-native start --reset-cache not working.

Uninstalling watchman not working.

Below command is also not working for me.
watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/metro-* && rm -rf node_modules/ && yarn cache clean --force && yarn install && react-native start --reset-cache

React Native Environment Info:
System:
OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
Memory: 82.13 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.3 - /usr/local/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5900203
Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.59.9 => 0.59.9
npmGlobalPackages:
react-native-cli: 2.0.1

If there are some other solutions, please suggest. Totally stuck at this problem for 2 days.

Wow this gist has really had traction. I apologize for not keeping this up to date. If anyone would like to provide me with the current standard for clearing your react native cache I can add it to the gist.

Extremely helpful. Facebook needs to hire this guy ASAP.

IDDQD

@jarretmoses Is there a way to create a button to programmatically clear cache in release app... What do u think?

So I get:

bash: watchman: command not found

Any ideas on how to fix this?

@Carlos767 FYI
brew install watchman if you're using brew

https://gist.github.com/jarretmoses/c2e4786fd342b3444f3bc6beff32098d#gistcomment-2788680
Worked for me, thanks.

I get no matches found when trying to remove react-native-packager-cache* and metro-bundler-cache-*. I am using M1 mac.

I get no matches found when trying to remove react-native-packager-cache* and metro-bundler-cache-*. I am using M1 mac.

Did you find anything? facing same issue...

@MusabAkram No I didn't. This command still does not work for me, I usually start the packager separately by running npx react-native start -- --reset-cache and then start my app with npx react-native run-ios. I have not faced this issue ever since.

@jarretmoses Would love an updated solution, nothing suggested is working for me

@gaberogan sorry. This gist is fairly dated now I’ll look into updating it. According to the react native docs the recommended using https://github.com/pmadruga/react-native-clean-project

I just use Flutter.... :D

@netgfx great example on how to get blocked on Github.

@jarretmoses hope someone gives @pmadruga some love for giving us something that really should be a part of the RN out-of-the-box tooling <3

Hey guys i hop all are good ,

I want to clear a console.log clear using programmatically method so how i can do this?
Is there any one know how this happening or doing?

Please help me to solve this. Thank you.

Note : also i upload the pic, so it's clear that what log's i talk about it. 👍

@jigo961257

console.clear()

My $TMPDIR ended in /, and current versions of NPM prevent npm cache clean with an error message, so I changed the TMPDIR strings and added --force to npm cache-clean, becoming:

watchman watch-del-all && rm -rf "${TMPDIR}react-native-packager-cache-*" && rm -rf "${TMPDIR}metro-bundler-cache-*" && rm -rf node_modules/ && npm cache clean --force && npm install && npm start -- --reset-cache --force

The error from NPM suggesting an alternative to npm cache clean --force:

npm ERR! As of npm@5, the npm cache self-heals from corruption issues
npm ERR!   by treating integrity mismatches as cache misses.  As a result,
npm ERR!   data extracted from the cache is guaranteed to be valid.  If you
npm ERR!   want to make sure everything is consistent, use `npm cache verify`
npm ERR!   instead.  Deleting the cache can only make npm go slower, and is
npm ERR!   not likely to correct any problems you may be encountering!
npm ERR! 
npm ERR!   On the other hand, if you're debugging an issue with the installer,
npm ERR!   or race conditions that depend on the timing of writing to an empty
npm ERR!   cache, you can use `npm install --cache /tmp/empty-cache` to use a
npm ERR!   temporary cache instead of nuking the actual one.
npm ERR! 
npm ERR!   If you're sure you want to delete the entire cache, rerun this command
npm ERR!   with --force.

npm ERR! A complete log of this run can be found in:

Here is the response formatted in Markdown:

To clean the npm cache on your system, you should run the npm cache clean command. This will purge any cached packages and modules from the local npm cache folder.

Clearing out the cache can help resolve certain npm errors or inconsistencies, and also frees up disk space by removing redundant packages that have accumulated over time.

For a step-by-step guide on how to use the npm cache clean command, I recommend checking out this handy tutorial: npm clear cache.

It covers the full syntax and provides useful examples of cleaning the npm cache. The tutorial also explains some best practices around when you may want to clear the local cache.

Let me know if running npm cache clean helps resolve the issue you are running into. That TeachingBee article should give you a good overview of how to leverage the command.

Thank me later or not at all. Either way it's all good:
npm start -- --reset-cache

Worked like a charm! Thanks man.

Works perfectly