ashish
All writing

Better debugging in React Native apps with Flipper

How Flipper helps you inspect layouts, network calls, and Redux state faster.

2 min read Ashish Kumar Badtiya

react-nativeflipper

What is Flipper? #

Flipper is a desktop platform for inspecting and debugging mobile applications on iOS and Android. Built on Electron, it combines a layout inspector, network inspector, and device log viewer under one roof. Its plugin API also lets you build custom tooling or pull in community plugins — for example, redux-flipper for inspecting Redux actions and state diffs.

By default, Flipper ships with:

  • Layout Inspector
  • Network Inspector
  • Databases
  • Images
  • Shared Preferences
  • Crash Reporter
  • React DevTools
  • Metro Logs

Setup #

If you are starting a new app on React Native 0.62 or newer, Flipper comes wired up out of the box. To integrate it into an existing project (>= 0.62), follow the platform guides:

Updating to the latest SDK version #

The Flipper SDK version bundled with a given React Native release can lag behind the desktop client. Run npm info flipper to check the latest stable release, then update your native configs:

Android (android/gradle.properties):

FLIPPER_VERSION=0.76.0

Then run ./gradlew clean inside your android/ directory.

iOS (ios/Podfile):

use_flipper!({ 'Flipper' => '0.76.0' })

Then run pod install inside ios/ (or npx pod-install from the project root).

Flipper takes a lot of friction out of day-to-day React Native debugging — give it a spin.