placeholder hack

Author: RobPruzan

src/core/instrumentation/placeholder.ts

@@ -1,11 +1,42 @@
-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
 
-// sometimes in expo this comes back as undefined
-// registerDevtoolsHook({
-//   onCommitFiberRoot() {
-//     /**/
-//   },
-// });
+let attemptCount = 0;
+const MAX_ATTEMPTS = 3;
+
+// temporary hack since module is sometime uninitialized in expo
+//  fix is probably to remove circular imports
+function ensureDevtoolsHook() {
+  return new Promise((resolve) => {
+    function attempt() {
+      try {
+        const { registerDevtoolsHook } = require('./fiber');
+        if (registerDevtoolsHook) {
+          registerDevtoolsHook({
+            onCommitFiberRoot() {
+              /**/
+            },
+          });
+          resolve(true);
+        } else if (attemptCount < MAX_ATTEMPTS) {
+          attemptCount++;
+          setTimeout(attempt, 50);
+        } else {
+          resolve(false);
+        }
+      } catch (e) {
+        if (attemptCount < MAX_ATTEMPTS) {
+          attemptCount++;
+          setTimeout(attempt, 50);
+        } else {
+          resolve(false);
+        }
+      }
+    }
+    attempt();
+  });
+}
+
+if (typeof globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
+  ensureDevtoolsHook();
+}

src/core/native/scan.tsx

@@ -148,6 +148,11 @@ const dimensions = Dimensions.get('window');
 const isVisible = (x: number, y: number) => {
   return x >= 0 && x <= dimensions.width && y >= 0 && y <= dimensions.height;
 };
+const font = matchFont({
+  fontFamily: Platform.select({ ios: 'Courier', default: 'monospace' }),
+  fontSize: 11,
+  fontWeight: 'bold',
+});
 const getTextWidth = (text: string) => {
   return (text || 'unknown').length * 7;
 };
@@ -169,12 +174,6 @@ const ReactNativeScan = ({ id: _ }: { id: string }) => {
   // );
   const animatedOpacity = useDerivedValue(() => opacity.value);
 
-  const font = matchFont({
-    fontFamily: Platform.select({ ios: 'Courier', default: 'monospace' }),
-    fontSize: 11,
-    fontWeight: 'bold',
-  });
-
   return (
     <Canvas
       style={{