148

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

  1. React-native packager cache
  2. Emulator cache
  3. Java side cache (.gradle) folder (only in android)
  4. 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?

21 Answers 21

164

For React Native Init approach (without expo) use:

npm start -- --reset-cache
10
  • 2
    This helped me to fix Error: unknown
    – Top-Master
    Jun 11, 2019 at 10:03
  • 2
    can this be done without starting the metro bundler?
    – MattPark
    Aug 22, 2019 at 18:22
  • 2
    For better approach, before this command close metro bundler and run this.
    – hakkikonu
    Jan 30, 2020 at 14:18
  • 9
    What does the -- do?
    – kojow7
    Feb 2, 2020 at 3:35
  • 13
    @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) Jul 26, 2020 at 22:25
114

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
2
  • 6
    I get "error: unknown option `--reset-cache'" what should I do...?
    – Leonard
    Nov 23, 2020 at 10:15
  • 3
    @Leonard try with yarn cache clean Jan 5, 2022 at 9:41
45

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
3
  • 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? Jul 30, 2019 at 9: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) Jul 26, 2020 at 22:41
  • The best solution I would say Oct 28, 2021 at 10:04
29

try this

react-native start --reset-cache
27

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

22

For those who are using expo-cli

expo start -c

12

This is what works for me:

watchman watch-del-all && rm -f podfile.lock && rm -rf node_modules && yarn && yarn start --reset-cache
2
  • 13
    No need to remove your yarn.lock file you'll cause all your dependencies to be updated in the process.
    – Rob
    Oct 5, 2020 at 15:46
  • Same with the podfile.lock, shouldn't be removed
    – sooper
    Mar 4, 2022 at 16:39
11

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
7

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.

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

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

  3. NPM >=5 - watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start -- --reset-cache
  4. 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.

5

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

edit configurations

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

before launch

Enter --reset-cache to Arguments section:

arguments

5

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

  1. Clear watchman watches: npm watchman watch-del-all
  2. Delete node_modules: rm -rf node_modules and run yarn install
  3. Reset Metro's cache: yarn start --reset-cache
  4. Remove the cache: rm -rf /tmp/metro-*
1
  • 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? May 14, 2021 at 10:50
3

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.

2

Have you tried gradle cleanBuildCache?

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

1

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

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.

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.

0

React native

 npm start -r-cache

or

yarn cache clean

Expo

expo start -c
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
0

npm start -- --reset-cache

Clean build cache

cd android && ./gradlew cleanBuildCache

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

1
  • 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 3 at 8:07
-1

Run in your terminal: expo prebuild --clean

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.