Blank screen when building React Native app in release mode of android - react-native

I am building a React Native app and it works fine in debug mode, but when I try to build it in release mode, it shows a blank screen. I have tried several things to troubleshoot the issue, such as updating my dependencies and checking for any syntax errors, but I haven't been able to find the cause of the problem. I am not seeing any error messages, and the app seems to be working as expected in debug mode.
I am not sure what is causing the issue in release mode, and I would appreciate any help or suggestions.
Here is what I have tried so far:
I have checked that my React Native dependencies are up-to-date and correctly configured.
I have ensured that the bundle is being correctly packaged in the binary APK.
I have verified that there are no syntax errors in my code.

Use this error handler https://github.com/a7ul/react-native-exception-handler to catch problems in production. It supports both JS and Native side errors

Related

React Native TypeError: Cannot read property 'indexOf' of undefined, js engine: hermes

I am working on a react-native project. I have been running the application on Android and iOS devices for the past 6 months. I haven't faced any problems till now. But suddenly today, while I am trying to run the application I am getting a compile error with the description. TypeError: Cannot read property 'indexOf' of undefined, js engine: hermes. I tried to debug the issue and found that there is an issue while connecting to the remote debugger. But the strange thing here is even I haven't selected the remote debugging option from either of emulator or simulator.
So, I have enabled the remote debugging option from the emulator to get a quick fix. It is working fine. But why is it connected to the remote debugger even after the fresh installation? And the quick fix comes with its own issues. The application is functioning a bit lag and inconsistent. I suspect there is an issue with the metro bundler. I have removed the cache using rm -rf /tmp/metro-* command, cleaned gradle using ./gradlew clean command, and cleaned iOS build by deleting derived Data. But still, the issue persists.
Is there any other step am I missing here? If it is the issue with the metro bundler, is there any way to reset it completely? Please check the attached image for more information.
The reason for this issue in my case is not with the metro bundler or its cache but with one of the third-party dependency named auth0-js(In your case it would be different). It is adding some global or window properties which are causing the above-mentioned issue. I have removed it and replaced with the library which is closed to react-native ecosystem which eventually resolved the issue.

Debugging React Native app having React Native Reanimated with Vscode: TypeError: global.performance.now is not a function

I'm tasked with an already-started project that has React Native Reanimated library as a dependency.
Whenever I debug my app with Vscode/Chrome debugger, when I navigate to any screen that has components depending on Reanimated, I keep getting global.performance.now is not a function.
I've already seen TypeError: global.performance.now is not a function in react native but in the latest version it is already changed to what the accepted answer to the question suggests.
I've tried downgrading react-native-reanimated to 2.2.4 and patch as suggested in the answer, yet then I start getting all sorts of errors like Property ' stopObservingProgress' doesn't exist.
I've also tried 2.3.1, also different yet blocker errors.
I've also tried with and without Hermes.
Disabling debugging gets rid of the error, but I (obviously) can't debug. Debugging with Flipper works yet debugging with Flipper is extremely slowing my workflow (e.g. switching between Vscode and Flipper and trying to find files to put breakpoints, unable to edit at the same place where I debug etc. Flipper is just not my thing) and I want to debug with Vscode, which works perfectly without Reanimated.
I want to get rid of Reanimated library but unfortunately there is already a lot of code that relies on it, including a library with no other alternative that directly depends on Reanimated.
How can I debug an app containing React Native Reanimated with Vscode?
It's still a known and open issue when we are using reanimated version 2.., you can find this in reanimated documation.
As the library uses JSI for synchronous native methods access, remote debugging is no longer possible. You can use Flipper for debugging your JS code, however connecting debugger to JS context which runs on the UI thread is not currently supported.
For now only flipper is the way of debugging react native apps that using JSI for syncronous native module calls.
Okay after further investigation I've found out that this is indeed possible. There were some other problems with latest versions of some of the dependencies that I've been using, which was masking the original issue. With the right combination of dependencies and following https://fbflipper.com/docs/extending/debugging/ and https://thinhtran3588.medium.com/make-professional-mobile-apps-with-react-native-and-typescript-debug-your-application-with-vscode-fba067f77445 I was able to debug my app correctly using Vscode debugger.

React Native Release Signed APK crash on app start time

I have an issue with react native release APK.
The app run on debug mode but it crash immediately on release mode
Is that app running without any warnings/errors before building the APK?
The error message clearly says that it can't find a variable, maybe it got deleted or modified.
You can cross-check the app once by going to the development mode and see if you get the same error.
Try out clean your gradle and make the apk again.

React native app sourcemaps show incorrect location of error when error happens in asynchronous code

I have a react-native app. I recently moved to react-native version 0.61.5 for which I took the long route of creating a new react-native app and porting my code over to avoid any linking issues since new version used PODFILE as the default linking mechanism. Ever since I moved to version 0.61.5, I don't get the correct location of code in error logs. I think this is mainly happening when the code is running in asynchronous fashion which most of the code is. For e.g., look at below screenshot:
It is reporting that it is not able to call map on some array which is apparently undefined but the place where the error is reported is completely incorrect. I have no such file in my codebase and it is probably pointing to some file in some react-native package.
I am using Sentry #sentry/react-native": "^1.1.0". I don't think Sentry can cause issue with the sourcemaps reported during development.
I am not sure how to debug this problem. This problem is causing a lot of issues in debugging any errors as I have to manually figure out where the error happened. Please let me know if you have any tips on how to fix this problem.

"Unable to resolve module" debuggerWorker errors in recent react-native releases

I keep my project(s) relatively up to date with the latest RN releases. This error seems to be coming up more and more lately.
Error: Unable to resolve module `./debugger-ui/debuggerWorker.d9da4ed7` from ``:
None of these files exist:
* debugger-ui/debuggerWorker.d9da4ed7(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
Really makes it hard when trying to debug issues and a debugger statement does noting and errors are not reported to the browser tab where the console output goes.
I've already tried wiping node_modules. Is this a known issue with a concrete fix available?
Got stuck with this exact issue for hours. Just found that this occurs only on device where app is already installed with debug mode enabled.
I fixed it by:
uninstalling manually app from device (cmd+H to display simulator home) then long click on app icon and click on cross to delete app => this forces disabling debug mode,
then run app again from xcode.
Enabling debug mode after that works normally.
I had to come across a similar issue after updating #react-native-community/cli-debugger-ui to 4.2.1. Tried out several methods, nothing worked. Reverting #react-native-community/cli-debugger-ui back to 3.0.0 resolved the issue for me.
I closed the app (pressing home twice and swiping up), then started it again from the simulator and it worked.
Happens to me recently using expo and android.
The solution was to clear all Expo Go data:
Long press the Expo go icon
Then select App info
At the bottom of the screen, press Clear Data
And press Clear all data
Relaunch expo go and the react native app