A guide on installing and configuring Flipper for debugging an Expo project.
Flipper is a platform tool for debugging React Native projects on an emulator/simulator or a physical device. It supports projects running on Android and iOS and is available as a desktop application on macOS, Windows, and Linux.
It offers various features such as a device log viewer, interactive native layout inspector, network inspector, local database inspector, crash reporter, and more. You can add more plugins available in the Flipper desktop app.
Before you get started, make sure you have the following installed on your computer:
1
Open the Flipper desktop app and click the Setup Doctor button from the bottom left menu.
If any dependencies are missing, follow the instructions provided by Flipper to install them.
2
expo-dev-client
Since Flipper requires native code, you'll need to create a development build. To set it up, install the expo-dev-client
library:
-
npx expo install expo-dev-client
3
expo-build-properties
The Expo SDK uses the bundled version of Flipper from react-native
. For Android, Flipper is enabled by default.
For iOS, you need to install expo-build-properties
and enable Flipper in the plugin configuration:
-
npx expo install expo-build-properties
Installing the package adds the expo-build-properties
plugin to your project's app.json. To enable Flipper, add the ios.flipper
property and set it to true
in the plugin configuration:
{
"plugins": [
[
"expo-build-properties",
{
"ios": {
"flipper": true
}
}
]
]
}
The above configuration only works with SDK 48 or above. For SDK 47 and lower, use the following steps described:
The expo-community-flipper
plugin depends on the react-native-flipper
library. Run the following command to install both of them:
-
npx expo install expo-community-flipper react-native-flipper
Then, in the app.json, add expo-community-flipper
to the plugins
array:
{
"plugins": ["expo-community-flipper"]
}
4
To configure and install a development build, follow the instructions below:
5
After installing the build, run the following command to start a development server:
-
npx expo start --dev-client
Once the development server is running, open the Flipper desktop app and select your device or simulator under App Inspect:
In your project, if a third-party library uses "useFrameworks": "static"
for iOS, integrating Flipper will not work since it is incompatible. For more information, see the notice on the compatibility issue in the expo-community-flipper
GitHub repository.