infinitered / ignite

Infinite Red's battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more!
MIT License
17.29k stars 1.37k forks source link

DevMenu is null in NativeModules #2678

Closed wisammechano closed 4 weeks ago

wisammechano commented 4 months ago

Describe the bug

This was my first time exploring Ignite and React Native, and while fiddling around, this custom command was failing because DevMenu was null. I tried searching for the DevMenu module, but I couldn't find any document about it besides the DevSettings module.

Ignite version

9.6.3

Additional info

System platform darwin
arch arm64
cpu 8 cores Apple M1 Pro
directory N /Users//Projects/n/N

JavaScript (and globally-installed packages) node 22.0.0 /opt/homebrew/bin/node npm 10.6.0 /opt/homebrew/bin/npm
npm 10.6.0
yarn 1.22.19 /usr/local/bin/yarn
create-react-app 5.0.1
create-react-library 3.1.1
pnpm 9.0.6 /usr/local/bin/pnpm

bun - not installed expo 50.0.17 managed Ignite ignite-cli 9.6.3 /Users//.npm/_npx/e31027f3785124a8/node_modules/.bin/ignite ignite src build /Users//.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build Android java - not installed android home - undefined iOS xcode 15.3 cocoapods 1.15.2 /Users//.rvm/gems/ruby-3.3.1/bin/pod Tools git git version 2.39.3 (Apple Git-146) /usr/bin/git
jamonholmgren commented 4 months ago

@markrickert it looks like you added this custom command, can you take a look?

markrickert commented 4 months ago

@wisammechano It looks like this functionality was removed in recent versions of react-native. We'll have to pull this example out as there's not really an easy way to programmatically show the dev menu on the device, unfortunately.

Thanks for bringing this to our attention!

frankcalise commented 3 months ago

@markrickert we could sub in for the expo one? https://docs.expo.dev/versions/latest/sdk/dev-client/#devclientopenmenu

frankcalise commented 3 months ago

From what I can tell, this just won't work in Expo Go.

If you build via CNG the native module is available. You can also toggle the Expo menu when expo-dev-client (when using CNG):

import * as DevClient from expo-dev-client
// ...
reactotron.onCustomCommand({
  title: "Show Dev Menu",
  description: "Opens the Expo dev menu",
  command: "showDevMenu",
  handler: () => {
    Reactotron.log("Showing Expo dev menu")
    DevClient.DevMenu.openMenu()
  },
})
frankcalise commented 4 weeks ago

Tested this on v10 branch and it does work since it isn't in the Expo Go environment.

We're not going to make any changes to dynamically remove this for Expo Go workflows at this time. Switch to a dev client and it'll work for you.

Thanks for reporting this though!