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.
๐ฅ 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
- Open Xcode.
- Go to Product โ Clean Build Folder.
- 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
- Open Android Studio.
- Navigate to Tools โ AVD Manager.
- 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. ๐