feat: port react scan to react native

Author: RobPruzan

package.json

@@ -113,6 +113,7 @@
     "publint": "publint"
   },
   "devDependencies": {
+    "@shopify/react-native-skia": "^1.5.5",
     "@types/react": "^18.3.12",
     "@types/react-reconciler": "^0.28.8",
     "@vercel/style-guide": "^6.0.0",
@@ -121,6 +122,8 @@
     "publint": "^0.2.12",
     "react": "*",
     "react-dom": "*",
+    "react-native": "0.76.2",
+    "react-native-reanimated": "~3.16.1",
     "react-reconciler": "^0.29.2",
     "terser": "^5.36.0",
     "tsup": "^8.2.4"

pnpm-lock.yaml

@@ -1,11 +1,12 @@
 import type { Fiber, FiberRoot } from 'react-reconciler';
 import * as React from 'react';
 import { instrument, type Render } from './instrumentation/index';
+import { createStore } from './utils';
 import {
-  type ActiveOutline,
+  ActiveOutline,
   flushOutlines,
   getOutline,
-  type PendingOutline,
+  PendingOutline,
 } from './web/outline';
 import { createOverlay } from './web/index';
 import { logIntro } from './web/log';
@@ -110,16 +111,30 @@ interface Internals {
   >;
 }
 
-export const ReactScanInternals: Internals = {
+export type MeasurementValue = {
+  width: number;
+  height: number;
+  pageX: number;
+  pageY: number;
+};
+export type Measurement =
+  | { kind: 'dom'; value: DOMRect }
+  | {
+      kind: 'native';
+      value: MeasurementValue;
+    };
+
+export const ReactScanInternals = createStore<Internals>({
   onCommitFiberRoot: (_rendererID: number, _root: FiberRoot): void => {
     /**/
   },
-  get isProd() {
-    return (
-      '_self' in React.createElement('div') &&
-      !ReactScanInternals.options.runInProduction
-    );
-  },
+  isProd: null!, // todo
+  // get isProd() {
+  //   return (
+  //     '_self' in React.createElement('div') &&
+  //     !ReactScanInternals.options.runInProduction
+  //   );
+  // },
   isInIframe: window.self !== window.top,
   isPaused: false,
   componentAllowList: null,
@@ -136,7 +151,7 @@ export const ReactScanInternals: Internals = {
   reportData: {},
   scheduledOutlines: [],
   activeOutlines: [],
-};
+});
 
 export const getReport = () => ReactScanInternals.reportData;
 

src/core/index.ts

@@ -2,8 +2,10 @@ import { registerDevtoolsHook } from './fiber';
 
 // __REACT_DEVTOOLS_GLOBAL_HOOK__ must exist before React is ever executed
 // this is the case with the React Devtools extension, but without it, we need
-registerDevtoolsHook({
-  onCommitFiberRoot() {
-    /**/
-  },
-});
+
+// sometimes in expo this comes back as undefined
+// registerDevtoolsHook({
+//   onCommitFiberRoot() {
+//     /**/
+//   },
+// });