📱 React Native Intermediate

What is Flipper in React Native?

Answer

Flipper is a desktop debugging platform for mobile apps (iOS, Android, React Native) developed by Meta. It provides a visual interface for inspecting, debugging, and profiling your React Native app. Core features: (1) Network inspector: see all network requests with URL, method, headers, request/response body, status codes, timing; (2) React DevTools: inspect component tree, props, state, hooks — integrated React DevTools; (3) Layout inspector: inspect view hierarchy, dimensions, styles — like Chrome DevTools Elements panel for native views; (4) Crash reporter: symbolicated crash reports; (5) Shared Preferences / AsyncStorage viewer — inspect stored values; (6) SQLite viewer; (7) Logs viewer — device logs; (8) Hermes Debugger — JS debugging when using Hermes engine. Setup: Flipper desktop app + Flipper SDK in React Native (included by default in recent RN versions). Status of Flipper (2024): Meta announced Flipper will be removed from React Native default setup (React Native 0.74+). The New Architecture uses new DevTools. React Native DevTools (replacing Flipper): React Native 0.73+ ships with a new DevTools experience based on Chrome DevTools Protocol. Open via j in Metro console or npx react-native start. Provides: JS debugging, network requests, profiling. For existing projects: Flipper still works and is actively maintained by the community even as Meta moves away from it.