React Native DEV and PROD variables - react-native

How do I know if my React Native app is running in production or development? Is there some sort of way within JavaScript to tell? Is there a global that is passed in?

You can use the __DEV__ global variable in JavaScript to determine if you're using React Native packager or not. If you are running your app in the iOS Simulator or Android emulator __DEV__ will be set to true.
https://reactnative.dev/docs/javascript-environment

You can use the __DEV__ variable.
By default if you run your app with npx react-native run-ios or npx react-native run-android, it will run in Debug mode and __DEV__ will be true.
In release mode, __DEV__ will be false.
You can use it this way:
const CLOUD_API_BASE_URL = __DEV__ ? 'https://api-dev.yourdomain.com' : 'https://api-prod.yourdomain.com';
You can run the app in Release mode with the terminal:
react-native run-android --variant release #android
react-native run-ios --configuration Release #ios
Or open the ios folder in XCode, choose Product > Scheme > Edit Schemes
Select Run in the left menu. For Build Configuration, choose 'Release' and uncheck 'Debug executable'
In Android Studio, similarly, you can set the build variant to release

When the __DEV__ variable is set to true, it turns on a bunch of useful development warnings. For production, it is recommended to set __DEV__=false.

I didn't intend to write an answer, but I'm not able to comment (<50 pts). To toggle __DEV__, you can set it before your command, e.g.:
__DEV__=true expo start (should already be set to true though)
or
__DEV__=false react-native run-ios (should be set to true by default, when running this command without setting manually)

Related

how do I enable Debug JS Remotely in React Native?

To debug redux, I use React Native Debugger, but for this you need to enable Debug JS Remotely. I don't have this tab in the developer menu. I use redux, redux-toolkit, redux-saga.
photo: https://i.stack.imgur.com/jrX4b.png
You should disable hermes on Podfile:
Set :hermes_enabled => false
Install pods cd ios && pod install && cd ..
Build App npx react-native run-ios
Reference: https://github.com/facebook/react-native/issues/34615#issuecomment-1238913946
We can debug the application with ReactNative 0.70.0 with Hermes Enabled by following this reference
Shake your device or pick "Shake Gesture" from the Hardware menu in the iOS Simulator to get to the developer menu. you can check this tutorial here.
Choose Open Debugger option and then inspect the browser webpage and go to the console tab in that
installed the desktop version of flipper with the redux debugger plugin. The problem is solved, albeit in a different way :)
You can check this website and You can check the hermes installation settings. You have to configure chrome settings for using debug mode with hermes.

Build command in detox

Looking at this doc: https://github.com/wix/Detox/blob/master/docs/APIRef.Configuration.md
It says that the
Build command (either xcodebuild, react-native run-ios, etc...), will
be later available through detox CLI tool.
I'm trying to setup the build command to work with Android. Am I supposed to add react-native run-android to the build command? What do they mean by Detox CLI tool?
The build field is optional, and should contain whichever execution logic needed in order to have the .apk file set and ready in the path specified in binaryPath. You are more than welcome to refer to the Detox example project, which was set up as a reference exactly for these type of questions.
In any case, from the react-native CLI tool's help: react-native run-android = builds your app and starts it on a connected Android emulator or device. That makes it not very suitable, as we typically want to build the app, and have detox launch the emulator (optional) and install the app on the device(s), as needed.

How to run expo start with release-channels

I want to try running my react native app locally but against my staging and/or production server. I'm looking to do this by setting a release-channel variable when I run expo start. I hope this can test/foreshadow some performance in beta and production.
I tried the command expo start --release-channel staging and I got an error error: unknown option '--release-channel'
How can I set Constants.manifest.releaseChannel when I run expo start?
Environment variables don't exist explicitly, but you can utilize release channels to make that happen!
Say you have a workflow of releasing builds like this:
expo publish --release-channel staging-v1
For standalone apps:
Build your standalone app by running
expo build:ios --release-channel <your-channel>
expo build:android --release-channel <your-channel>
You can access the channel your release is published under with the releaseChannel field in the manifest object.
Constants.manifest.releaseChannel does NOT exist in dev mode. It does exist, however when you explicitly publish / build with it.
Here is a detailed description of this answer.
To those who also try to use environment within expo but for the web target,
My solution is to use cp to overwrite the prod configuration in prebuild script:
# fix --release-channel not available for web yet
cp -f src/config/env/staging.js src/config/env/prod.js
I also got tips from expo tips that the --release-channel feature is not available for web, this is the only way I have found so far.
react-native run-android --variant=release & react-native run-ios --configuration Release maybe would help :)

Integrate viro-react into react-native project

Anyone here managed to integrate viro-react into react-native project? I followed the instruction in
the documentation
After that, I executed the project but not able to run.
This is the error that I got
Even though I run with gradlew installOvrDebug, still it failed.
If your configurations are correct then try running with any of these variants
ArDebug, GvrDebug or OvrDebug
Example running apllication with Augmented Reality:
Android
react-native run-android --variant=ArDebug
iOS
react-native run-ios --variant=ArDebug
I solved this problem with the following method:
Go to the Navigate to the node_modules/react-native/local-cli/runAndroid/runAndroid.js file and edit the lines that include installDebug change it to installArDebug
Go to the terminal and npm start
Open another terminal and react-native run-android
*Make sure that your device is plugged in and that you have android studio sdk paths in your environment variables. This should do the trick!

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