1--- 2title: Using Flipper 3--- 4 5import { Terminal } from '~/ui/components/Snippet'; 6import ImageSpotlight from '~/components/plugins/ImageSpotlight'; 7 8[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. 9 10It 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. 11 12Debugging your Expo projects with Flipper requires the following: 13 14- Building your project into a [development build](/development/introduction/) 15- Installing the [`expo-community-flipper`](https://github.com/jakobo/expo-community-flipper) config plugin 16 17> The `expo-community-flipper` library is a [config plugin](/guides/config-plugins/) that adds native code to your project. 18 19## Prerequisites 20 21Before you get started, make sure you have the following installed on your computer: 22 23- [Flipper desktop app](https://fbflipper.com/) 24- [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 25 26## Step 1: Run setup doctor 27 28Open the Flipper desktop app and click the **Setup Doctor** button from the bottom left menu. 29 30<ImageSpotlight 31 alt="Setup Doctor modal in Flipper." 32 src="/static/images/using-flipper/setup-doctor.jpg" 33 style={{ maxWidth: 720 }} 34/> 35 36If any dependencies are missing, follow the instructions provided by Flipper to install them. 37 38## Step 2: Install expo-dev-client 39 40Since Flipper requires native code, you'll need to create a development build. To set it up, install the `expo-dev-client` library: 41 42<Terminal cmd={['$ npx expo install expo-dev-client']} /> 43 44## Step 3: Install expo-community-flipper 45 46The `expo-community-flipper` plugin depends on the `react-native-flipper` library. Run the following command to install both of them: 47 48<Terminal cmd={['$ npx expo install expo-community-flipper react-native-flipper']} /> 49 50## Step 4: Add the config plugin 51 52In the **app.json**, add `expo-community-flipper` to the `plugins` array: 53 54```json app.json 55{ 56 "plugins": ["expo-community-flipper"] 57} 58``` 59 60## Step 5: Configure a development build 61 62To configure a development build for your project, run the following command: 63 64<Terminal cmd={['$ eas build:configure']} /> 65 66This command will generate the **eas.json** file in your project, which will contain various build profiles. 67 68Inside 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. 69 70An example of a build profile with the configuration mentioned above is shown below: 71 72```json eas.json 73{ 74 "build": { 75 "development": { 76 "developmentClient": true, 77 "distribution": "internal", 78 "android": { 79 "buildType": "apk" 80 }, 81 "ios": { 82 "simulator": true 83 } 84 } 85 } 86} 87``` 88 89After you have configured the build profile, run the following command to build the project: 90 91<Terminal cmd={['$ eas build --profile development --platform all']} /> 92 93Once 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. 94 95## Step 6: Run the development server 96 97Run the following command to start a development server: 98 99<Terminal cmd={['$ npx expo --dev-client']} /> 100 101Once the development server is running, open the Flipper desktop app and select your device or simulator under **App Inspect**: 102 103<ImageSpotlight 104 alt="Open a device or emulator/simulator in Flipper under App Inspect." 105 src="/static/images/using-flipper/app-inspect.jpg" 106 style={{ maxWidth: 720 }} 107/> 108 109## Limitations 110 111In 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. 112 113## More 114 115- [Flipper](https://fbflipper.com/docs/features/react-native/) 116- [expo-community-flipper](https://github.com/jakobo/expo-community-flipper#expo-community-flipper) 117
