Getting error Invariant Violation: Tried to register two views with the same name - react-native

I have used react-native when it was 0.50 now I'm using it again and it's 0.61.1
I am making an app and using "react-navigation" library for routing.
Since I'm using the react-native-gesture-handler according to the documentation I'm getting the error sometimes of "Invariant Violation: Tried to register two views with the same name" and when I close the app and reopen it, it's gone.
And especially "Invariant Violation: Tried to register two views with the same name gestureHandlerRootView" error comes so many times in-app.
here is the screenshot of error in my console:
And because of this error, My app in release mode is also crashing as soon as I open it. I'm using React Native CLI not EXPO. I've searched in stack overflow and on other places but all the answers I got are saying remove react-native-gesture-handler from the expo.
But I'm not using EXPO what should I do? Please help.

I ran
npm ls react-native-webview
and was showed:
├─┬ react-native-webview-leaflet#5.0.2
│ └── react-native-webview#8.2.1
└── react-native-webview#11.0.2
Two webview.
I solve with:
yarn add react-native-webview-leaflet
That is, I had to reinstall 'react-native-webview-leaflet' probability because an update of 'react-native-webview'.

Try to do find . -name react-native-{name-of-the-package} and look for duplicates. They are probably detected and loaded each time (by use_native_modules), which leads to this error.
Try adjusting your dependencies (and look for deps of deps) to avoid such duplicated. At the end your adjustment should be visible in your lock file.

Related

i am trying to create an app that can connect with metamask using walletconnect/react-native-dapp but i get this problem

i am trying to create an app that can connect with metamask using walletconnect/react-native-dapp but i get this problem.
What went wrong:
A problem occurred evaluating project ':app'.
Could not find method compile() for arguments [com.facebook.react:react-native:+] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.
for anyone encountering this down the road... Here's the solution.
React native dependencies in node_modules sometimes use outdated syntax such as the error above "compile" when it should be "implementation" depending on your RN version. I'd use the npm package patch-package or stack overflow how to properly modify dependencies (node_modules) to persist once you install another package.
I ran into this same issue with the same "walletconnect" amoung other errors but finally got it running - keep debugging! You got this.

React Native: Getting errors after structuring the project folders

I changed my folder structure to something like this
Now I am getting these errors
Error: Requiring module "node_modules/react-native-reanimated/src/Animated.js", which threw an exception: Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?
and
Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
I changed my package.json main and app.json entry point
"main": "./src/App.tsx",
Still getting the error.
Op here!. Resolved by doing these steps. If anyone facing this issue you can try this if it works for you.
Error: Requiring module "node_modules/react-native-reanimated/src/Animated.js", which threw an exception: Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?
For this, I am using react navigation drawer. So I had to make sure if I installed react-native-gesture-handler react-native-reanimated
expo install react-native-gesture-handler react-native-reanimated
If you are using drawer navigator and you get this error, I suggest you to go through this article.
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
and for his error:
Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
I resolved this by adding path of app.tsx(or root component) in package.json and app.json
app.json -> "entryPoint": "./src/App.tsx",
package.json -> "main": "./src/App.tsx",
and finally, register root component as mentioned in the below link
https://docs.expo.dev/versions/latest/sdk/register-root-component/
Still not working? try running this command
expo start --clear

How to fix relative module error for a newly created nuxt.js app with starter template?

I tried to create a nuxt app with the guide from the official website, chose default options because I wanted the starter template but on running npm run dev, I keep encountering the error:
This relative module was not found:
* ./components/nuxt-error.vue in ./.nuxt/index.js
I've tried searching about it but I couldn't find any useful resource/fix. I've also tried vue init nuxt-community/starter-template for the installation but I still get the same error.
Any fixes?
So I found a solution. I couldn’t figure out the error because the nuxt-error.vue file was actually imported correctly. Turns out “npm” installations have been giving me issues (had issues with TailwindCSS too).
So if you ever encounter this error on loading the base nuxt app, recreate the project using “yarn” instead. Works like magic!
This Error basically means, that in one of your files you are trying to import another file with the relative path of ./components/nuxt-error.vue but no file with this path exists.
However
I just read that vue init nuxt-community/starter-template is deprecated and no longer maintained. Instead of fixing this Error you should restart your project with npx create-nuxt-app <yourAppName>. https://github.com/nuxt-community/starter-template

