---
title: Using Flipper
description: A guide on installing and configuring Flipper for debugging an Expo project.
---

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

[Flipper](https://fbflipper.com/) 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.

## 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
- Debugging your Expo projects with Flipper requires creating a [development build](/develop/development-builds/introduction/) of your project

<Step label="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>

<Step label="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>

<Step label="3">

## Add `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`](/versions/latest/sdk/build-properties) and enable Flipper in the plugin configuration:

<Terminal cmd={['$ 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`](/versions/latest/sdk/build-properties/#pluginconfigtypeios--properties) property and set it to `true` in the plugin configuration:

```json app.json
{
  "plugins": [
    [
      "expo-build-properties",
      {
        "ios": {
          "flipper": true
        }
      }
    ]
  ]
}
```

<Collapsible summary="Using SDK 47 or lower?">

> The above configuration only works with SDK 48 or above. For SDK 47 and lower, use the following steps described:

The [`expo-community-flipper`](<(https://github.com/jakobo/expo-community-flipper#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']} />

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

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

</Collapsible>

</Step>

<Step label="4">

## Configure and install a development build

To configure and install a development build, follow the instructions below:

- [Android Emulator or iOS Simulator](/develop/development-builds/create-a-build/#create-a-development-build-for-emulatorsimulator)
- [Physical device](/develop/development-builds/create-a-build/#create-a-development-build-for-the-device)

</Step>

<Step label="5">

## Run the development server

After installing the build, run the following command to start a development server:

<Terminal cmd={['$ 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**:

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

</Step>

## 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/)