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