flipper/docs/getting-started/troubleshooting/react-native.mdx

---
id: react-native
title: Troubleshooting React Native Issues
sidebar_label: React Native Issues
custom_edit_url: https://www.internalfb.com/intern/diffusion/FBS/browsefile/master/xplat/sonar/docs/react-native.mdx
---
import useBaseUrl from '@docusaurus/useBaseUrl';

Flipper is a work in progress and issues may occur. This page contains known issues associated with React Native and provides steps you can take to try to resolve them.

Make sure the project is using the [latest Flipper SDK](getting-started/react-native.mdx#using-the-latest-flipper-sdk).

When using Flipper with React Native, two devices should show up:

1. **The 'React Native' device** - this is the "device" that talks to the Metro server and shows plugins that connect to or through Metro, such as the React DevTools, the Hermes Debugger and Metro logs.
2. **The device on which your app is running** - This is the device that Flipper connects to ADB / IDB. Flipper primarily support emulators and USB connected devices (examples: `SM760FS`, `Pixel 3`, `android_emulator`, and `iPhone 11`).

### I don't see the 'React Native' device

1. Make sure that the Metro server is running.
2. Make sure you are on React Native 0.62 or higher.
3. Verify that the `@react-native-community/cli` version is `0.47.0` or higher (using `yarn why @react-native-community/cli`).

### I see my device / emulator, but I can't see the app

1. Make sure you are running a debug build. Flipper *only* supports debug builds.
2. If you are upgraded from RN < 0.62.2, make sure you've updated all the dependencies and build related files according to the upgrade helper. For example: <https://react-native-community.github.io/upgrade-helper/?from=0.61.4&to=0.62.2>
3. If you upgraded, make sure you made a clean build: `cd android && ./gradlew clean`, `cd iOS && pod install --repo-update`.
4. For iOS, make sure it works on a simulator first.
5. (Unconfirmed) check the deployment info target in the XCode project settings. Target should be `iOS 9.0`.

### I'm seeing "certificate verify failed, type = SSL error" in the logs

Ensure that your device is set to the correct time and time zone for TLS verification to work.

### I see my app, but I don't see the external plugins I've installed

1. Make sure you've installed the desktop part of the plugin (usually through 'Manage plugins' in Flipper). If no plugins show up under 'Manage plugins' > 'Status' make sure you've selected your running device in the Flipper toolbar (and *not* 'React Native').
2. Make sure you've installed the app part of the plugin. Typically, the installation instructions of the plugin itself need to be followed here.
3. Make sure you've installed the latest version of `react-native-flipper` in your app, and run `pod install` in the `iOS` dir afterwards.
4. Make sure you've restarted both Flipper and your app.

### On iOS it seems that the Flipper dependencies are compiled when making a release build

That is correct. The dependencies won't be included in the release (when using `react-native-flipper` > 0.45) and can't be excluded from the build process.

### The React DevTools don't seem to connect

1. Make sure there are no other instances of the React DevTools are running (such as a stand-alone version). Restart Flipper if needed after closing other tools.
2. Make sure you have only one device running to connect to. If there are multiple devices, close them and try again (restart Flipper if needed).
3. Make sure there is only one RN app running on the device.

### Cannot inspect an element in the React DevTools: "Could not inspect element with id ..."

On selecting a specific element in the React DevTools, the "Could not inspect element with id XXX" appears when the version of the DevTools shipped in Flipper is incompatible with the `react-devtools-core` package used by the React Native application.

Flipper supports using a globally installed `react-devtools` (after using `npm install -g react-devtools@x.x.x`) instead of the embedded one. This should help with any compatibility issues.

Another way to fix this is to set the `resolutions` field in the `package.json` of the app to force a specific version and then run `yarn install`, for example:

```json
"resolutions": {
  "react-devtools-core": "4.13.2"
}
```

### How to select a specific element in the React DevTools?

1. Trigger the debug menu on your RN app (you can use the button in the Flipper toolbar).
2. Use `Show Inspector`. Flipper now follows the selection on your device.

### The Hermes Debugger does not connect

1. Make sure the Hermes engine is [enabled](https://reactnative.dev/docs/hermes).
2. Make sure only one device with React Native is running.
3. Make sure there is only one RN app running on the device.
4. Make sure the React Native app is *not* in debug mode already (trigger dev menu, and make sure that `Remote JS Debugging` is *not* enabled).

### iOS Build errors in React Native

First, make sure your cocoapods is up to date (`sudo gem install cocoapods`), and that you are using the [latest FlipperKit](../react-native.mdx#using-the-latest-flipper-sdk).

For inexplainable build errors, clone and verify if our [reference project](https://github.com/facebook/flipper/tree/main/react-native/ReactNativeFlipperExample) builds and runs locally. If it does, it's recommended to compare the `package.json` and `ios/Podfile` files with yours. If that doesn't yield anything, compare the `ios/Podfile.lock` as well to verify any transitive pod dependencies need updating.

### `YogaKit.modulemap` not found

1. Make sure you are opening the `.xcodeworkspace` dir when building from XCode, *not* the project file. Pods based projects should always be opened this way.
2. Make sure you've run `cd ios && pod install`.
3. Restarting your machine seems to magically fix the issue for quite some people. This might especially be needed after doing an XCode upgrade.
4. Make sure that the simulators are spawned by your current Xcode version. Force quite all simulators, run `sudo xcode-select --switch /Applications/Xcode.app` (update path were necessary) and start simulators & Flipper again.
5. Make sure the iOS build target version aligns with the podfile and target iOS 11 (see the following [Example](https://github.com/facebook/react-native/issues/28503#issuecomment-696026013)).
6. [Verify](https://github.com/facebook/react-native/issues/28503#issuecomment-621662670) XCode has enough permissions.
7. More solutions might be found in this [thread](https://github.com/facebook/react-native/issues/28503).

### Swift errors

If you experience errors such as `Undefined symbol: associated type descriptor for FloatLiteralType` or `Undefined symbol: __swift_FORCE_LOAD_$_swiftCompatibility50` after going through the [Getting Started](../index.mdx) page, do the following:

1. Open your project in Xcode.
2. Click in your project's name on the left side.
3. Make sure that you choose your project under `PROJECT` on the screen that has been opened.
4. Go to the tab `Build Settings`.
5. Search for `LD_RUNPATH_SEARCH_PATHS` (make sure that `All` is selected).
6. Double-click `Runpath Search Paths` and, in the dialog that opens, click on the plus button at the bottom-left corner and paste `/usr/lib/swift $(inherited)` there.

   <img alt="Screenshot showing the places mentioned in the first steps" src={useBaseUrl("img/troubleshooting-react-native-ios-swift.png")} />

7. Now search for `LIBRARY_SEARCH_PATHS`.
8. Double-click `Library Search Paths` and, in the dialog that opens, add the following items.

   ```bash
   "$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)"
   "$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)"
   "$(inherited)"
   ```

   :::note
   All of them should be added as `non-recursive` (the default).
   :::

   In the end it should look as follows:

   <img alt="Screenshot showing the places mentioned in the last steps" src={useBaseUrl("img/troubleshooting-react-native-ios-swift-2.png")} />

Now you can run your build normally.

## Opting out from Flipper (iOS)

Comment out the relevant lines in `ios/Podfile` and run `cd ios && pod install` again:

```ruby
  # use_flipper!
  # post_install do |installer|
  #  flipper_post_install(installer)
  # end
```

## Disable Flipper on CI builds (iOS)

To speed up CI builds, Flipper can be disabled on CI environments by making the Flipper SDK inclusion conditional (this works on most CI providers, feel free to customize the environment variable):

```ruby
  if !ENV['CI']
    use_flipper!
    post_install do |installer|
      flipper_post_install(installer)
    end
  end
```