Debugging React-Native with Flipper

You may see ‘flipper’ in Podfile or android source files.
However you would not know what it is.

Flipper is a mobile app debugger officially provided by Facebook(Meta).

Install tool

To debug your react-native app with flipper, you have to download Flipper from Flipper website.
Because you can’t find it in the Appstore.

You may try to run Flipper, but you can’t.
It is because flipper is a downloaded program from website.

To open apps installed from website, open apps with pressing Ctrl key.

or run

brew install — cask flipper

Flipper SDK

To connect your app to Flipper, you have to install flipper SDK by configuring project files.

android/gradle.properties.

open gradle.properties and modify FLIPPER_VERSION to latest

# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.147.1

Podfile

open ios/Podfile and modify Flipper version value to latest.

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

react-native-flipper

React-Native SDK is also required. Install react-native-flipper.

yarn add react-native-flipper

IDB

Now you can see welcome message of Flipper.

However Flipper will present the error like this if you are running app on iOS.

To solve this problem you should setup IDB.
Open Setup Doctor on the left side menu.

You can see the IDB warning on iOS section.

To setup IDB, you should install IDB.
Run below commands.

brew tap facebook/fb
brew install idb-companion

fb-idb can be installed by pip.

pip3.6 install fb-idb

If you get this error, you should upgrade python.

Upgrade python with this command.

python -m pip install --upgrade pip

And check the version of the upgraded python.

python3 --version
Python 3.8.5

Let’s try again install fb-idb.

pip3.8 install fb-idb

Find where idb is installed.

which idb

In my case idb is installed in this location.

/opt/anaconda3/bin/idb

Copy the path of idb to IDB binary location.

And press ‘Apply and Restart’ button.

Now you can see idb warning was disappeared.

And your iOS device will be connected to Flipper.

Debugging

Flipper provides many plugins to debug our apps.

Network

Network is built-in plugin to debug networking of your app.
You can see what API is called and how much cellular data is consumed.
Of course request/response header/parameters will be presented.
Just click ‘Network’ on the left side panel.

Redux-Debugger

To debug redux, you should install external plugin.
I am using react-debugger.
Just search ‘redux’ and press ‘install’ button.

To use react-debugger, you have to setup sdk on your app.
Install redux-flipper package.

yarn add react-native-flipper

And add debugger into redux middlewares like this.
Don’t add debugger into live app.

if (__DEV__) {
  const createDebugger = require('redux-flipper').default;
  middlewares.push(createDebugger());
}

Restart your app and click ‘Redux-Debugger’ on the left side panel.

You might notice that your app is be very slow.
To improve speed, you should add whitelist into redux-debugger like this.

middlewares.push(createDebugger({ stateWhitelist: [] }))

You can specify names of root state to debug.
If you specify empty to white list, you can’t see any reduced states.

React DevTools

Flipper provides ‘React DevTools’ plugin to debug react.
Click React DevTools on the left side panel, then the plugin will try to connect to your app.

If your flipper can’t connect to your app and emitted this error,

Check version of DevTools first.
My project is using 4.24.3.

Install react-devtools-core version of you saw above.

yarn add — dev react-devtools-core@4.24.3

Open package.json of your app project and append react-devtools-core into resolutions section.

"resolutions": {
  "react-devtools-core": "4.24.3"
}

Now DevTools could be able to connect to your app.

In this time, I won’t talk about details of React-DevTools.

Discussion

React-DevTools’s problem is caused by the version difference of react-devtools between Flipper and react-native in your app.
React-Native has a different version of react-devtools-core.

You can see built-in react-devtools-core with this command.

yarn list | more

References

Extensible mobile app debugger | Flipper

Installation | idb

Installation - pip documentation v22.1.2