Clear Caching on React native Application and some useful command

This is the most important things to clear the cache of React Native Application because of if we add some library to our project then running react native project there are many issues occurs.

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?) and many other caches.

How to remove cache?

Run the following command to remove your cache from React Native Application. before running following command, we will require to install the Watchman in our system. how we install watchman. please look once our previous setup React Native blog. https://mobikul.com/setup-react-native/

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

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

Remove bundle in the Android platform-

Run the following command to clear bundle, generate new bundle. and then run the React Native Application in your Android device or Emulator.

react-native bundle --platform android --dev false --entry-file index.js   --bundle-output android/app/src/main/assets/index.android.bundle   --assets-dest android/app/src/main/res/ && react-native run-android\

1	react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ && react-native run-android\

this command is important when we changing something on our code that is not reflected on our Application (bellow API level 21 devices). if we run above command it generates new bundle every time and code is reflected on our Application.

Ref- https://gist.github.com/jarretmoses/c2e4786fd342b3444f3bc6beff32098d

ashwini gupta 6 March 2021

. . .

Clear Caching on React native Application and some useful command

Leave a Comment Cancel Reply

Message Sent!