A React Native project keeps five caches, and Metro's is the one people forget
Metro's bundler cache lives in your temp folder, not your project. Here is every cache a React Native app builds, where each lives and how to reset it.
A React Native project is three build systems in one folder: npm for JavaScript, CocoaPods and Xcode for iOS, Gradle for Android. Each keeps a cache, some inside the project and some elsewhere, and rm -rf node_modules only touches one of them.
Every cache, and where it lives
| Cache | Location | Resets with |
|---|---|---|
| Metro bundler | $TMPDIR/metro-* and $TMPDIR/haste-map-* | npx react-native start --reset-cache |
| JavaScript dependencies | node_modules in the project | Delete and reinstall |
| CocoaPods | ios/Pods and ~/Library/Caches/CocoaPods | pod deintegrate && pod install |
| Xcode build output | ~/Library/Developer/Xcode/DerivedData | Delete the project's folder there |
| Gradle | android/build, android/app/build, ~/.gradle | cd android && ./gradlew clean |
Metro's cache is the odd one out. It lives in your per-user temp folder, which is why a project folder can look clean while the cache persists. It is also the one to reset first when the app shows stale code.
Find Metro's cache
echo $TMPDIR
ls -d "$TMPDIR"/metro-* "$TMPDIR"/haste-map-* 2>/dev/null
du -sh "$TMPDIR"/metro-* 2>/dev/nullmacOS clears the temp folder on its own schedule, so this cache rarely grows without limit, but it can hold stale data for weeks. The temp folder itself is covered in /private/var/folders taking up space.
A full reset, in order
# From the project root
watchman watch-del-all 2>/dev/null
rm -rf node_modules "$TMPDIR"/metro-* "$TMPDIR"/haste-map-*
npm install
cd ios && pod install && cd ..
cd android && ./gradlew clean && cd ..
npx react-native start --reset-cacheFor an Expo project, npx expo start -c clears Metro's cache in one flag, and Expo's own download cache is in the Expo cache guide.
Where the gigabytes actually are
- DerivedData is usually the largest single item for iOS work. See Xcode DerivedData cleanup.
- Gradle caches every dependency version you have built with. See the Gradle folder.
- CocoaPods keeps a download cache shared by every project. See CocoaPods taking up space.
Common questions
Where is the Metro cache on a Mac?
In your per-user temp folder, in folders named metro- and haste-map-. Run echo $TMPDIR to see where that is.
How do I reset the Metro cache?
Run npx react-native start --reset-cache, or npx expo start -c for Expo projects. Deleting the metro- folders in $TMPDIR does the same.
Does deleting node_modules clear the React Native cache?
Only the JavaScript part. Metro, CocoaPods, Xcode DerivedData and Gradle all keep separate caches outside node_modules.
Which React Native cache uses the most space?
Usually Xcode DerivedData for iOS builds and the Gradle cache for Android, both outside the project folder.