At Instamobile, we provide fully functional React Native codebases, that serve as the infrastructure groundwork for developers who build mobile apps. Every day, we meet customers who need to fully clean their React Native projects, in order to properly build newer versions of the projects. In this short article, we are going to show you what instructions you must run in order to fully clean your React Native project environment.
Usually, you want to fully clean your project if you:
- Ran a project on your machine that was in a different React Native version (to avoid the React Native Mistmatch error)
- Ran the same project previously, but in a different React Native version
- Bumped up package versions in the package.json file
- Modified ios/Podfile
- Opened the metro bundler in the wrong folder
- Changed your codebase to point to a different Firebase project
- Encounter build issues in Xcode or Android Studio
Fully removing the cache of your React Native environment is a good way to clean out your build after some time running the project so that you are sure your build includes only the most up-to-date files based on your source code.
How To Do a Full Clean of a React Native Project
In a Terminal, locate your React Native project and run the following commands in order
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 npm install && cd ios && pod update && cd .. npm start -- --reset-cache
Or, in a single command:
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
We recommend adding an alias to your ~/.bash_profile, so you can run this command much faster, without retyping it every time you need it. Trust us, in a fast moving environment such as the React Native ecosystem, you’ll need to run this command extremely often, given dependencies update so often. Especially if you are working on multiple React Native projects at the same time.
Simply open ~/.bash_profile and place this alias in it:
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"
Close and re-open your Terminal (or run source ~/.bash_profile), then you can simply run
cleanstart
to reset your entire React Native stage, including both iOS and Android builds.
Important: Once you clean your projects, you must also re-build them for both iOS and Android, so the correct dependencies get picked up. So you need to run the projects in Xcode / Android Studio or execute the run commands:
react-native run-android
or
react-native run-ios
Conclusion
In this article, we learned how to fully clean a React Native project, by making sure we take out all the caches, remove all the installed dependencies, cleaning out Xcode’s derived data, and killing the metro bundler (as well as other node processes). We also learned why this practice is important in a fast moving ecosystem such as React Native and how productive it is.
We highly recommend you also creating an alias in your .bash_profile file, in order to be able to clean and rebuild projects with a simple command, of your choosing.
