Why you don’t need Flipper in your React Native app … and how to get by without it
Since Flipper was introduced in version 0.62, it’s been a big part of React Native developers’ workflows. This was great news for React Native developers! We had wanted better debugging tools for a long time.
But Flipper came with a cost: longer compilation times, had a slew of gotchas, apps sometimes had trouble connecting, and upgrades could fail that weren’t supposed to affect Flipper at all.
Eventually, the React Native core team decided to remove Flipper.
You can read the RFC if you want to learn more, but the short version is that they removed Flipper from the community CLI and stopped recommending using it by default.
What we do now? Flipper provided a lot of useful features for React Native developers, both with core features and plugins.
Let’s roll up our sleeves and replace them, one by one.
React DevTools
Often when opening Flipper, I head for the React DevTools to utilize its React render tree and Components Inspector, as well as the Profiler flamegraph.
Alternative:
Just run React DevTools by itself! This simple command will pop up a version of React DevTools in a lightweight Electron app.
npx react-devtools
Note that there are some possible gotchas with this tool in React Native apps.
Show device logs
While the venerable console.log calls can generally be seen in your Metro packager window output, native device logs themselves (such as from your simulator or device) are a bit harder to get at. Flipper gave a screen that showed all the device logs in one place.
Alternative:
On Android, you can use logcat either in Android Studio or from the CLI, like so:
# if using an emulator
adb logcat
# if using a real device
adb devices
adb -s "DEVICE_ID" logcat(An easier way to run it is via npx react-native log-android.)
On iOS, you can use Xcode’s built-in device logs:
You can also use the MacOS app Console.app if you don’t want to run it in Xcode. Launch it with Spotlight and then choose the running device and start streaming logs. You can search on the top right (put in your app’s name) to see just the logs for your app, or search for specific logs.
You can also try running npx react-native log-ios, but I couldn’t get it to work properly in my tests, so I recommend you stick with the above alternatives for now.
Log network calls
Fetching network calls and inspecting them is common. Flipper’s Network plugin lets you look at the request and response headers and payloads.
Alternative:
Use Infinite Red’s Reactotron! You can examine network requests and responses in the Timeline. Because this feature is so useful, we are discussing creating a dedicated network tab in a future release.
You can even copy requests as CURL to run them in your terminal.
View Databases
Flipper has a databases plugin that lets you inspect SQLite queries on-device.
Alternative:
Honestly, this is one of the harder ones to replace! Flipper’s database viewer is quite easy to use and powerful.
However, since SQLite is just a file, you can use your database viewer of choice and just find out where the SQLite file is in your file system (if using an iOS simulator) to open it and run queries.
Crash Reporter
Flipper’s Crash Reporter shows a notification when your app crashes on the native side, along with logs.
Alternative:
In production, you should already be using a crash reporter like Sentry, BugSnag, Crashlytics, or others like them. Ignite even comes with a convenient place to plug in your crash reporting setup. No app should ever ship without something like this in place!
In development, you can also see your crashes in the native logs (described above). This is essentially all this feature is doing in Flipper, anyway.
Shared Preferences Viewer
I rarely used this plugin, but it gives you access to the NSUserDefaults (iOS) or SharedPreferences (Android) underlying key value store.
Alternative:
React Native developers typically use react-native-mmkv or AsyncStorage for storing preferences, but note that you’d usually reach for these native tools if you’re sharing with native code.
If you do need access to this, you can dump them to logs on iOS or view the file directly in Android Studio.
Layout Inspector / UI Debugger
Flipper’s Layout Inspector and the UI Debugger can be useful for digging through native views and seeing information about them.
Alternative:
Use Xcode’s built-in view hierarchy inspector to see iOS native views.
- In Xcode, go to the Debug menu and then “Attach to Process”, and select the running app.
- Go back to the Debug menu and choose “View Debugging” and “Capture View Hierarchy”. You’ll see a hierarchy on the left and an exploded view in the middle. On the right, you can click the last two icons to see various info about the view.
For Android, use Android Studio’s Layout Inspector.
- Open Android Studio and launch your app from there
- Go to View -> Tool Windows -> Layout Inspector
This shows you the native views and lets you inspect them in a similar 3D exploded view as Xcode.
Navigation
I’ll be honest, I didn’t even know this plugin existed prior to researching for this article. It allows you to set up deep links and easily navigate places within your app.
Alternatives:
Reactotron has Custom Commands that can be set up to achieve a similar functionality. You can also set up deep links in a simple web page running in a browser on your device.
Hermes Debugger
If you’re using Hermes, there’s a special debugger for it in Flipper.
This one should be relatively straightforward! From the official docs:
- In a Chrome browser window, navigate to
chrome://inspect. - Use the “Configure…” button to add the dev server address (typically
localhost:8081). - You should now see a “Hermes React Native” target with an “inspect” link. Click this to open the debugger.
Life after Flipper
Now that you have the tools at your disposal to replace all the features you know and love from Flipper, you can safely dispose of it!
If you want even more goodness, definitely check out Reactotron and incorporate it into your development workflow. It’s a great, underrated tool, and beloved by the 15.5% of React Native developers who have discovered it.
BUT WAIT!
THERE’S MORE!
There’s a new debugger coming to React Native!
It’s called the React Native JS Inspector and you can run it with npx react-native start --experimental-debugger . When selecting “Open Debugger” in the Dev Menu, this will launch the new debugger using Google Chrome or Microsoft Edge.
While the new React Native JS Inspector is not exactly ready for prime time, there are already some useful tools there, and keep an eye out for future new features and improvements.
And lastly… don’t count out one last tool in your debugging toolbelt.
Are you ready for it?
It’s… Flipper.
Even though it is not recommended nor included in the official template anymore, Flipper is still there, and still works!
If you get in a situation where you need it, just go through the manual installation steps (Android & iOS) and get right back to Flippering.
If you need help with your React Native app, my company, Infinite Red, is the top React Native app development company around! Reach out and see if we can help level up your team and get your app shipshape for launch.
Huge thanks to Lizzi for her help researching and outlining this article, and to the folks on 𝕏 who pushed me to write it.
