xref: /expo/docs/pages/guides/using-flipper.mdx (revision da751fd5) 
1---
2title: Use Flipper
3description: A guide on installing and configuring Flipper for debugging an Expo project.
4---
5
6import { Terminal } from '~/ui/components/Snippet';
7import ImageSpotlight from '~/components/plugins/ImageSpotlight';
8import { Collapsible } from '~/ui/components/Collapsible';
9import { Step } from '~/ui/components/Step';
10
11[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.
12
13It 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.
14
15## Prerequisites
16
17Before you get started, make sure you have the following installed on your computer:
18
19- [Flipper desktop app](https://fbflipper.com/)
20- [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
21- Debugging your Expo projects with Flipper requires creating a [development build](/develop/development-builds/introduction/) of your project
22
23<Step label="1">
24
25## Run setup doctor
26
27Open the Flipper desktop app and click the **Setup Doctor** button from the bottom left menu.
28
29<ImageSpotlight
30  alt="Setup Doctor modal in Flipper."
31  src="/static/images/using-flipper/setup-doctor.jpg"
32  style={{ maxWidth: 720 }}
33/>
34
35If any dependencies are missing, follow the instructions provided by Flipper to install them.
36
37</Step>
38
39<Step label="2">
40
41## Install `expo-dev-client`
42
43Since Flipper requires native code, you'll need to create a development build. To set it up, install the `expo-dev-client` library:
44
45<Terminal cmd={['$ npx expo install expo-dev-client']} />
46
47</Step>
48
49<Step label="3">
50
51## Add `expo-build-properties`
52
53The Expo SDK uses the bundled version of Flipper from `react-native`. For Android, Flipper is enabled by default.
54
55For iOS, you need to install [`expo-build-properties`](/versions/latest/sdk/build-properties) and enable Flipper in the plugin configuration:
56
57<Terminal cmd={['$ npx expo install expo-build-properties']} />
58
59Installing 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:
60
61```json app.json
62{
63  "plugins": [
64    [
65      "expo-build-properties",
66      {
67        "ios": {
68          "flipper": true
69        }
70      }
71    ]
72  ]
73}
74```
75
76<Collapsible summary="Using SDK 47 or lower?">
77
78> The above configuration only works with SDK 48 or above. For SDK 47 and lower, use the following steps described:
79
80The [`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:
81
82<Terminal cmd={['$ npx expo install expo-community-flipper react-native-flipper']} />
83
84Then, in the **app.json**, add `expo-community-flipper` to the `plugins` array:
85
86```json app.json
87{
88  "plugins": ["expo-community-flipper"]
89}
90```
91
92</Collapsible>
93
94</Step>
95
96<Step label="4">
97
98## Configure and install a development build
99
100To configure and install a development build, follow the instructions below:
101
102- [Android Emulator or iOS Simulator](/develop/development-builds/create-a-build/#create-a-development-build-for-emulatorsimulator)
103- [Physical device](/develop/development-builds/create-a-build/#create-a-development-build-for-the-device)
104
105</Step>
106
107<Step label="5">
108
109## Run the development server
110
111After installing the build, run the following command to start a development server:
112
113<Terminal
114  cmd={[
115    '# For SDK 49 and higher',
116    '$ npx expo start',
117    '',
118    '# For SDK 48 and lower',
119    '$ npx expo start --dev-client',
120  ]}
121  cmdCopy="npx expo start"
122/>
123
124Once the development server is running, open the Flipper desktop app and select your device or simulator under **App Inspect**:
125
126<ImageSpotlight
127  alt="Open a device or emulator/simulator in Flipper under App Inspect."
128  src="/static/images/using-flipper/app-inspect.jpg"
129  style={{ maxWidth: 720 }}
130/>
131
132</Step>
133
134## Limitations
135
136In 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.
137
138## More
139
140- [Flipper](https://fbflipper.com/docs/features/react-native/)
141