Інтеграція Flipper для отладки мобільного додатку (React Native/Android)
Flipper — десктопний інструмент від Meta для отладки мобільних додатків. На React Native й Android він дає те, чого немає в стандартному Chrome DevTools: інспектор нативного layout, network inspector з тілами запитів, перегляд SharedPreferences й AsyncStorage, crash reporter й логи пристрою — все в одному вікні.
Базова інтеграція для React Native
Починаючи з React Native 0.62 Flipper включений в шаблон проекту. Якщо створювали проект командою npx react-native init, Flipper вже є — потрібно тільки запустити Flipper-додаток на Mac/Windows й запустити додаток у дебаг-режимі. Клієнт-серверне з'єднання встановлюється автоматично через локальну мережу.
Для старих проектів або при сломаній інтеграції — додаємо залежності вручну:
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()
}
Критично: Flipper тільки у debug builds. if (BuildConfig.DEBUG) обов'язковий — SDK не повинен ініціалізуватись у release.
Network Inspector
Найбільш корисний плагін. Показує всі HTTP-запити з заголовками, тілами й часом ответу. Для React Native — підключається до fetch й XMLHttpRequest автоматично. Для OkHttp в нативному Android:
val networkInterceptor = FlipperOkhttpInterceptor(NetworkFlipperPlugin())
OkHttpClient.Builder().addNetworkInterceptor(networkInterceptor).build()
Layout Inspector
Аналог Chrome DevTools Elements для нативного UI. Дозволяє кликнути на будь-який елемент екрана й побачити його нативні властивості: реальні розміри, margins, accessibility properties. Для React Native особливо корисен при отладці Yoga layout — видно computed flex values, які не видні в JS-інспекторі.
Проблеми при настройці
Flipper чутливий до версій. Типовий краш при інтеграції — несумісність flipper-folly з NDK версією в проекті, або конфлікт fbjni. Якщо видите CMake Error при збиранні Android — перевірте, що версії в android/gradle.properties:
FLIPPER_VERSION=0.182.0
совпадають з тим, що очікує поточна версія RN. Матриця сумісності є в офіційній документації Flipper.
На M1/M2 Mac потрібен Rosetta для запуску iOS-симулятора з Flipper у деяких конфігураціях — це відома проблема, вирішується через arch -x86_64 pod install.
Орієнтири по строкам
Настройка Flipper з Network Inspector й Layout Inspector — 1 день, включаючи вирішення типових проблем сумісності версій.