React Native: Getting errors after structuring the project folders - react-native

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

Related

Invariant Violation: Picker has been removed from React Native

ERROR Invariant Violation: Picker has been removed from React Native.
It can now be installed and imported from
'#react-native-picker/picker' instead of 'react-native'.
See https://github.com/react-native-picker/picker
ERROR Invariant Violation: Module AppRegistry is not a registered callable module
(calling runApplication). A frequent cause of the error is that the
application entry file path is incorrect. This can also happen when
the JS bundle is corrupt or there is an early initialization error
when loading React Native.
I'm trying to configure an existing react-native project, but I'm facing the above issue with it.
I do not have picker in the project while it is showing following error. Added #react-native-picker/picker as well.
It was released a fix in the version 2.15.2 of native-base.
history:
https://github.com/GeekyAnts/NativeBase/pull/3230
https://github.com/GeekyAnts/NativeBase/releases/tag/v2.15.2
In My case I removed #davidgovea/react-native-wheel-datepicker this package which uses old dependencies which caused the issue.
1.Install patch-package into your project,
Install #react-native-picker/picker into your project,
go to node_modules\react-native\index.js
replace all
invariant(
false,
'DatePickerAndroid has been removed from React Native. ' +
"It can now be installed and imported from '#react-native-
community/datetimepicker' instead of 'react-native'. " +
'See https://github.com/react-native-
datetimepicker/datetimepicker',
);
or
invariant(
false,
........ DatePicker ..........
);
to
return require('#react-native-picker/picker')
run
npx patch-package react-native
rebuild your app and it will be work

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

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.

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.

Angular flex-layout in Ionic3... rxjs/operator not found?

Trying to use #angular/flex-layout in an existing npm-enabled Ionic 3 project.
Adding "FlexLayoutModule" to my main module's imports won't allow the app to start, saying that: cannot find module "rxjs/operators" is the cause.
Already cleared node_module, npm install, reinstalled Ionic CLI. Nothing helps. Could it be a version conflict? Moreover, I'm already using Observables in this project. I don't get it. And the import of "FlexLayoutModule" is in cause of this issue (disabling the import removes the issue).
Anyone could be successful at using flex-layout with ionic? I've seen this plunk, but it uses system.js, so not 100% reproducing my goal.
http://plnkr.co/edit/y8R0MF?p=info
Edit: a more verbose issue:
Uncaught (in promise): Error: Cannot find module "rxjs/operators"
Error: Cannot find module "rxjs/operators" at Object.580
(http://localhost:8100/build/22.main.js:319:7) at webpack_require
(http://localhost:8100/build/main.js:48:30) at Object.1021
(http://localhost:8100/build/22.main.js:11:79) at webpack_require
(http://localhost:8100/build/main.js:48:30) at
http://localhost:8100/build/main.js:122015:10 at t.invoke
(http://localhost:8100/build/polyfills.js:3:9283) at Object.onInvoke
(http://localhost:8100/build/main.js:4650:37) at t.invoke
(http://localhost:8100/build/polyfills.js:3:9223) at r.run
(http://localhost:8100/build/polyfills.js:3:4452) at
http://localhost:8100/build/polyfills.js:3:14076
I'm getting a similar error with Angular CLI. Everything is OK until I include FlexLayoutModule in the app's NgModule imports. Then I get the error:
Module not found: Error: Can't resolve 'rxjs/operators' in 'D:\dev\Vms.Signup.Client\node_modules\#angular\flex-layout\esm5'
I updated to the latest rxjs and that seems to have fixed it.

Updated react native to v0.6.0 - Error: Invariant Violation: Application TestApp has not been registered.

I'm getting these errors after updating react native to v0.6.0. I even tried creating a project from scratch and I'm still getting these errors. Has anyone else seen this? This code was working before. Any ideas how to fix this?
Error: Cannot read property 'None' of undefined
stack:
index.ios.bundle:24163
require index.ios.bundle:244
index.ios.bundle:23216
require index.ios.bundle:244
index.ios.bundle:1187
require index.ios.bundle:244
index.ios.bundle:1116
require index.ios.bundle:244
Object.ErrorUtils.applyWithGuard index.ios.bundle:880
require index.ios.bundle:195
URL: undefined
line: undefined
message: Cannot read property 'None' of undefinedhandleException # index.ios.bundle:7033
index.ios.bundle:35950 Running application "TestApp" with appParams: {"rootTag":1,"initialProps":{}}. DEV === true, development-level warning are ON, performance optimizations are OFF
index.ios.bundle:7033 Error: Invariant Violation: Application TestApp has not been registered.
stack:
Object.AppRegistry.runApplication index.ios.bundle:35957
jsCall index.ios.bundle:7328
MessageQueueMixin._callFunction index.ios.bundle:7591
index.ios.bundle:7618
index.ios.bundle:7612
ReactDefaultBatchingStrategyTransaction.Mixin.perform index.ios.bundle:6143
Object.ReactDefaultBatchingStrategy.batchedUpdates index.ios.bundle:13907
Object.batchedUpdates index.ios.bundle:4686
URL: undefined
line: undefined
message: Invariant Violation: Application TestApp has not been registered.
I think I figured out the prolblem. It had to do with a component I was using, in my case react-native-device. What I had to do to fix it was delete the node_modules folder located in the component. AppName/node_modules/React-Native-Component/node_modules.
I also updated the dependencies in the package.json file also located in the component folder AppName/node_modules/React-Native-Component/package.json and change the react-native dependency to (or something similar):
"peerDependencies": {
"react-native": ">= 0.4.0 < 1"
},
Update
You can also try restarting the computer. I've noticed with that node starts opening multiple processes and that can cause issues.
Update 2
From the project root folder run in terminal:
./node_modules/react-native/packager/packager.sh --reset-cache
A combination of all the fixes above has fixed it for me. Hope this helps someone.