How to clear react-native cache?

Question

In react-native development, there are multiple caches used when the app is built:

React-native packager cache
Emulator cache
Java side cache (.gradle) folder (only in android)
npm cache (if relevant?)

Am I missing something also? Because I'm trying to clear cache in react-native, to be able to repeat a bug that only occurs on first usage. But clearing those caches above did not help. This is on android. When the app is building, most of the rows DO NOT say UP-TO-DATE, as expected, because I cleared the cache.

But, there are still many rows where this text is printed. Like:

app:preBuild UP-TO-DATE

app:preDebugBuild UP-TO-DATE

:app:preReleaseBuild UP-TO-DATE

The question is, how can I clear the whole cache related to react-native development?

score 172 · Answer 1 · edited Sep 18 '18 at 10:11

172

For React Native Init approach (without expo) use:

npm start -- --reset-cache

edited Sep 18 '18 at 10:11

Mohammad Usman

37,952
20
92
95

answered Sep 18 '18 at 09:52

Haris Anwar

1,992
1
7
6

2

This helped me to fix [`Error: unknown`](https://stackoverflow.com/a/56539122/8740349) – Top-Master Jun 11 '19 at 10:03
2

can this be done without starting the metro bundler? – MattPark Aug 22 '19 at 18:22
2

For better approach, before this command close metro bundler and run this. – hakki Jan 30 '20 at 14:18
How do i only reset catch without starting npm ? – Hardik Desai Feb 01 '20 at 06:57
9

What does the `--` do? – kojow7 Feb 02 '20 at 03:35
14

@kojow7 '--' separate options from arguments. Everything after -- npm won't read as option and will pass along to start script (most unix/linux commands follow this option/argument separation convention) – Elizandro - SparcBR Jul 26 '20 at 22:25
I use this in package.json, in section "scripts": { "clear": "pid=$(lsof -i :8081 -a -c node -t) && kill $pid; rm -rf $TMPDIR/metro-*; npm start -- --reset-cache", – Elizandro - SparcBR Aug 18 '20 at 21:51
Awesome, helped me fix issue: https://github.com/software-mansion/react-native-reanimated/issues/1798 – ModusPwnens Mar 09 '21 at 23:23
it opens metro and stops there, then nothing happens – Haris Jun 03 '22 at 18:35
Does this clean `node_modules`, `ios/build`, `ios/Pods`, and `android/build`? – hayata_suenaga Feb 08 '23 at 00:28

score 121 · Answer 2 · answered Jun 21 '20 at 19:52

121

Simplest one(react native,npm and expo )

For React Native

react-native start --reset-cache

for npm

npm start -- --reset-cache

for Expo

expo start -c

answered Jun 21 '20 at 19:52

Balaji

9,657
5
47
47

8

I get "error: unknown option `--reset-cache'" what should I do...? – Leonard Nov 23 '20 at 10:15
4

@Leonard try with `yarn cache clean` – NineCattoRules Jan 05 '22 at 09:41

Vikram Biwal · Answer 3 · 2019-02-22T07:44:03.063

46

Clearing the Cache of your React Native Project:

npm < 6.0 and RN < 0.50:

 watchman watch-del-all && rm -rf $TMPDIR/react-* &&
 rm -rf node_modules/ && npm cache clean && npm install && 
 npm start -- --reset-cache

npm >= 6.0 and 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 --force &&
 npm install && npm start -- --reset-cache

edited Feb 22 '19 at 07:44

answered Jul 17 '18 at 07:20

Vikram Biwal

2,618
1
25
36

2

This seems the only way possible once got stuck with errors generated from cache that has old code. Really a pain if debugging and used some "console.log" in the RN code. Anyone has some more shorter solution, I mean to avoid that the RN framework use cached code? – Carmine Tambascia Jul 30 '19 at 09:17
1

Some considerations. 1) not always $TMPDIR variable is defined. 2) watchman command isn't always used. You can remove that part of the command or use ';' instead of '&&' after it 3) the dir names might differ. Mine is /tmp/metro-cache/ , not metro-bundler-cache-something...(RN 0.62) – Elizandro - SparcBR Jul 26 '20 at 22:41
The best solution I would say – O. Borcuhin Oct 28 '21 at 10:04

score 33 · Answer 4 · edited Jun 07 '23 at 18:52

33

Currently, it is built using npx, so it needs to be updated.

Terminal : npx react-native start --reset-cache

iOS : Xcode -> Product -> Clean Build Folder

Android : Android Studio -> Build -> Clean Project

edited Jun 07 '23 at 18:52

shim

9,289
12
69
108

answered Jan 12 '21 at 02:25

hong developer

13,291
4
38
68

score 29 · Answer 5 · answered Jul 08 '19 at 11:20

29

try this

react-native start --reset-cache

answered Jul 08 '19 at 11:20

spacedev

1,086
13
13

score 22 · Answer 6 · answered Jan 04 '19 at 09:28

22

For those who are using expo-cli

expo start -c

answered Jan 04 '19 at 09:28

Mohsin

1,586
1
22
44

Firoz Ahmed · Answer 7 · 2022-01-06T07:06:56.720

13

This is what works for me:

watchman watch-del-all && rm -f podfile.lock && rm -rf node_modules && yarn && yarn start --reset-cache

edited Jan 06 '22 at 07:06

answered Jun 18 '19 at 08:33

Firoz Ahmed

1,929
16
18

14

No need to remove your yarn.lock file you'll cause all your dependencies to be updated in the process. – Rob Oct 05 '20 at 15:46
1

Same with the podfile.lock, shouldn't be removed – sooper Mar 04 '22 at 16:39