React native link fails with no package found

I'm not sure what exactly is happening but I am unable to run react-native link without errors occuring
CLI Output:
react-native link --verbose
debug Available platforms: iOS, Android
debug Targeted platforms: iOS, Android
debug Getting project config for iOS...
debug Getting project config for Android...
error No package found. Are you sure this is a React Native project?
error Unexpected close tag
Line: 22
Column: 24
Char: >
debug Error: Unexpected close tag
Line: 22
Column: 24
Char: >
at error (/Users/Dellybro/Desktop/App/AppReactNativeApp/node_modules/xmldoc/node_modules/sax/lib/sax.js:666:10)
at strictFail (/Users/Dellybro/Desktop/App/AppReactNativeApp/node_modules/xmldoc/node_modules/sax/lib/sax.js:692:7)
at closeTag (/Users/Dellybro/Desktop/App/AppReactNativeApp/node_modules/xmldoc/node_modules/sax/lib/sax.js:885:9)
at SAXParser.write (/Users/Dellybro/Desktop/App/AppReactNativeApp/node_modules/xmldoc/node_modules/sax/lib/sax.js:1447:13)
at new XmlDocument (/Users/Dellybro/Desktop/App/AppReactNativeApp/node_modules/xmldoc/lib/xmldoc.js:199:15)
at readManifest (/Users/Dellybro/Desktop/App/AppReactNativeApp/node_modules/#react-native-community/cli/build/tools/android/readManifest.js:44:10)
at Object.projectConfig (/Users/Dellybro/Desktop/App/AppReactNativeApp/node_modules/#react-native-community/cli/build/tools/android/index.js:66:46)
at Object.keys.forEach.platform (/Users/Dellybro/Desktop/App/AppReactNativeApp/node_modules/#react-native-community/cli/build/commands/link/getProjectConfig.js:25:62)
at Array.forEach (<anonymous>)
at getProjectConfig (/Users/Dellybro/Desktop/App/AppReactNativeApp/node_modules/#react-native-community/cli/build/commands/link/getProjectConfig.js:22:35)
This randomly started happening after attempting to npm install react-native-firebase.
What I've tried
clear-caches
remove node_modules and npm install
Checking out my code back to a previous commit
Adding my package name to the manifest locaed in /android/app/src/debug/AndroidManifest.xml
Removing the app from my computer and cloning it from github
Running react-native link on another project, which works, but i just can't run react-native link on this specific project.
So the answer to my question was that in my android manifest xml file, there was an incorrect closing brace for one of my intent filters.
So for anyone that this happens to ensure that all of your Android files have correct syntax.
I fixed this problem by closing some unclosed tag in android/app/src/main/androidManifest.xml. Try checking the file line by line.

Unable to resolve module ReactNativeEventEmitter

After upgrading React Native from 0.29 to 0.30, I get this error message. I multiple times deleted node_modules, installed them back again, cleared watchman cache and npm start --reset-cache.
I tried it also on new project with react-native init someProject. The same error. Was this module renamed or deleted? I haven't found any info about it in release notes or in commits.
Thanks for help!
It's no longer needed. onTouchStart, onTouchEnd and onTouchMove are props of Views now.
Look here
I don't know, what really happened to this component.
But, at least, currently on RN 0.30 you can require ReactNativeEventEmitter as follows:
var ReactNativeEventEmitter=require(127);
The following line ...
console.log(ReactNativeEventEmitter)
...will print then this in the console (in Debug-Mode):
(I've figured it out while searching the react-native libraries in "node-modules" in the following file: "./node_modules/react-native/ReactAndroid/src/androidTest/assets/AndroidTestBundle.js:13879", and it is also working under iOS [the screenshot above originates from iOS]).
Have you tried to import using below snippet?
import { DeviceEventEmitter } from 'react-native';