Enable React Native Developer Menu in Release - react-native

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.

Related

How do I choose a default React Native debugging tool when I `Open the Dev Tools`

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.

Intellij React Native node_modules dependency breakpoint not hit

I am using expo bare workflow (unimodules) and I would like to debug an issue by using breakpoints in react-navigation-stack, which lives under node_modules.
For coding and debugging I use Intellij. I have unchecked Do not step into library scripts and Do not step into scripts. I have also added react-navigation-stack as a library.
The problem is that my breakpoints for react-navigation-stack are ignored (they do not have a checkmark), but in rn_range_slider are hit normally (they have a checkmark).
Can anyone help?
Idea1:
It might have to do with metro's sourcemaps. I don't know how expo uses metro configuration and how to override it.
EDIT:
I added a photo from react native debugger, it seams metro loads lib/module target build, and breakpoints work
and from IntelliJ, lib/module breakpoints work, but src/(typescript) do not)

How can I debug JS remotely when using React Native Firebase

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.

react-native code push: allowable code change?

I'm using react-native-code-push for my app.
I had released several versions that change only a few of js bugs, which worked fine.
Recently I realized that if a code pushed release involves any change of native code other than javascript, the app crashes while updating. I added several react native packages that need manual linking such as react-native-maps, and released update to some targeted versions hoping them to take those, but no luck.
Then what if an update only involves adding light libraries (using npm install) which don't require native linking? I wonder to what extent exactly the code push allows client-side code updating.
Basically, when you want to add some native code involving link you will have to rebuild your apk / ipa and re-upload it to the stores. If you want to add a new plugin without link there should not be any problem
One advice I could give is to only push bug fixes to your production app. You should not push new features with codepush since apple review (almost) all the applications.

Debug a react-native application using nuclide

Is there any good document/video that talks about how to debug a react-native application using Nuclide.
Am a newbie. Its my first time app development and first time with React.
I did create the project using react-native init. I don't think i found a BUCK file for me to run and debug my app. I also don't see to get how to view the errors in my JS file. I have to run the simulator to see. I run it using react-native run-ios.
I tried Nuclide->React Native->Start Debugging. Not sure what this is supposed to do.
Sorry if these questions sound silly.
According to this instruction you should:
From the command Palette (Cmd-Shift-P) choose "Nuclide React Native: Start Packager" to start the React Native Server.
Ensure that you are in the root directory of the React Native project, then run the application from the command-line: "$ react-native run-ios" (or choose other existing simulator, for example react-native run-ios --simulator="iPhone4s").
After starting the server, you can prime the React Native Debugger for when the application begins running. From the command Palette (Cmd-Shift-P), launch "Nuclide React Native: Start Debugging".
From the Simulator press Cmd-D (Ctrl-D on Linux). This will bring up the debug options for your application. Select "Debug JS Remotely.
...After you enable debugging from the simulated application, Nuclide will attach to that debugging process automatically, since we primed the Debugger above.
Debug JS in Nuclide is now an option in the dev menu added in React Native version 0.52 December 2017 release.
See This