How to Reset React Native Cache - NPM, iOS, Android, and More

Originally published on React Native Schoool.

Things can get... funky in React Native. Here's how to start fresh and reset a React Native app cache.

There are a lot of things in play in a React Native app including:

• NPM/Yarn
• Cocoapods
• Watchman
• Metro bundler
• React Native
• iOS Build
• Android Build

When things start to get weird/unexpected what do you do? Track down how to clear each one of those folders? Just clear one out?

Here's the easiest method...

How to Use React Native Clean Project to Clear Your React Native App

React Native Clean Project is a CLI plugin that will clear out all the things that could be causing you grief with your React Native app.

First, install the package as a development dependency:

yarn add react-native-clean-project --dev

or

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

Then you'll want to set up some scripts in your package.json. You've got two options here - interactive or auto.

// package.json

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

You can then run those via your command line

yarn clean OR npm run clean
yarn clean:auto OR npm run clean:auto

Why Interactive?

Interactive is going to let you choose what you clear from the cache. If you suspect it's one thing, or it's only affecting one platform, you can just focus there.

Benefit: Faster build times because you don't need to reinstall and rebuild all the caches.

Drawback: You have to monitor it and make decisions.

Why Auto?

Auto mode is going to use the CLI defaults to get the app back to a "freshly-cloned, never-started repo".

Benefit: Run it and forget it. No decisions or monitoring required.

Drawback: Slower initial rebuild time because you have to rebuild every cache.

Why is this necessary? Why does this happen?

Like I said before, there are a lot of moving parts in a React Native app.

We're working with a multiple ecosystems (NPM, Cocoapods), multiple platforms (iOS, Android, Web), and multiple tools (React Native, Metro, Homebrew). 💩 happens and sometimes we need to clean it up.