Develop Reference

I can't create resources for android with react-native bundle, I get Unable to resolve module error

I am responsible for maintaining an application developed with React Native for 2 years. The target of the android project is set to API 30 and the client wants to update it to API 31. What I thought would be easy to change in Gradle turned out to be a headache.
I don't know how many things I've tried anymore (update react native, update gradle, install JDK11...), but I've ended up discarding the changes and cloning all the code from the repository again.
Here are the steps I now know for sure I've done:
Install JDK11 (previously installed).
Clone the React Native project from repository.
Run command npm install.
Update Gradle to version 7.3.3 (I have done this by opening the Android project with Android Studio).
These are the versions of the packages in packages.json:
"dependencies": {
...
"react": "17.0.2",
"react-native": "0.67.2",
...
},
"devDependencies": {
"#babel/core": "7.12.13",
"#babel/runtime": "7.12.13",
"#react-native-community/eslint-config": "1.1.0",
"babel-jest": "25.5.1",
"eslint": "6.8.0",
"jest": "25.5.4",
"metro-react-native-babel-preset": "0.59.0",
"react-test-renderer": "16.13.1"
},
At this point I can run the app with the react-native run-android command, but no image loads. Of course, as I have cloned the project from scratch, I have to create the resources. For that I execute this command, which I have used many times in the past:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/ app/src/main/res
But I get this error:
warn Package react-native-vector-icons contains invalid configuration: "dependency.assets" is not allowed. Please verify it's properly linked using "react-native config" command and contact the package maintainers about this.
Welcome to Metro v0.72.3
Fast - Scalable - Integrated
error Unable to resolve module C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js from C:\DATA\Projects\iDOL\Code\{myappname}\_:
None of these files exist:
* ..\..\..\..\..\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js(.native|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
* ..\..\..\..\..\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js\index(.native|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx).
Error: Unable to resolve module C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js from C:\DATA\Projects\iDOL\Code\{myappname}\_:
None of these files exist:
* ..\..\..\..\..\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js(.native|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
* ..\..\..\..\..\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js\index(.native|.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
at ModuleResolver.resolveDependency (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:152:15)
at ModuleResolver._getEmptyModule (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:50:26)
at ModuleResolver._getFileResolvedModule (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:219:21)
at ModuleResolver.resolveDependency (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:148:19)
at DependencyGraph.resolveDependency (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\node-haste\DependencyGraph.js:264:43)
at Object.resolve (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\lib\transformHelpers.js:170:21)
at resolveDependencies (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\DeltaBundler\graphOperations.js:466:33)
at processModule (C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro\src\DeltaBundler\graphOperations.js:232:31)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
info Run CLI with --verbose flag for more details.
A thing I don't understand: the installed react native version is "0.67.2", but when I try to create the resources I can see "Welcome to Metro v0.72.3". I don't know if this has sense.
The file C:\Users\{myusername}\AppData\Roaming\npm\node_modules\react-native\node_modules\metro-runtime\src\modules\empty-module.js exits.
Do you know why I'm getting this error?

It seems that the cli was corrupted. I solved the problem installing it with --force:
npm install -g react-native-cli #react-native-community/cli --force

Use Firebase In-App-Messaging in Expo Project

I'm trying to add in a built-in application with react-native-expo a series of tools from firebase.I managed to add the following features Cloud Messaging and Firebase Analitycs.But I have to integrate In-app-messaging and Dynamic links
First time I install all firebase module/dependencies to do this task.
"#react-native-firebase/app": "^12.9.3",
"#react-native-firebase/in-app-messaging": "^12.9.3",
and my file looks like:
.......
import inAppMessaging from '#react-native-firebase/in-app-messaging
.......
useEffect(()=>{
await inAppMessaging().setMessagesDisplaySuppressed(true);
}[])
but I recive a warning:
]Unhandled promise rejection: Error: You attempted to use a firebase module that's not installed on your Android project by calling firebase.app().
After that I try to find a solution,I learn that expo allow to create plugins to extend expo functionality
I tty to salve problem fallow expo documentation but I couldn't figure out how to create these plugins.
Next I find a module that can help me with-rn-firebase but is not working and the module is depeciated.
Then I searched the internet until I discovered other people with the same problem this is the link I see in their app.json a basic config of plugin and I try to implement in my project,after I install dependencies that I need i add in my file:
"plugins": [
"#react-native-firebase/app",
"#react-native-firebase/analytics",
"#react-native-firebase/in-app-messaging"
],
But the fallowing error occure:
Package "#react-native-firebase/analytics" does not contain a valid config plugin.
Learn more: https://docs.expo.io/guides/config-plugins/#creating-a-plugin
Cannot use import statement outside a module
What I mean is, if anyone has ever faced this problem, I want in my project to be able to use in-app-messaging and dynamyc-links if someone has tried an implementation with expo and has any idea

Eventually I solved the problem,expo when I use the command expo:build android it only compiles my javascript files,but some of the code was written in java and other optional files in the android / ios folder.So instead of compiling with expo I used eas.
Faloowing command:
Run as administrator cmd and write this line npm install -g eas-cli.
Initialize new module in your expo/react native project with this line eas init.
Build aplication using this line for android: eas build --platform android
*For ios is a bit different you mast edit your file eas.json:
{
"cli": {
"version": ">= 0.43.0"
},
"build": {
"development": {
"distribution": "internal",
"android": {
"gradleCommand": ":app:assembleDebug"
},
"ios": {
"buildConfiguration": "Debug"
}
},
"preview": {
"distribution": "internal"
},
"production": {
"ios": {
"cocoapods": "1.11.2"
}
}
},
"submit": {
"production": {}
}
}
Build aplication using this line for ios: eas build --platform ios
Eas build include in complile all app file .gradle/.js/.java/.xml/.m/.h and this thing offer your posibility to build mobile app in expo with same functionality and complexity like react native cli.
Usefull Link
https://docs.expo.dev/build/setup/
React Native Expo Build Failing due to cocoapods version

I think you need to run locally using expo dev client
https://docs.expo.dev/development/getting-started/
Mostly, the package that is not supported by expo can run natively. But you need successfully built in eas build.

React Native Firebase phone auth crashes the app on reCaptcha (Android)

I am having trouble with react native firebase phone auth. When I run the function then the app redirects to reCaptcha but then the screen remains black and reCaptcha does not appear. It was working fine at first but when I changed the project director it broke. The weirdest part is that there is no error the app just freezes and/or crashes after being frozen for some time.
I reinstalled node_modules. Also, I generated a new sha1 code and tried running it on another computer to see if sha1 may be the cause. I tried creating a completely new react-native project but still no change.
Packages:
"#react-native-firebase/app": "^10.0.0", // also tried older
"#react-native-firebase/auth": "^10.0.0", // also tried older
"react": "16.13.1",
"react-native": "0.63.3"
My sign in function:
const loginWithPhoneNumber = async () => {
const confirmation = await auth().signInWithPhoneNumber(firebaseTestPhonenumber);
};

Add this to your app/build.gradle file dependencies:
implementation 'androidx.browser:browser:1.2.0'
The issue is related to a major update in Firebase. This issue was discussed here

Reading build config file build.json freezes while cordova run android. #Cordova-developers: Any ideas?

I'm setting up my first hybrid app using cordova / framework7-cli....
all fine, except
cordova run android
freezes with:
"Reading build config file: C:\...\APP\build.json . . . . . . "
and many many more dots.
Tried to
1. cordova build android --release
2. Moved build.json, take a look inside, ok...
3. built a new apk, built a new session, tried another avd ...
build.json:
{
"ios": {
"release": {
"buildFlag": [
"-UseModernBuildSystem=0"
]
},
"development": {
"buildFlag": [
"-UseModernBuildSystem=0"
]
},
"debug": {
"buildFlag": [
"-UseModernBuildSystem=0"
]
}
}
}
However, this freeze causes to break my build-process and nothing happens. normally i can see my app on the selected device...
Does anybody got the same issue?

If using Android Virtual Device make sure to run "Cold Boot Now". This fixed the issue for me

Debugging Jest unit tests with breakpoints in VS Code with React Native

I created a React Native project using the popular Ignite CLI v2.0.0 with the default boilerplate.
Then I adorned it with a bunch of nodejs shims, because I'll have some node-based dependencies.
Everything is working and I can run the Jest tests from the command line. So far, so good.
However, now one of my unit tests is timing out. This is probably due to an async call failing that invokes a mocked out node function. But there is no information on error, location, etc.
So I want to debug using Visual Studio Code v1.13.1 and here problem starts. I can't for the life of me figure out how to configure this so I can set breakpoints both in the tests as in the app code + node_modules.
I have installed the React Native Tools v0.3.2 and can start the debugger using the default Debug Android configuration:
[vscode-react-native] Finished executing: adb -s emulator-5554 shell am broadcast -a "com.myexample.RELOAD_APP_ACTION" --ez jsproxy true
[vscode-react-native] Starting debugger app worker.
[vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application
[vscode-react-native] Debugger worker loaded runtime on port 13746
Running application "MyApplication" with appParams: {"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
But no breakpoints are hit. VS says: Breakpoint ignored because generated code not found (source map problem?). (btw: both index.android.bundle and index.android.map have just been generated in .vscode/.react).
And also I don't see a way to debug through the test code (which lives in ${projectRoot}/Tests).
Based on much googling I created another debug configuration for running Jest in VS Code:
{
"type": "node",
"request": "launch",
"name": "Jest Tests",
"program": "${workspaceRoot}/node_modules/jest-cli/bin/jest.js",
"args": [
"--config",
"package.json",
"--runInBand",
"--verbose",
"--no-cache",
"-u"
],
"runtimeArgs": [
"--nolazy"
],
"console": "internalConsole",
"sourceMaps": true,
"address": "localhost",
"port": 8081,
"outFiles": [
"${workspaceRoot}/.vscode/.react"
],
"env": {
"NODE_ENV": "test"
}
}
This at least runs the tests, showing test report in the VS debug console, but once again no breakpoint anywhere gets hit.
I also tried setting outFiles to the location where ignite generates the bundle, i.e. ${workspaceRoot}/android/app/build/intermediates/assets/debug/* with same results.
Can anyone please point me in the right direction?
PS. I am on Ubuntu 16.04:
System
platform linux
arch x64
cpu 4 cores Intel(R) Core(TM) i7-4500U CPU # 1.80GHz
JavaScript
node 8.1.2 /usr/local/bin/node
npm 4.6.1 /usr/local/bin/npm
yarn 0.24.6 /usr/bin/yarn
React Native
react-native-cli 2.0.1
app rn version 0.45.1
Ignite
ignite 2.0.0 /usr/local/bin/ignite
Android
java 1.8.0_111 /usr/bin/java
android home - undefined

Finally found the solution. It seems there are still a number of issues with the new inspector protocol in Node 8.*. In short the support for --inspect is still quite experimental.
For example the NodeJS Inspector Manager (NiM 0.13.8) was crashing and disconnecting websocket after few second (See: NiM Github issue #17 and Chromium bug #734615).
So I downgraded NodeJS 8.1.2 --> 7.10.1
Now finally things work as expected. I can do all debugging in VS code, hit all the breakpoints, with the following debug configuration:
{
"type": "node",
"request": "launch",
"name": "Launch Tests",
"program": "${workspaceRoot}/node_modules/.bin/jest",
"args": [
"--runInBand",
"--no-cache"
],
"runtimeArgs": [
"--debug-brk=127.0.0.1:5858"
],
"port": 5858
}
Wasted more than a day on something that should be a 5 min. no-brainer. But luckily its working now!