Invariant Violation: Picker has been removed from React Native - 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

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

Adding #bam.tech/react-native-batch to a fresh new react native project does not work

I try to yarn add #bam.tech/react-native-batch but I got the following error:
node_modules/#bam.tech/react-native-batch/android/src/main/java/tech/bam/RNBatchPush/RNUtils.java:113: error: no suitable method found for put(String, batchEventData.put(key, URI.create(valueMap.getString("value")));
and
node_modules/#bam.tech/react-native-batch/android/src/main/java/tech/bam/RNBatchPush/RNBatchModule.java:529: error: no suitable method found for setAttribute(String, editor.setAttribute(key, URI.create(url));
while doing yarn android (no error on iOS)
I am using react 18 and *react-native 0.69.1

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.

Resolve a module conditionally in react-native

I want to import ReactNativePropRegistry in my React Native package.
I used to import it from 'react/lib/ReactNativePropRegistry' before React Native 0.38.0 but it has changed to 'react-native/Libraries/Renderer/src/renderers/native/ReactNativePropRegistry' in React Native 0.38.0.
I want my package to be supported on all the React Native versions including 0.38.0 so I did this
if(semver.gte(reactNativeVersion, '0.38.0-rc.0')) {
const ReactNativePropRegistry = require('react-native/Libraries/Renderer/src/renderers/native/ReactNativePropRegistry');
} else {
const ReactNativePropRegistry = require('react/lib/ReactNativePropRegistry');
}
But it seems that the packager tries to resolve the modules statically. So even if reactNativeVersion is less than 0.38.0-rc.0, it tries to resolve the module at this path 'react-native/Libraries/Renderer/src/renderers/native/ReactNativePropRegistry' which causes it to throw an error Unable to resolve module ....
Is there any way get around this?
You cannot do dynamic imports. However, because the React Native packager uses node-haste and both React and React Native use the Haste #providesModule declarations, you may be able to import the module by name without specifying the location:
require('ReactNativePropRegistry');
I haven't tried it for this particular module, but in theory it should work.
It might be good to know that some distant future version of the RN, the packager may drop support for requiring modules by the providesModule name across package boundaries, so this may not be a permanent solution.
However if you're working on a library, eventually you can just deprecate support for versions older than 0.38. Or could you do that already?

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.