PEAKIQ - Software Solutions & Digital Innovation Peakiq Software Development

Peakiq Blog

Fully Cleaning Your React Native Project

Step-by-step guide to fully cleaning a React Native project. Clear Metro, npm, Yarn, iOS, and Android caches to fix build and runtime issues.

Editorial3 min read480 words
Fully Cleaning Your React Native Project

๐Ÿ”ฅ Cleaning Cache and Dependencies

For npm Users

Run the following commands in your projectโ€™s root directory:

watchman watch-del-all
rm -rf yarn.lock package-lock.json node_modules
rm -rf android/app/build
rm -rf ios/Pods ios/Podfile.lock
rm -rf ~/Library/Developer/Xcode/DerivedData
npm install && cd ios && pod update && cd ..
npm start -- --reset-cache

Or run everything in one line:

watchman watch-del-all && rm -rf yarn.lock package-lock.json node_modules && rm -rf android/app/build && rm -rf ios/Pods ios/Podfile.lock && rm -rf ~/Library/Developer/Xcode/DerivedData && npm install && cd ios && pod update && cd .. && npm start -- --reset-cache

For Yarn Users

If you're using Yarn, run:

watchman watch-del-all
rm -rf yarn.lock package-lock.json node_modules
rm -rf android/app/build
rm -rf ios/Pods ios/Podfile.lock
rm -rf ~/Library/Developer/Xcode/DerivedData
yarn install && cd ios && pod update && cd ..
yarn start -- --reset-cache

Or execute everything in a single command:

watchman watch-del-all && rm -rf yarn.lock package-lock.json node_modules && rm -rf android/app/build && rm -rf ios/Pods ios/Podfile.lock && rm -rf ~/Library/Developer/Xcode/DerivedData && yarn install && cd ios && pod update && cd .. && yarn start -- --reset-cache

๐Ÿ›  Cleaning iOS Build

If you're developing for iOS, clearing the build cache can help resolve many issues.

Option 1: Using Xcode

  1. Open Xcode.
  2. Go to Product โ†’ Clean Build Folder.
  3. Or use the shortcut: Option + Shift + Command + K.

๐Ÿ“ฑ Resetting Android Emulator or Wiping Simulator Data

If your Android emulator is acting up, you might need to reset it:

Wipe Android Emulator Data

  1. Open Android Studio.
  2. Navigate to Tools โ†’ AVD Manager.
  3. Select your emulator, then click on Wipe Data.

๐Ÿงน Cleaning Android Build Cache

If your Android build is not working correctly, clearing the Gradle cache can help:

cd android && ./gradlew clean

To ensure a full clean:

cd android && ./gradlew cleanBuildCache


๐Ÿš€ Automating Cleanup with an Alias

If you frequently clean your React Native projects, setting up an alias in your terminal profile can save time.

Step 1: Open Your Terminal Profile

Run one of the following commands based on your shell:

For zsh (Mac default):

open ~/.zprofile

For bash:

open ~/.bash_profile

Step 2: Add the Alias

Inside the file, add this alias:

alias cleanstart="watchman watch-del-all && killall -9 node && rm -rf yarn.lock package-lock.json node_modules ios/Pods ios/Podfile.lock android/app/build && npm install && cd ios && pod update && cd .. && npm start -- --reset-cache"

Step 3: Apply the Changes

Save the file and run:

source ~/.zprofile  # If using zsh
source ~/.bash_profile  # If using bash

Step 4: Use the Alias

Now, you can simply run:

cleanstart

This will fully clean your React Native project in one command! ๐ŸŽฏ


๐ŸŽ‰ Conclusion

Regularly cleaning your React Native project can help you:

  • Resolve caching issues.
  • Fix dependency conflicts.
  • Ensure smooth builds.

By following these steps, youโ€™ll have a fresh and optimized React Native development environment. ๐Ÿš€