Cannot use RNFS from react-native-fs - react-native

I am receiving this errors after importing RNFS from react-native-fs.
ERROR Invariant Violation: new NativeEventEmitter() requires a non-null argument., js engine: hermes
ERROR Invariant Violation: "ProjectName" 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., js engine: hermes
I installed and tried to import RNFS from react-native-fs for creating files and saving some data in it.

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

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

Error importing NPM module to nativescript app

Trying to import #nimiq/core or #nimiq/core-web or https://cdn.nimiq.com/nimiq.js to my Nativescript app but I can't found the way.
I've already tried with nativescript-nodeify but it thows and error in nativescript-vue (which I'm using)
Error is: Cannot find module '[...]\platforms\android\app\src\main\assets\app\tns_modules\nativescript-nodeify\patch-npm-packages.js'.

React Native: Can't import local files/components

In my react native cli project I am having trouble importing local files.
I just created the project using cli and it was working fine. I ran it in my mobile and it showed the default welcome message. Then I made src folder, components folder in it and created a Header component.
As soon as I imported the header component in App.js and used it it showed this errror message in my packager console.
Bundling `index.js` [development, non-minified] 0.0% (0/317),failed.
error: bundling failed: UnableToResolveError: Unable to resolve module `./src/components/Header` from `/home/sagar/workspace/native/my_expences/App.js`: could not resolve `/home/sagar/workspace/native/my_expences/src/components/Header' as a file nor as a folder
at ModuleResolver._loadAsFileOrDirOrThrow (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ModuleResolution.js:337:11)
at ModuleResolver._resolveFileOrDir (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ModuleResolution.js:222:17)
at ModuleResolver.resolveNodeDependency (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ModuleResolution.js:236:19)
at ResolutionRequest.resolveDependency (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ResolutionRequest.js:111:14)
at dependencyNames.map.name (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ResolutionRequest.js:136:10)
at Array.map (<anonymous>)
at ResolutionRequest.resolveModuleDependencies (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ResolutionRequest.js:135:42)
at Promise.resolve.then (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ResolutionRequest.js:175:21)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
The error goes away if I remove the Header component and the import statement.
Please help
Edit:
It turns out it is having trouble importing file with jsx extension. I changed the extension to js and the error went away.
So, How can I import jsx files.