Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Clearing the Cache of your React Native Project
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
@safarishi
Copy link

safarishi commented Feb 10, 2020

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 :)

What's the meaning for the follow command "rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-map-*" actually mean?

@sakillin
Copy link

sakillin commented Feb 19, 2020

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.

@the-habu
Copy link

the-habu commented Mar 30, 2020

Even simpler solution:
npm uninstall -g react-native-cli
rm -rf ~/Projects/react-native-*
echo "127.0.0.1 facebook.github.io" > /etc/hosts

Leave RN in the trash where it belongs. You'll thank me.

It's dangerous to go alone, take this: 🖕

@shardick
Copy link

shardick commented Apr 11, 2020

Works on Windows 10 & react native >= 0.60

@echo off
echo Deleting metro cache
rd %localappdata%\Temp\metro-cache /s /q 
del %localappdata%\Temp\haste-map*
echo Cleaning build
cd android & gradlew clean & cd .. 
echo Deleting node_modules
rd node_modules /q /s 
echo Cleaning npm cache
npm cache clean --force 
echo Installing modules
npm install
echo Done

@vnshah
Copy link

vnshah commented Apr 19, 2020

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

Worked like a charm! Thanks man.

@wikramdas
Copy link

wikramdas commented Apr 23, 2020

Hey guys hope you all are doing good.
I have a problem in react native app I want to add clear cache option in react native app for users to clear app cache when they want to clear basically my app is wallpapers app.
So kindly help me if it is possible.
Thanks

@disrae
Copy link

disrae commented May 19, 2020

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

@Jp3rd
Copy link

Jp3rd commented May 28, 2020

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

@Carlos767
Copy link

Carlos767 commented Jun 4, 2020

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?

@akinolu52
Copy link

akinolu52 commented Jun 6, 2020

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

@sebaxf
Copy link

sebaxf commented Jun 9, 2020

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

Thanks!!

@Qisheng-Lu
Copy link

Qisheng-Lu commented Jun 22, 2020

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

what?

@utkalpatel-dev
Copy link

utkalpatel-dev commented Jun 30, 2020

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

@thatsatul
Copy link

thatsatul commented Aug 30, 2020

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.

@jarretmoses
Copy link
Author

jarretmoses commented Sep 5, 2020

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.

@benwinston
Copy link

benwinston commented Sep 6, 2020

Extremely helpful. Facebook needs to hire this guy ASAP.

@comradem
Copy link

comradem commented Oct 17, 2020

IDDQD

@Joshmatjjen
Copy link

Joshmatjjen commented Nov 24, 2020

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

@mstrokin
Copy link

mstrokin commented Dec 7, 2020

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

@tgvishal
Copy link

tgvishal commented Mar 15, 2021

@hzburki
Copy link

hzburki commented Aug 18, 2021

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

@MusabAkram
Copy link

MusabAkram commented Nov 1, 2021

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...

@hzburki
Copy link

hzburki commented Nov 2, 2021

@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.

@gaberogan
Copy link

gaberogan commented Nov 2, 2021

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

@jarretmoses
Copy link
Author

jarretmoses commented Nov 16, 2021

@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

@netgfx
Copy link

netgfx commented Mar 2, 2022

I just use Flutter.... :D

@FilipMaslovaric
Copy link

FilipMaslovaric commented Mar 16, 2022

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

@FilipMaslovaric
Copy link

FilipMaslovaric commented Mar 16, 2022

@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

@jigo961257
Copy link

jigo961257 commented May 23, 2022

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. 👍

log

@akinolu52
Copy link

akinolu52 commented May 24, 2022

@jigo961257

console.clear()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment