Develop Reference

react native svg error child.isClassAccessorProperty is not a function on upgrading react native from 68.1 to 70.6

Thanks in advance
I received the below error when I tried to upgrade react native from 68.1 to 70.6.
I tried this in android.
I ran react-native run-android and everything went well.
Upon running the app the metro bundler started loading 99% and showed this error in red screen
error: node_modules/react-native-svg/src/elements/Shape.tsx: /Users/jarenk/Documents/myApp/node_modules/react-native-svg/src/elements/Shape.tsx: child.isClassAccessorProperty is not a function
Can anybody help me on this.
Am using react native SVG and its version was old. I updated it to latest version too.
(13.6.0) but still its getting same error.
Error In Detail (If I take Build)
./gradlew assembleRelease
I get following error
error node_modules/react-native-svg/src/elements/Shape.tsx: /Users/jarenk/Documents/myApp/node_modules/react-native-svg/src/elements/Shape.tsx: child.isClassAccessorProperty is not a function.
TypeError: /Users/jarenk/Documents/myApp/node_modules/react-native-svg/src/elements/Shape.tsx: child.isClassAccessorProperty is not a function
at /Users/jarenk/Documents/myApp/node_modules/#babel/plugin-transform-typescript/lib/index.js:361:89
at Array.forEach (<anonymous>)
at PluginPass.Class (/Users/jarenk/Documents/myApp/node_modules/#babel/plugin-transform-typescript/lib/index.js:353:31)
at newFn (/Users/jarenk/Documents/myApp/node_modules/#babel/traverse/lib/visitors.js:171:21)
at NodePath._call (/Users/jarenk/Documents/myApp/node_modules/#babel/traverse/lib/path/context.js:53:20)
at NodePath.call (/Users/jarenk/Documents/myApp/node_modules/#babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/Users/jarenk/Documents/myApp/node_modules/#babel/traverse/lib/path/context.js:90:31)
at TraversalContext.visitQueue (/Users/jarenk/Documents/myApp/node_modules/#babel/traverse/lib/context.js:110:16)
at TraversalContext.visitQueue (/Users/jarenk/Documents/myApp/node_modules/#babel/traverse/lib/context.js:116:21)
info Run CLI with --verbose flag for more details.
Once again thank you.

Updating the package.json file helped me to resolve this.
just downgrade the babel versions like below
Also make sure same below version are in package-lock.json file
"#babel/core": "7.12.9",
"#babel/runtime": "7.12.5"

To solve this issue, you need to delete the "node_modules" folder and run either
"yarn install" or
"npm install" command.
It is likely that you switched to a Git branch with a higher version of Babel, which is causing the problem.

Capacitor Android pipeline building but no longer working

I had a working React app released for Android and iOS via Capacitor. But now with a new version of my app, builds were not working with the Pixel 4 API 29 virtual device I used previously. Retrying with a Pixel 2 API 28 builds complete and the app opens, but now Mapbox is no longer loading and that is the core of my app. I updated to Android Studio 4.2.1 and have the following as dev dependencies in my package.json:
“#capacitor/android”: “^3.0.2”,
“#capacitor/cli”: “^3.0.2”,
“#capacitor/core”: “^3.0.2”,
“capacitor-resources”: “^2.0.5”,
“cordova-res”: “^0.15.3”
Small elements of my app are accessing the web, so it doesn’t seem to be an internet access issue. The main changes I’ve made in this version are upgrading to Mapbox 2.3.0 and making basic use of cookies for user settings, but not for ad tracking. But I’ve reverted both of these changes and the problem is persisting so it doesn’t seem to be because of the new Mapbox version or because the introduction of cookies.
Getting errors like this where the last letter of the app name is missing for some reason:
E/o.ionic.ecorat: Invalid ID 0x00000000.
Invalid ID 0x00000000.
E/o.ionic.ecorat: Invalid ID 0x00000000.
Also errors like this:
E/cr_VariationsUtils: Failed reading seed file “/data/user/0/io.ionic.ecorate/app_webview/variations_seed”: /data/user/0/io.ionic.ecorate/app_webview/variations_seed (No such file or directory)
Do errors like this mean that the app isn’t detecting that it’s meant for prod?
E/Capacitor/Console: File: http://localhost/static/js/2.9b5092bb.chunk.js - Line 2 - Msg: Error: Failed to initialize WebGL
E/Capacitor/Console: File: http://localhost/static/js/2.9b5092bb.chunk.js - Line 2 - Msg: Uncaught (in promise) Error: Failed to initialize WebGL.
I use ternary operators that start like this:
const url = process.env.NODE_ENV === ‘production’ ?
to decide whether to go to the real website or use localhost.
Should I go back to a more stable version of capacitor?

There are 3 things I can suggest which worked for me..
Check the devtool and inspect the emulator. if you see a error something like this
Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
Then you can use npx capacitor run which should solve the issue, this is a quick fix though.
Replace your dev-flow and start using npx instead of ionic XXXX commands.
If you wish to update the deps and dev-deps in that case, based on package.json you have shared in your question you are missing a few plugins.
if you were to create a new ionic app using ionic start then the package.json will look something like this [ignore the vue deps]
"dependencies": {
"#capacitor/android": "3.0.2",
"#capacitor/app": "1.0.2",
"#capacitor/core": "3.0.2",
"#capacitor/haptics": "1.0.2",
"#capacitor/keyboard": "1.0.2",
"#capacitor/status-bar": "1.0.2",
"#ionic/vue": "^5.4.0",
"#ionic/vue-router": "^5.4.0",
"core-js": "^3.6.5",
"vue": "^3.0.0-0",
"vue-router": "^4.0.0-0"
}
So, you will need to manually install the package apart from #capacitor/android & #capacitor/core I believe these packages that are de-coupled packages that makes capacitor lighter than the prev version and need to be manually installed.
After that you need to build using ionic build then use ionic open to open the IDE and sync the project with Gradle for the android app. Once this is done you can use ionic capacitor run --livereload --external to open the emulator and the dev server with live-reload..

java.lang.NoClassDefFoundError: Failed resolution of: Lcom/google/firebase/iid/FirebaseInstanceId; React Native App

I've been trying to run my react native application, but it crashed when started and the debugger didn't return any error, so I checked the log cat in Android Studio and it shows me the following error: java.lang.NoClassDefFoundError: Failed resolution of: Lcom / google / firebase / iid / FirebaseInstanceId;
Caused by: java.lang.ClassNotFoundException: Didn't find class "com.google.firebase.iid.FirebaseInstanceId"
The React-Native version that I am using is: 0.61.5
And the version of react-native-firebase that I have installed is 5.6.0
It has already been a recent failure, since previously the app worked correctly and I have not made any changes to the firebase integration either

To debug this, first I would suggest running adb logcat and seeing what Java error you are getting. If it errors out on the not being able to find the required Java classes, then try adding the following to your project:
app/build.gradle file (dependencies section):
implementation 'com.google.firebase:firebase-iid'
(You might need to provide a version for this package as well)

I have getting same error, I fixed this error by uninstalling old version and installing new version of push notification.
uninstall:
npm uninstall react-native-push-notification
install:
npm i react-native-push-notification
since react-native-push-notification upgraded to new version v7.x so that, while installing app it give above error.
checkout this -> https://www.npmjs.com/package/react-native-push-notification

There is an issue, in react-native-push-notification (FirebaseInstanceId has been deprecated and now removed). Sounds like you are using a lib that is using that that here. It should be fixed later on, but for now you can add the following to your android/build.gradel file.
buildscript {
ext {
...
firebaseMessagingVersion = "21.0.0"
}
I had also to update these libs (you will get compile errors if you don't, so you may have others to update):
- "react-native-device-info": "^5.5.8",
+ "react-native-device-info": "^8.1.3",
- "react-native-push-notification": "^7.3.0",
+ "react-native-push-notification": "^7.3.1",
This is in reference to this issue

wix/react-native-notifications
This lib having issue with refreshToken() Method.
Didn't find class "com.google.firebase.iid.FirebaseInstanceId"
so just remove / reinstall the package, if still error is coming then we have to wait for next bug fix release of this lib or
we can manually change native code to make it working.
below is link of lib
https://github.com/wix/react-native-notifications/issues?q=FirebaseInstanceId

How to fix react-native link react-native-vector-icons error

I want to link react native vector icons to my project.
But after i enter react-native link react-native-vector-icons
I get the following
warn Calling react-native link [packageName] is deprecated in favor of autolinking. It will be removed in the next major release.
Autolinking documentation: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info iOS module "react-native-vector-icons" is already linked
info Linking "react-native-vector-icons" Android dependency
error Linking "react-native-vector-icons" failed. Run CLI with --verbose flag for more details.
Error: ENOENT: no such file or directory, open 'C:\Users\denze\ShoppingList\android\src\main\res\values\strings.xml'
at Object.openSync (fs.js:457:3)
at Object.readFileSync (fs.js:359:35)
at applyPatch (C:\Users\denze\ShoppingList\node_modules\#react-native-community\cli-platform-android\build\link\patches\applyPatch.js:42:51)
at Object.registerNativeAndroidModule [as register] (C:\Users\denze\ShoppingList\node_modules\#react-native-community\cli-platform-android\build\link\registerNativeModule.js:33:27)
at C:\Users\denze\ShoppingList\node_modules\react-native\node_modules\#react-native-community\cli\build\commands\link\linkDependency.js:63:16
at Array.forEach (<anonymous>)
at linkDependency (C:\Users\denze\ShoppingList\node_modules\react-native\node_modules\#react-native-community\cli\build\commands\link\linkDependency.js:36:32)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Object.link [as func] (C:\Users\denze\ShoppingList\node_modules\react-native\node_modules\#react-native-community\cli\build\commands\link\link.js:110:5)
at async Command.handleAction (C:\Users\denze\ShoppingList\node_modules\react-native\node_modules\#react-native-community\cli\build\index.js:186:9)
I have succesfully downloaded the package it just wont link. I have also looked for solutions but without succes

Yea, I was getting the same error. It's possible that it's just a file location issue (I'm not sure). At least, that's what I thought.
I moved the src folder up a directory (based on my error message), then re-ran react-native link react-native-vector-icons and it worked.
I'm not a fan of this solution because I'm not sure what effect this might have as I continue and I would much prefer a solution that doesn't ask me to just move a (pretty important) directory but, hey it works (for now).
Update
Perhaps a more elegant solution (for now) is to downgrade your react-native version (just saying, in case you haven't tried that yet, or someone else comes and hasn't tried that).
Ex. package.json
{
"dependencies": {
"react": "16.11.0",
"react-native": "0.61.5",
"react-native-vector-icons": "^6.6.0"
}
}
But yea, this issue was recently issue posted in the react-native repo and the react-native-community repo. Hopefully something is clarified soon.

Downgrading react-native was the fix for me. Credit to #izzy3000

React Native: undefined is not an object (evaluating 'r.default.manifest.env')

I've built an Android App using React Native; and the emulator says everything is okay.
But after I built app-release and installed it, I got an error saying unfortunately app has stopped.
Then I tried to find the error using app-debug( ./gradlew assembleDebug ), and got this:
It says undefined is not an object (evaluating 'r.default.manifest.env')
My dependencies are as below:
"dependencies": {
"expo": "^20.0.0",
"native-base": "^2.3.1",
"react": "16.0.0-alpha.12",
"react-native": "^0.47.0",
"react-native-navbar": "^2.0.1",
"react-navigation": "^1.0.0-beta.11"
}

So the cause of error is just stupid.
The issue with React-Navigation
In node_modules/react-navigation/src/navigators/DrawerNavigator.js there is imported TabRouter, which seems like component (starts with upper case), but in reality is just function, so when the code reaches const contentRouter = TabRouter(routeConfigs, tabsConfig); it throws that error because it does not resolve it as function? It does not even run it.
This is some new babel config stuff or something, which is just weird space of js for me...
So one way to fix this is to rename all TabRouter in that file to tabRouter.
I hate to modify node_modules files but this is only way that I found to fix this error.
Its working for me.