Integrating Flipper for Mobile App Debugging (React Native/Android)
Flipper—desktop tool from Meta for mobile app debugging. On React Native and Android, it provides what standard Chrome DevTools lacks: native layout inspector, network inspector with request bodies, SharedPreferences and AsyncStorage viewing, crash reporter and device logs—all in one window.
Basic React Native Integration
Starting with React Native 0.62, Flipper is included in the project template. If created with npx react-native init, Flipper is already there—only run Flipper app on Mac/Windows and start your app in debug mode. Client-server connection establishes automatically via local network.
For old projects or broken integration—add dependencies manually:
Android (android/app/build.gradle):
dependencies {
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
exclude group:'com.facebook.fbjni'
}
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
exclude group:'com.facebook.fbjni'
}
debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
}
Application.kt:
if (BuildConfig.DEBUG) {
SoLoader.init(this, false)
val client = AndroidFlipperClient.getInstance(this)
client.addPlugin(InspectorFlipperPlugin(this, DescriptorMapping.withDefaults()))
client.addPlugin(NetworkFlipperPlugin())
client.addPlugin(SharedPreferencesFlipperPlugin(this))
client.start()
}
Critical: Flipper only in debug builds. if (BuildConfig.DEBUG) is mandatory—SDK shouldn't initialize in release.
Network Inspector
Most useful plugin. Shows all HTTP requests with headers, bodies, and response time. For React Native—auto-connects to fetch and XMLHttpRequest. For OkHttp in native Android:
val networkInterceptor = FlipperOkhttpInterceptor(NetworkFlipperPlugin())
OkHttpClient.Builder().addNetworkInterceptor(networkInterceptor).build()
Layout Inspector
Analog to Chrome DevTools Elements for native UI. Click any screen element and see native properties: real dimensions, margins, accessibility properties. For React Native, especially useful debugging Yoga layout—see computed flex values invisible in JS inspector.
Setup Issues
Flipper is sensitive to versions. Typical crash on integration—flipper-folly incompatibility with NDK version, or fbjni conflict. If you see CMake Error during Android build—check android/gradle.properties versions:
FLIPPER_VERSION=0.182.0
match what current RN expects. Compatibility matrix in official Flipper documentation.
On M1/M2 Mac, need Rosetta for iOS simulator with Flipper in some configs—known issue, solved via arch -x86_64 pod install.
Timeline Estimates
Flipper setup with Network and Layout Inspectors—1 day, including solving typical version compatibility issues.