How to enable debug menu (by shaking device) in Release build in React Native development?
(I am not using Expo)
So the fact that you cannot do this on release is not exactly true. You could do something like this
import { NativeModules } from 'react-native';
...
onMenuButtonClick(){
NativeModules.DevMenu.show();
}
Good practice is to only add the button on DEV but technically you can add this on release as well.
There are other ways of doing this but they are a little more complicated and may not work on both platforms. I cannot current test this but this used to work on both platforms and its pretty easy to set up.
Sorry you can not enable the debug menu in release (production) builds.
Please refer below for more details: http://facebook.github.io/react-native/docs/debugging
Related
This answer does not work in reality. It seems that NativeModules.DevMenu.show() is not working in the release build. Any lead on this?
The React Native Developer Menu will not work in the release mode, because of the following line of code in this file in the react-native source code :
if (__DEV__)
This checks if you're in development mode, then it emits the event for dev menu. The codes are of course added into the release.
If you really do want to use in release mode, then you can fork the react-native repo and patch this line and use your own personal copy of react-native.
I would like to determine in react native code if the app is running in Expo Go or as a stand-alone iOS/Android app.
I can’t use __DEV__, because I would like to be able to determine this also for a production build.
You can use Expo's AppOwnership from Constants
import Constants from 'expo-constants'
const isRunningInExpoGo = Constants.appOwnership === 'expo'
source
Since classic builds are now deprecated and everyone will start using EAS Builds, you will need to use Constants.ExecutionEnvironment instead of appOwnership which is always null in builds done via EAS.
So you could use the following to check if in production:
ExecutionEnvironment.Standalone ＝== "standalone"
Documentation can be found here
I've had an app running on Expo SDK 41 and it had some basic usage of react-native-reanimated#~2.1.0 and debugging worked just fine.
At some stage SDK 41 was deprecated and I was forced to upgrade, so I went for the latest one which is 45.
After the upgrade I can no longer use remote debugging. When I turn on remote debugging, the app crashes with the following error
Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.
Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.
and I can't do anything (I can't even turn off remote debugging without clearing expo app data).
The issue seems to be related to react-native-reanimated (current version is 2.8.0)
Expo docs state this:
The new APIs in react-native-reanimated#2 use React Native APIs that
are incompatible with Remote JS Debugging. Consequently, you can only
debug apps using these APIs using Flipper, which is not yet available
in the Expo managed workflow. You will be unable to use Remote JS
Debugging if you use the new APIs from Reanimated 2. Remote JS
Debugging will continue to work if you only use the APIs that were
also available in Reanimated 1.
Tried to downgrade to react-native-reanimated#~2.1.0 did not work either.
I must be missing something, because otherwise it seems a bit ridiculous that I'm forced to upgrade SDK which in combination with react-native-reanimated does not allow me to do debug anymore.
Please advise if there is anything I can do.
Thanks
This is what that link to Expo's docs show me at this time:
Reanimated uses React Native APIs that are incompatible with "Remote JS
Debugging" for JavaScriptCore. In order to use a debugger with your app with
react-native-reanimated, you will need to use the Hermes JavaScript engine and > the JavaScript Inspector for Hermes.
Anyways, this appears to be an issue Reanimated themselves talk about in the docs
The workaround around this for some time has been this code shared in this answer here
It isn't even a reanimated problem particularly, but an inability of RN to develop using some synchronous features that pertain to debugging.
Anyways, hope this helps you
After posting a question on expo repository, I've got the following answer which actually does not solve the remote debugger issue, but gives the same alternative. Basically they suggested to use hermes engine
hi there! this is unfortunate and inconvenient for sure. it's a side effect of the direction the ecosystem is moving in - away from JavaScript Core and remote debugging in Chrome towards Hermes and attaching a debugger to the on-device Hermes engine. Reanimated no longer supports remote debugging in Chrome.
in order to debug JS using Reanimated in SDK 45+ we recommend using Hermes. you can set this up in your app.json as follows:
{
"expo": {
"// your other config here": "...",
"android": {
"jsEngine": "hermes"
}
}
}
now when you run expo start and launch your app press j and it will launch a Chrome Inspector that will attach directly to the app on your device (I suggest upgrading expo-cli to the latest to ensure you have this feature). be sure to refer to the "Using Hermes Engine" guide for more information
I am using both the Flipper and React Native Debugger on a React Native project.
I find JavaScript logging by React Native Debugger to be much richer given JSON formatting than Flipper (logs dumped as serialized strings). I however love the additional log tooling(especially for native logs) that Flipper provides.
Is it possible to setup choose the default Dev tool?
Opening the dev tools on the iOS simulator, all logs open with Flipper even if it was quit and the React Native Debugger was already open.
I have tried to configure a different port listened to by the debugger and dev tools but a flipper is still given the lead.
Has anyone tried to you both successfully?
Not tried but seems like this article can help you out:
Medium
Already given on React-Native official doc to setup default debugging tool.
If nothing messed up with your local setting then simple disabling can help.
So I have a React Native app based on react-native-firebase-starter that I'd like to debug using better tools than just console.log output via react-native log-android. Debugger breakpoints, object inspection etc.
For a standard React Native app, this would be possible using the "Debug JS remotely" option which, as I understand it, runs the app's JS inside desktop Chrome and hence can use it's dev tools.
This does not seem to work for React Native Firebase however. I presume this is because it uses a lot of native Android/iOS modules along with mobile-only Firebase auth, and thus is only happy running entirely on the device. ...or something like that.
Am I doing something wrong or is there a way round this? What debugging setup will give me the best DX here?
The example project react-native-firebase-starter is natively built (as opposed to being created with Expo) and will therefore work as expected with the debugging tools you have mentioned.
Make sure when running the app the build variant Debug is selected, as in Release mode Metro Bundler / Packager and the debugging tools are not available.
If the debugging level via Chrome Dev Tools does not suffice, there are other tools created for React Native with better functionality (such as breakpointing). The most notable ones are:
React Native Tools extension for Visual Studio Code. Allows setting breakpoints and iterating through code in the editor.
React Native Debugger, which has a similar interface to Chrome Dev Tools and allows breakpoints to be set in the Sources tab.
Up-to-date installation instructions and configuration are provided in their respective repositories.