Flipper: A Desktop Debugger for React Native
Flipper is a desktop debugging platform for React Native, acting like Chrome DevTools for your mobile app. It connects to your local Metro server, letting you inspect component trees, view logs, and trigger reloads. The main footgun: the project is archived.
Why it exists
Flipper was created to give mobile developers a unified, extensible desktop GUI for debugging, similar to what browser dev tools provide for the web. It centralizes common tasks like log inspection, component tree analysis, and app reloads into a single interface.
The mental model
Think of Flipper as a control panel for your running React Native app. It's a separate desktop application that watches your local development server (Metro) and provides tools to peek inside your app's state and trigger actions, all without touching the simulator directly.
How it works
When you start your React Native app, the Metro bundler starts. Flipper detects this running Metro instance and establishes a connection, showing a 'React Native' device in its UI. This connection allows Flipper's plugins to communicate with your app. The two default plugins are React DevTools, for inspecting the component hierarchy, and Logs, for viewing console output.
When to use it
Flipper is integrated by default in React Native versions 0.62 and higher, so it's useful for debugging existing applications that already have it set up. Its key features are the integrated React DevTools for inspecting components and props, and the Logs viewer for filtering and searching console output. The UI also provides convenient buttons to reload the app or open the developer menu.
When not to use it
Do not use Flipper for new projects. The official Flipper repository is archived and read-only, meaning it is no longer actively maintained. It will not receive updates and may have compatibility issues with future React Native versions. Modern React Native development favors the standalone React DevTools and other debugging techniques.
One canonical example
A developer is trying to understand why a component isn't re-rendering. They open Flipper, which is connected to their running app. They select the 'React DevTools' plugin, find the component in the tree, and inspect its props and state in real-time. They see that a prop they expected to change is not, identifying the bug in the parent component's logic.
Interview question
What is the primary reason Flipper is not recommended for new React Native projects?
- a.The project has been archived and is no longer actively maintained.Correct
- b.It requires complex manual configuration for every new project.
- c.It introduces significant performance overhead to the application.
- d.Its core debugging features are now integrated directly into Metro.
Why? this is the answer
The card explicitly states that Flipper's repository is archived and no longer maintained, making it unsuitable for new projects due to potential future compatibility issues. Other options are not supported by the card's content; for example, Flipper was integrated by default in RN 0.62+.
Just read this? Test yourself on what you have been reading.
Read the original → github.com
- #react native
- #debugging
- #mobile
- #devtools
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles