CODEWITHSUNDEEP
javascriptjavaandroidreactjsreact-native
Ville Miekk-oja
Ville Miekk-oja

Reputation: 21055

How to clear react-native cache?

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?

Upvotes: 183

Views: 722234

Answers (28)

Rate Morgan
Rate Morgan

Reputation: 303

I solved my react-native cache problem by this way:

  1. open terminal, then cd 'your project root path'
  2. execute this command: npm start -- --reset-cache
  3. open your react native project, If the first run doesn't work, you may need to run it again.

Upvotes: 0

Yash
Yash

Reputation: 165

I know it's too late to reply but it might help someone:

In case you just want to clear cache just hit this command

npm cache clean --force

Happy coding :)

Upvotes: 0

Roman
Roman

Reputation: 711

For React Native > v0.7 (without expo) use:

watchman watch-del-all
rm -rf yarn.lock package-lock.json node_modules
rm -rf android/app/build
rm ios/Pods ios/Podfile.lock
rm -rf ~/Library/Developer/Xcode/DerivedData
$TMPDIR/react-native-packager-cache-* $ rm -rf $TMPDIR/metro-bundler-cache-*
npm cache clean --force
yarn cache clean
npm install && cd ios && pod update && cd ..
cd android && ./gradlew clean && cd ..
npm start --reset-cache

Upvotes: 4

Ronni Oliveira
Ronni Oliveira

Reputation: 41

To yarn use

watchman watch-del-all
yarn --reset-cache

Upvotes: 1

Matt Fleming
Matt Fleming

Reputation: 550

Here's some cache cleaning scripts to add to your package.json. It includes a 'secret-cache' workaround to clear a cache that is missed by react-native clean.

They will clean all the build & react-native caches, but not the package or pod caches, which is usually what you want.

    "clean:gradle": "cd android && ./gradlew --stop; rm -rf ~/.gradle/caches/*",
    "clean:android": "yarn clean:secret-cache && react-native clean --include android,metro,watchman",
    "clean:ios": "yarn clean:secret-cache && react-native clean --include metro,watchman && cd ios && xattr -w com.apple.xcode.CreatedByBuildSystem true build && xcodebuild clean; cd ..",
    "clean:secret-cache": "npx react-native start --reset-cache --projectRoot null 1>/dev/null 2>&1 || true",

The 'secret-cache' script will allow your .env updates to work even if you experience the react native dotenv cache bug: https://github.com/goatandsheep/react-native-dotenv#cacheing

Add them to package.json then yarn clean:ios && yarn ios or yarn clean:android && yarn android

In some cases this may still not be enough (e.g. react-native-auth0 still caches auth0Domain). So here's the nuclear option (requires package.json updates above):

# Nuclear option (100% definitely clean everything) - go get a coffee or something
yarn clean:secret-cache && npx react-native clean-project-auto && yarn clean:gradle && yarn && cd android && ./gradlew assemble

Upvotes: 0

karim elsaidy
karim elsaidy

Reputation: 1406

  • android cd android && ./gradlew clean
  • ios open xcode then choose product => clear all issue and clean build folder

then yarn start --reset-cache

Upvotes: 2

hong developer
hong developer

Reputation: 13926

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

Upvotes: 45

Deepak Singh
Deepak Singh

Reputation: 1145

Consider using the below code for a clean ios build:

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

Upvotes: 0

Vaishnavi Maske
Vaishnavi Maske

Reputation: 503

npm start -- --reset-cache

Clean build cache

cd android && ./gradlew cleanBuildCache

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

Upvotes: 2

Saif Mohmd
Saif Mohmd

Reputation: 339

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

Upvotes: 0

Rushikesh
Rushikesh

Reputation: 86

React native

 npm start -r-cache

or

yarn cache clean

Expo

expo start -c

Upvotes: 2

Daniel Danielecki
Daniel Danielecki

Reputation: 10590

Run in your terminal: expo prebuild --clean

Upvotes: 1

Firoz Ahmed
Firoz Ahmed

Reputation: 2006

This is what works for me:

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

Upvotes: 13

Shiva
Shiva

Reputation: 12592

TO Clear cache in IOS/Xcode

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

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

Upvotes: -3

Code Drop
Code Drop

Reputation: 105

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

Upvotes: 1

mmafrar
mmafrar

Reputation: 371

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

Upvotes: 14

Eddie Lam
Eddie Lam

Reputation: 619

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.

Upvotes: 0

Balaji
Balaji

Reputation: 11017

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

Upvotes: 133

Glitch_Znab
Glitch_Znab

Reputation: 586

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.

Upvotes: 9

Fabricio Cunha
Fabricio Cunha

Reputation: 131

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

Upvotes: 8

Olcay Ertaş
Olcay Ertaş

Reputation: 6236

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

Upvotes: 6

Jack Wire
Jack Wire

Reputation: 721

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.

Upvotes: 0

spacedev
spacedev

Reputation: 1190

try this

react-native start --reset-cache

Upvotes: 29

Vikram Biwal
Vikram Biwal

Reputation: 2826

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

Upvotes: 50

Mohsin
Mohsin

Reputation: 1596

For those who are using expo-cli

expo start -c

Upvotes: 22

Abhishek Nalwaya
Abhishek Nalwaya

Reputation: 184

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.

Upvotes: 3

Haris Anwar
Haris Anwar

Reputation: 2300

For React Native Init approach (without expo) use:

npm start -- --reset-cache

Upvotes: 202

sebastianf182
sebastianf182

Reputation: 9978

Have you tried gradle cleanBuildCache?

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

Upvotes: 1

Related Questions