Cache Clearing in React Native: A Handy Cheat Sheet

In the process of developing complex and sophisticated projects, it's common for a team of developers to disregard some aspects of the development process. For teams that face a lot of pressure from stakeholders and managers, it's understandable to be in this situation, and for the most part, the impact on the team's output isn't major. Nevertheless, it's crucial for developers to understand and optimize all aspects of the process.

One such aspect is the cache lifecycle of the development environment. So, in this article, we'll cover how to effectively handle and clear cache in React Native so you can keep your project tight and efficient and your output as high as possible.

First you need to understand what cache is and how it works in React Native. I'll also show you the mechanism to handle cache effectively in the different development units of React Native, assets, and emulators. Lastly, I'll cover additional cache clearing tools available for React Native.

Since this is not an introductory article, we expect you to have a project already set up. But if you don't have any experience with the platform, we recommend you check out our other articles on the subject or find additional information in the React Native documentation.

Understanding Cache in React Native

React Native and, by extension, iOS and Android are versatile and user-friendly development ecosystems. The development experience in React Native, in particular, is exceptionally smooth and seamless thanks to the robust and intricate integration with the native platforms it builds on. This is achieved, in part, by caching to speed up and streamline processes that would otherwise need long loading times or recompiling.

However, this strength can sometimes become a weakness when the caching mechanisms you depend on don't work as intended or when some unwanted change gets stuck in the cache. This is why developers working on mobile applications can sometimes feel frustrated as they struggle to find the source of the issue and guess, periodically proceeding to clean the cache when no other solution is working.

Now, there are different caches in React Native applications that allow the platform to be so seamless. Among them, you can find the packager cache, emulator cache, and npm cache. And because all these work in unison to speed up and streamline the development process, when one has an unwanted change or a bug, things can get funky.

So, I'll show you how you can clear them up so you can go back to developing quality code.

Handling React Native Cache

There are many methods to clear the cache in React Native. The question of which one to use depends on the particulars of your environment and tools. Let's break it down.

If you have npm >= 6.0 and React Native >= 0.50, run the following commands:

 
 
$ watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-*  
$ rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean –force 
$ npm install && npm start — –reset-cache

If you're using yarn instead of npm, you should use the following:

 
 
$ watchman watch-del-all &&
rm -rf $TMPDIR/react-native-packager-cache-* &&
rm -rf $TMPDIR/metro-bundler-cache-* && 
rm -rf node_modules/ && 
yarn cache clean &&
yarn install && 
yarn start -- --reset-cache

Now, this is a bit of a forceful method since it directly removes the directories where the cache lies. But there's a more straightforward approach that achieves the same result. All you have to do is ruin the following commands:

 
 
$ react-native start --reset-cache

Or, if you're using npm, run this one instead:

 
 
$ npm start -- --reset-cache

If you use yarn, use the following:

 
 
$ yarn cache clean

These commands will clear all the caches and then start your React Native application.

Conversely, if you're using Expo to develop your application, you should use the following command to achieve the same result:

 
 
$ expo start -c

In this case, 'c' stands for cache, and it tells Expo to clear the cache and start the application.

Emulators

These commands will serve you well to clear the cache on the build process, but what if you want to remove the emulator cache?

iOS

In order to reset the iOS emulator entirely and clear the data, all you have to do is go to the menu bar and click 'Hardware,' then 'Erase All Content and Settings.' This process will basically format the emulator and reset everything in it, so keep in mind that you might lose other apps that you've been working on in the same emulator.

If you want to just clean the iOS build for the current target on XCode, go to the menu bar and press 'Product,' then 'Clean Build Folder.' Additionally, you can press Option+Shift+Command+K.

Android

To clean the Android studio cache, open the Android Studio menu and click 'Tools,' then 'AVD Manager,' and select the menu in your emulator and select 'wipe data.'

Additionally, you can wipe the build cache by inputting the following command:

 
 
$ cd android && ./gradlew cleanBuildCache

Cache Clearing Tools in React Native

What if all this is too much to handle on a fast-paced project that requires hundreds of builds and has many moving parts? Well, we have an excellent tool for you called react-native-clean-project. This package is a CLI plugin that clears all the cache and other things that could hinder your React Native development process.

All you have to do to install it is run the following command:

 
 
$ npm install --save-dev react-native-clean-project

Then you must set up a script in your package.json to properly run the package. For the running method, you have two options: interactive and auto.

 
 
{
  "scripts": {
    "clean": "react-native clean-project",
    "clean:auto": "react-native clean-project-auto"
  }
}

And you can run them via your command line as follows:

 
 
$ npm run clean:auto

or

 
 
$ npm run clean:interactive

The benefit of the interactive option is that it lets you choose what to clear from the cache in React native. So if you suspect it's one thing or something that only affects one platform, you can focus on that.

However, if you just want to clear everything and not worry about finding culprits, you can select auto. Auto mode will use the CLI defaults to get the app back to a just-started state.

What's Next

In React Native, many moving parts and systems need to work together to facilitate a seamless and streamlined development experience. This is why React Native has become such a popular and sought-after platform for developers and employers alike. However, sometimes this tight integration and interoperability can cause a lot of headaches when things aren't properly maintained. No system is perfect or invulnerable, and React Native is certainly not the exception. That's why developers must have the tools and expertise to get the platform working for them and not against them.

If you're struggling with a bug and don't know where to start, you can consider our no-code testing solution at Waldo. We provide a platform for seamless testing that integrates with your product to provide rich feedback and information on the state of your product in real-time.

Learn more about it here.