fix(reactotron-react-native): only set DevMenu when in __DEV__ (#1527 by @frankcalise and @joshuayoes)

## Please verify the following:

- [x] `yarn build-and-test:local` passes
- [ ] I have added tests for any new features, if relevant
- [ ] `README.md` (or relevant documentation) has been updated with your
changes

## Describe your PR
- Closes #1513 
- Before we improperly included the DevMenu module in both debug and
release builds, this checks the `__DEV__` flag
- Now we access the module using `TurboModuleRegistry.get` instead of
`TurboModuleRegistry.getEnforcing` to avoid throwing a top level JS
error when it does not exist

---------

Co-authored-by: Joshua Yoes <[email protected]>

Author: frankcalise

.eslintrc.js

@@ -32,6 +32,7 @@ module.exports = {
       "react-native/Libraries/LogBox/Data/parseLogBoxLog.js",
       "react-native/Libraries/LogBox/LogBox.js",
       "react-native/Libraries/Core/NativeExceptionsManager.js",
+      "react-native/Libraries/NativeModules/specs/NativeDevMenu.js",
     ],
   },
   rules: {
@@ -57,4 +58,4 @@ module.exports = {
     "scripts",
     "**/CHANGELOG.md",
   ],
-};
+}

apps/example-app/app/devtools/ReactotronConfig.ts

@@ -3,7 +3,7 @@
  * free desktop app for inspecting and debugging your React Native app.
  * @see https://github.com/infinitered/reactotron
  */
-import { Platform } from "react-native"
+import { Platform, TurboModuleRegistry } from "react-native"
 
 import AsyncStorage from "@react-native-async-storage/async-storage"
 import { ArgType } from "reactotron-core-client"
@@ -16,16 +16,6 @@ import { goBack, resetRoot, navigate } from "app/navigators/navigationUtilities"
 
 import { Reactotron } from "./ReactotronClient"
 
-let DevMenu = null
-/**
- * This Platform.OS iOS restriction can be lifted in React Native 0.77
- * The `DevMenu` module was missing in Android for the New Architecture
- * See this PR for more details: https://github.com/facebook/react-native/pull/46723
- */
-if (Platform.OS === "ios") {
-  DevMenu = require("react-native/Libraries/NativeModules/specs/NativeDevMenu")
-}
-
 const reactotron = Reactotron.configure({
   name: require("../../package.json").name,
   onConnect: () => {
@@ -64,14 +54,19 @@ if (Platform.OS !== "web") {
  * or else your custom commands won't be registered correctly.
  */
 
+/**
+ * This Platform.OS iOS restriction can be lifted in React Native 0.77
+ * The `DevMenu` module was missing in Android for the New Architecture
+ * See this PR for more details: https://github.com/facebook/react-native/pull/46723
+ */
 if (Platform.OS === "ios") {
   reactotron.onCustomCommand({
     title: "Show Dev Menu",
     description: "Opens the React Native dev menu",
     command: "showDevMenu",
     handler: () => {
       Reactotron.log("Showing React Native dev menu")
-      DevMenu.show()
+      TurboModuleRegistry.get<{ show: () => void; getConstants: () => {} }>("DevMenu")?.show()
     },
   })
 }

lib/reactotron-react-native/src/plugins/devTools.ts

@@ -1,9 +1,52 @@
-import { Platform } from "react-native"
+import { Platform, TurboModuleRegistry } from "react-native"
 import type { ReactotronCore, Plugin } from "reactotron-core-client"
+import type { Spec } from "react-native/Libraries/NativeModules/specs/NativeDevMenu"
 
-let DevMenu = { show: () => {}, reload: () => {} }
-if (Platform.OS === "ios") {
-  DevMenu = require("react-native/Libraries/NativeModules/specs/NativeDevMenu")
+/**
+ * Lazily get the DevMenu module.
+ *
+ * This avoids trying a potentially risky call to React Native internals unless our dear developer actually wants to use it.
+ */
+const getDevMenu = (): Spec => {
+  const notAvailable = (method: string) => {
+    console.warn(`DevMenu.${method}() not available in this environment`)
+  }
+
+  const stubDevMenu: Spec = {
+    reload() {
+      notAvailable("reload")
+    },
+    show() {
+      notAvailable("show")
+    },
+    getConstants() {
+      return {}
+    },
+    debugRemotely() {
+      notAvailable("debugRemotely")
+    },
+    setHotLoadingEnabled() {
+      notAvailable("setHotLoadingEnabled")
+    },
+    setProfilingEnabled() {
+      notAvailable("setProfilingEnabled")
+    },
+  }
+
+  if (Platform.OS === "ios" && __DEV__) {
+    try {
+      // use TurboModuleRegistry.get instead of TurboModuleRegistry.getEnforcing, like at
+      // https://github.com/facebook/react-native/blob/main/packages/react-native/src/private/specs/modules/NativeDevMenu.js#L23
+      const DevMenu = TurboModuleRegistry.get<Spec>("DevMenu")
+      // the DevMenu module is not available in all environments, like Expo Go, so we need to check if it exists
+      if (DevMenu) return DevMenu
+      return stubDevMenu
+    } catch {
+      return stubDevMenu
+    }
+  }
+
+  return stubDevMenu
 }
 
 const devTools = () => () => {
@@ -12,10 +55,12 @@ const devTools = () => () => {
       if (command.type !== "devtools.open" && command.type !== "devtools.reload") return
 
       if (command.type === "devtools.open") {
+        const DevMenu = getDevMenu()
         DevMenu.show()
       }
 
       if (command.type === "devtools.reload") {
+        const DevMenu = getDevMenu()
         DevMenu.reload()
       }
     },

types/react-native/Libraries/NativeModules/specs/NativeDevMenu.d.ts

@@ -0,0 +1,17 @@
+declare module "react-native/Libraries/NativeModules/specs/NativeDevMenu" {
+  import type { TurboModule } from "react-native"
+  /**
+   * @see https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/NativeModules/specs/NativeDevMenu.js
+   * @see https://github.com/facebook/react-native/blob/main/packages/react-native/src/private/specs/modules/NativeDevMenu.js#L15-L21
+   */
+  export interface Spec extends TurboModule {
+    show: () => void
+    reload: () => void
+    debugRemotely: (enableDebug: boolean) => void
+    setProfilingEnabled: (enabled: boolean) => void
+    setHotLoadingEnabled: (enabled: boolean) => void
+  }
+
+  const DevMenu: Spec
+  export default DevMenu
+}