search

facebook / flipper

A desktop debugging platform for mobile developers.
https://fbflipper.com/
MIT License
13.32k stars 954 forks source link

Question: Expo 49 React Native project, No Devices Found in Flipper. How to debug? #5092

Open troyshu opened 1 year ago

troyshu commented 1 year ago

I've followed the instructions here to use Flipper my Expo React Native project (SDK 49) but am still getting "No Devices Found" in Flipper when I run the development build Metro server. Trying to get Flipper working on my Android device.

How should I go about debugging this?

I am using a development build on my Android phone: e.g. used eas build --profile development --platform android, installed the build on my Android phone, connected to the local Metro server that was started with npx expo start

Flipper logs:

CleanShot 2023-08-29 at 06 46 40

When I plug my Android device into USB-C, Flipper detects the device but says React dev tools and a lot of other plugins aren't available for my application:

CleanShot 2023-08-29 at 06 47 17

http://localhost:8081/json does show entries:

[
  {
    "id": "1-3",
    "description": "XXX",
    "title": "Hermes React Native",
    "faviconUrl": "https://reactjs.org/favicon.ico",
    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D1%26page%3D3",
    "type": "node",
    "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=1&page=3",
    "vm": "Hermes",
    "deviceName": "Pixel 3a - 11 - API 30"
  },
  {
    "id": "1--1",
    "description": "com.swiftread.android",
    "title": "React Native Experimental (Improved Chrome Reloads)",
    "faviconUrl": "https://reactjs.org/favicon.ico",
    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D1%26page%3D-1",
    "type": "node",
    "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=1&page=-1",
    "vm": "don't use",
    "deviceName": "Pixel 3a - 11 - API 30"
  }
]
mboperator commented 1 year ago

You'd be amazed at the solution to this. I had the same problem running Expo 49, the newest React Native version and Flipper 0.203.0.

Mine was adapted from this solution

First add the magic string to your root layout Head

Flipper is looking for the string "React Native packager is running." at localhost:8081. Since we're running Expo, localhost:8081 contains the react-native-web client version of the app. We need to add the magic string.

app/_layout.tsx

import { config, GluestackUIProvider, Text } from "@gluestack-ui/themed"
import Head from "expo-router/head";
import {Stack} from "expo-router";
export default function Layout() {
  return (
    <>
      <Head>
        <title>Love List</title>
        <meta name="description" content="Lovelist" />
        <meta name="metro" content="<!-- React Native packager is running. -->" />
      </Head>
      <GluestackUIProvider config={config.theme}>
        <Stack screenOptions={{ headerShown: false }} />
      </GluestackUIProvider>
    </>
  );
}

Next Set expo.web.output to static.

The web client needs to render the head on first load (not after a React rerender) app.json

"expo": {
  "web": {
    "bundler": "metro",
    "output": "static"
  }
}