I work with React Native for around 4 years now. I've spent sleepless nights in GitHub issues when an app I maintain with hundreds of users started crashing during a large event. Over the time I've collected many advices I follow to avoid such adventures in the future.

Tip #1: speed up android dev builds using --active-arch-only

Thanks to the following tweet, I save over 10-15 seconds each time I run react-native run-android.

The change is simple, update your package.json scripts by adding the --active-arch-only flag to your run-android script:

  "scripts": {
    "android": "react-native run-android --active-arch-only",
    ...
  },

You'll need React Native version 0.66 or later.

Tip #2: debug your app with Flipper

Starting with React Native 0.62 there's a built-in support for Flipper — extensible mobile app debugger.

This becomes practically a necessity once you install a library that is built on React Native's TurboModules architecture like Reanimated, since TurboModules don't support the classic Remote Debugging yet:

One thing to mention: when using Flipper, don't enable the Remote Debugging option in the dev menu, it works without it.

Also, don't leave Flipper opened too long. At least on Mac, I get a noisy-spinny reminder from fans that it's opened after an hour or so.

Tip #3: don't forget your Error Boundaries

Let's face it — your app will inevitably crash. Be it because of junky internet connection, a bug in a library you use, the system's resource limiting or the user's creative approach on how to use your app.

The default behaviour in such cases is that the app just closes, without a further notice. Hopefully the next time user starts the app, it will run properly again, but chances are your app is now stuck in an endless crash-loop with the only chance for resurrection being the user re-installing your app.

My go-to solution for handling crashes is Sentry and their React Native library with Error Boundary wrapper. You can find an inspiration on how to use it in my Gist Snippet. Read more about the Error Boundary in Sentry's documentation.

A nice bonus of their implementation is that they provide a resetError prop, which is a function that re-mounts the boundary's children when called. A good idea is to clean up any caches, async-storages and other mutable storage that might be the cause of the error.

Tip #4: forget AsyncStorage, use MMKV

If you're in React Native development for some time already, you might remember that AsyncStorage was the primary way to save data on the user's device — the LocalStorage of mobile.

The original AsyncStorage is deprecated for some time already, and the community-maintained alternative has it's limitations.

Let's take your time to check out the alternatives. I personally recommend react-native-mmkv-storage — it's lightweight, ultra-fast, reactive (hooks included) and even encrypted, so you can store user's API tokens there too.

Tip #5: use Pressable components from Gesture Handler in lists to avoid flickers

I notice this myself, specifically in Google News app where items highlight as I "drag" them to start scrolling. I'm not sure whether the app is written in React Native, but the point is, you can easily prevent that with existing components. Bonus points are that they handle the touch events on the native side and don't require a roundtrip to play the animation — Gesture Handler's replacement components should feel snappier.

Perfectly demonstrated in a video in this Software Mansion's tweet:

See the documentation.

More tips to come

You'll find these in this post in the upcoming weeks. I also do Back-End development and Ops and I plan on sharing my tips from these journeys too.

Thanks for reading!