score 12 · Answer 8 · answered Apr 22 '21 at 10:31

Below commands worked for me for Android and Yarn,

cd android && ./gradlew cleanBuildCache && cd .. &&
watchman watch-del-all && rm -rf node_modules/ &&
rm -rf $TMPDIR/react-native-packager-cache-* &&
rm -rf $TMPDIR/metro-bundler-cache-* &&  
yarn cache clean && yarn install && 
yarn start --reset-cache

Glitch_Znab · Answer 9 · 2020-05-22T02:41:53.873

Here's a great discussion on GitHub which helped me a lot. Clearing the Cache of your React Native Project by Jarret Moses

There are solutions for 4 different instances.

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

The solution is similar to Vikram Biwal's Answer.

And there is a discussion below in the given link, so even if the above 4 cases don't work for you, you can scroll through and find a possible solution.

Fabricio Cunha · Answer 10 · 2020-05-20T02:56:47.563

6

Clearing the Cache of your React Native Project: if you are sure the module exists, try this steps:

Clear watchman watches: npm watchman watch-del-all
Delete node_modules: rm -rf node_modules and run yarn install
Reset Metro's cache: yarn start --reset-cache
Remove the cache: rm -rf /tmp/metro-*

edited May 20 '20 at 02:56

answered May 20 '20 at 02:47

Fabricio Cunha

71
1
5

4

If I try `rm -rf /tmp/metro-*` I get `zsh: no matches found: /tmp/metro-*` I am using RN 0.64.1. Any idea? – Raphael Pinel May 14 '21 at 10:50
Escaping the star seems to work `rm -rf /tmp/metro-\*` – Roman Akash May 28 '23 at 20:17

score 5 · Answer 11 · answered Feb 26 '20 at 13:39

5

If you are using WebStorm, press configuration selection drop down button left of the run button and select edit configurations:

Double click on Start React Native Bundler at bottom in Before launch section:

Enter --reset-cache to Arguments section:

answered Feb 26 '20 at 13:39

Olcay Ertaş

5,987
8
76
112

score 3 · Answer 12 · answered Jan 04 '19 at 08:18

You can clean cache in React Native >= 0.50 and npm > 5 :

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

Apart from cleaning npm cache you might need to reset simulator or clean build etc.

score 2 · Answer 13 · answered Oct 23 '17 at 03:16

2

Have you tried gradle cleanBuildCache?

https://developer.android.com/studio/build/build-cache.html#clear_the_build_cache

answered Oct 23 '17 at 03:16

sebastianf182

9,844
3
34
66

score 1 · Answer 14 · answered Aug 31 '21 at 19:46

Well.. i want to share my experience about this issue:

I was facing this problem, and when I opened the task manager I notice many tasks being executed, and they were linked to my project folder.

So I restarted my PC, and when it turned on, I could install all I needed, so the problem got solved itself, it worked to me, hope this help somebody...

score 1 · Answer 15 · answered Feb 03 '23 at 08:04

1

npm start -- --reset-cache

Clean build cache

cd android && ./gradlew cleanBuildCache

https://medium.com/@abhisheknalwaya/how-to-clear-react-native-cache-c435c258834e

answered Feb 03 '23 at 08:04

Vaishnavi Maske

421
1
3
11

Please [edit] to make the relevant technical difference, or appreciated contibution in explanation, more obvious which this provides beyond the existing answers; because the core steps seem very similar to me. Note that linked content is not considered part of the answer post here. – Yunnosch Feb 03 '23 at 08:07

score 0 · Answer 16 · answered Jul 26 '19 at 21:16

0

I had a similar problem, I tried to clear all the caches possible (tried almost all the solutions above) and the only thing that worked for me was to kill the expo app and to restart it.

answered Jul 26 '19 at 21:16

Jack Wire

681
12
25

score 0 · Answer 17 · answered Sep 18 '20 at 11:35

0

I went into this issue today, too. The cause was kinda silly -- vscode auto imported something from express-validator and caused the bug.

Just mentioning this in case anyone has done all the steps to clear cache/ delete modules or what not.

answered Sep 18 '20 at 11:35

Eddie Lam

579
1
5
22

Saif Mohmd · Answer 18 · 2022-11-18T13:38:48.580

0

For android and Npm

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

edited Nov 18 '22 at 13:38

answered Aug 28 '22 at 21:54

Saif Mohmd

251
2
5

Rushikesh · Answer 19 · 2022-11-01T13:04:57.600

0

React native

 npm start -r-cache

or

yarn cache clean

Expo

expo start -c

edited Nov 01 '22 at 13:04

answered Nov 01 '22 at 12:47

Rushikesh

66
4

score 0 · Answer 20 · edited Apr 04 '23 at 12:36

0

Consider using the below code for a clean ios build:

cd ios && xcodebuild clean && cd .. && npm run ios

edited Apr 04 '23 at 12:36

rcanpahali

2,565
2
21
37

answered Apr 04 '23 at 10:41

Deepak Singh

749
4
16

score -1 · Answer 21 · answered Mar 14 '22 at 08:30

-1

Run in your terminal: expo prebuild --clean

answered Mar 14 '22 at 08:30

Daniel Danielecki

8,508
6
68
94

score -2 · Answer 22 · answered Nov 22 '21 at 13:06

-2

TO Clear cache in IOS/Xcode

Delete folders in /Users/{YOUR_USERNAME}/Library/Developer/Xcode/DerivedData/ and try again.

rm ~/Library/Developer/Xcode/DerivedData/*

answered Nov 22 '21 at 13:06

Shiva

11,485
2
67
84

How to clear react-native cache?

22 Answers22

TO Clear cache in IOS/Xcode

Linked