Invariant Violation Native component for "RCTCustomWebView" does not exist - react-native

Please help me to solve my problem as below :
Invariant Violation Native component for RCTCustomWebView does not exist
This error is located at:
in RCTCustomWebView (at WebView.android.js:296)

If you're getting Invariant Violation: Native component for "XXXXXXXXXXXX does not exist" it likely means you forgot to run react-native link or there was some error with the linking process.
Try this :
react-native link your-fresh-installed-module-here

Related

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

Console Warning in React Native

I'm with my react native app and when I run it I get the following error:
Failed prop type: Invalid prop `source` supplied to `Image`, expected one of type[number].
In the react.development.js file:
Function.prototype.apply.call(console[level], console, argsWithFormat);
^
Please provide the source code where the Image component is used.
Double-check the syntax towards the docs: https://reactnative.dev/docs/image

React Native Renaimated 2 failed and ERROR Invariant Violation in while using Drawer Navigation

Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?
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. 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.
Firstly for,
Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? error
Go to project's root directory
Update the babel.config.js in following way
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
"react-native-reanimated/plugin",
],
};
Regarding second error, when we used to put code from react native guide directly then we have to change the way react is imported,
Change this
import * as React from 'react';
to
import React from 'react';
This will remove ERROR Invariant Violation error.
That was worked for me finally. Add a few lines in MainApplication.java from this file
https://github.com/software-mansion-labs/reanimated-2-playground/blob/master/android/app/src/main/java/com/reanimated2playground/MainApplication.java
Any cache cleaning, reanimated babel plugin setup advices did not help.
Add this imports.
import com.facebook.react.bridge.JSIModulePackage;
import com.swmansion.reanimated.ReanimatedJSIModulePackage;
Also add this method in ReactNativeHostWrapper
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage();
}
And finally delete package-lock.json, reinstall node_modules, clean npm/yarn cache.

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

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.