---
title: Using Flipper
---

import { Terminal } from '~/ui/components/Snippet';
import ImageSpotlight from '~/components/plugins/ImageSpotlight';

[Flipper](https://fbflipper.com/) is a platform for debugging React Native projects running 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.

Debugging your Expo projects with Flipper requires the following:

- Building your project into a [development build](/development/introduction/)
- Installing the [`expo-community-flipper`](https://github.com/jakobo/expo-community-flipper) config plugin

> The `expo-community-flipper` library is a [config plugin](/guides/config-plugins/) that adds native code to your project.

## Prerequisites

Before you get started, make sure you have the following installed on your computer:

- [Flipper desktop app](https://fbflipper.com/)
- [EAS CLI installed](/build/setup/#1-install-the-latest-eas-cli) and [logged in](/build/setup/#2-log-in-to-your-expo-account) to your Expo account

## Step 1: Run setup doctor

Open the Flipper desktop app and click the **Setup Doctor** button from the bottom left menu.

<ImageSpotlight
  alt="Setup Doctor modal in Flipper."
  src="/static/images/using-flipper/setup-doctor.jpg"
  style={{ maxWidth: 720 }}
/>

If any dependencies are missing, follow the instructions provided by Flipper to install them.

## Step 2: Install 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:

<Terminal cmd={['$ npx expo install expo-dev-client']} />

## Step 3: Install expo-community-flipper

The `expo-community-flipper` plugin depends on the `react-native-flipper` library. Run the following command to install both of them:

<Terminal cmd={['$ npx expo install expo-community-flipper react-native-flipper']} />

## Step 4: Add the config plugin

In the **app.json**, add `expo-community-flipper` to the `plugins` array:

```json app.json
{
  "plugins": ["expo-community-flipper"]
}
```

## Step 5: Configure a development build

To configure a development build for your project, run the following command:

<Terminal cmd={['$ eas build:configure']} />

This command will generate the **eas.json** file in your project, which will contain various build profiles.

Inside the `"development"` build profile in **eas.json**, add the `android.buildType` property to generate a **.apk** for an Android device or emulator. To test your project on the iOS simulator, add the `ios.simulator` property to the build profile.

An example of a build profile with the configuration mentioned above is shown below:

```json eas.json
{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true
      }
    }
  }
}
```

After you have configured the build profile, run the following command to build the project:

<Terminal cmd={['$ eas build --profile development --platform all']} />

Once the builds are complete, you can download them from [Expo's website](https://expo.dev/accounts/[account]/projects/[project]/builds). From there, you can install them on your devices or your emulator/simulator.

## Step 6: Run the development server

Run the following command to start a development server:

<Terminal cmd={['$ npx expo --dev-client']} />

Once the development server is running, open the Flipper desktop app and select your device or simulator under **App Inspect**:

<ImageSpotlight
  alt="Open a device or emulator/simulator in Flipper under App Inspect."
  src="/static/images/using-flipper/app-inspect.jpg"
  style={{ maxWidth: 720 }}
/>

## Limitations

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](https://github.com/jakobo/expo-community-flipper/issues/27) in the `expo-community-flipper` GitHub repository.

## More

- [Flipper](https://fbflipper.com/docs/features/react-native/)
- [expo-community-flipper](https://github.com/jakobo/expo-community-flipper#expo-community-flipper)