I have upgraded to my app to react-native 60.4 which support Autolinking all packages so that you dont have to manually go about setting things up and thus lowers the chances of error.
The problem is most of the packages have still not gotten compatible with this process and henceforth the app completely breaks.
my error is with https://github.com/corymsmith/react-native-fabric
referring to an issue on the repo for the same -> https://github.com/corymsmith/react-native-fabric/issues/225, which still remains unanswered.
I started giving it a try by forking the repo and understanding the auto link process given by react native.
In the package.json of the node_module package i replaced
"rnpm": {
"android": {
"packageInstance": "new FabricPackage()"
}
},
with file in the package root react-native.config.js
module.exports = {
dependencies: {
'react-native-fabric': {
platforms: {
android: {
"packageImportPath": "import com.smixx.fabric.FabricPackage;",
"packageInstance": "new FabricPackage()"
}
}
}
}
};
I also updated the build gradle to 3.4.1 from 3.1.0
My react native app is able to now find the package.
But when i call the package in my react component i get NoClassDefFoundError, which means that class is not found.
Anybody else gave this a try and have a solution please let me know.
Try to unlink with react-native unlink and then re run your code again.
Putting it here from the above comment to make it more clear:
Ok i got this to work by changing the forked repo -> (adding a react-native.config.js in the root of the package with with auto discovery and link configurations), but i think the only scalable solution i see right now is to degrade to RN ^59.0 as not a lot of packages have auto link config changes. So will wait for RN 60.4 to mature and then upgrade to it in about a month. In addition to this fabric is currently migrating to firebase and plans to complete by year end. This mean that anyways the sdk integration is going to be obsolete and hence this package too.
Also this issue is majorly related to react-native-fabric and not RN itself.
Related
I'm trying to create a SVG component.
I have this problem after run command "npm i".
I think versions between packages aren't compatible.
How to fix this or create SVG component without react-native-svg package?
Thank a lot.enter image description here
Add the following to package.json:
{
// scripts, dependencies, etc.
"resolutions": {
"css-what": "5.0.1"
},
}
Remove lock file. Install the packages. Check if the app is still working. If works then keep the configuration (and ignore the warnings) else revert it.
Since you are using npm, you may wanna first refer this thread: npm equivalent of yarn resolutions?
I've already tried what's recommended in this screenshot
by using this line of code
import AsyncStorage from '../../../node_modules/#react-native-community/async-storage'; in the file where I'm importing async-storage from react-native
but this path is unresolved, i.e. async-storage doesn't exist in this directory. I also tried installing async-storage (even though it's already installed) by running yarn add async-storage, but nothing appeared in the previously mentioned directory
There are two ways you can do this.
Firstly import AsyncStorage correctly. This will remove the warning and fix the problem.
Secondly, suppress the warning. This will just hide the warning but will cause you issues once AsyncStorage has been removed from react-native. I would not do this as the first way actually solves the problem.
Note you can get this warning if you are using a dependency that uses AsyncStorage and still imports it the old way from react-native. Installing AsyncStorage won’t fix the error. You will need to look through your dependencies’ dependencies to find out which one is causing it.
This means actually going through the code of each your dependencies to see if they use AsyncStorage. Searching through your node modules or on the dependency's Github usually is sufficient but it can take some time to find it.
Once you have found out which one is causing it, you should open an issue or create a PR with a fix on the dependency’s repo. At this point suppressing the warning is all you can do until it is fixed.
Install AsyncStorage
Install it using your favourite package manager npm or yarn
Link the dependency
Use the dependency
Installation: choose the method you usually use
npm i #react-native-community/async-storage
or
yarn add #react-native-community/async-storage
Link the dependency (you may not have to do this if you are using 0.60+ as it has Autolinking)
react-native link #react-native-community/async-storage
Then you import it like this, and use it as before.
import AsyncStorage from '#react-native-community/async-storage';
You can see more about it by looking here
Suppress the warning.
Previously you would use YellowBox to suppress warnings, this has now changed to LogBox. The process is similar to that of YellowBox
import { LogBox } from 'react-native';
Then you can add the following
LogBox.ignoreLogs(['Warning: Async Storage has been extracted from react-native core']);
I usually do it in the App.js so it is easy to keep track of which ones I have hidden.
It won't remove the warning from your console, but it will remove any LogBox warnings associated with the error. However, I wouldn’t do this on this occasion as there is a proper fix, which is to install the dependency correctly.
Expo users
Currently Expo still imports AsyncStorage from react-native, due to this you may still experience the warning. I believe it still imports it this way for backwards compatibility reasons. A quick search of the Expo repo shows that there are many instances where it is used as you can see here. In this case your only option would be to suppress the warning. According to the Expo feature requests it is currently in progress, so hopefully it should be added to Expo shortly.
Expo Update
As of June 2020: #react-native-community/async-storage v1.11.0 can be installed in Expo managed apps. Hopefully this will lead to less of these warnings appearing as dependencies transition to the new way of importing async-storage.
Repo update
There is now a new repository for async-storage which can be found here
https://github.com/react-native-async-storage/async-storage
Check out the documentation for installation and linking instructions
https://react-native-async-storage.github.io/async-storage/docs/install/
If the source of the issue is Firebase then a working solution as of version 9.9.2 is to set the default persistence layer used by Firebase to store the authentication session to be AsyncStorage after correctly importing it:
expo install #react-native-async-storage/async-storage
then to add in firebase.js
import AsyncStorage from '#react-native-async-storage/async-storage';
import { initializeAuth, getReactNativePersistence} from 'firebase/auth/react-native';
and then to export { auth } via
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(AsyncStorage)
});
export { auth };
Unlike getAuth(), initializeAuth() gives us control over the persistence layer .
Reference.
For me this issue was with #firebase.
node_modules/#firebase/app/dist/index.rn.cjs.js
following the steps above from Andrew, in vscode I was able to remove the warning.
copy "AsyncStorage"
cmd + shift + f - then paste "AsyncStorage" into search
click three dots under search '...'
right click node_modules folder select 'copy path'
add path to 'files to include' in vscode search
find one example of the import or require statement for the original (incorrect) AsyncStorage, copy that. Paste it into the search, replacing the first search query.
Once all the imports are found install the AsyncStorage correctly for the new version (as mentioned above), also add to pods, then go through and replace all
require('react-native').AsyncStorage; => require('#react-native-community/async-storage').AsyncStorage;
import AsyncStorage from 'react-native'; => import AsyncStorage from '#react-native-community/async-storage';
I did a clean build with xcode, Then all was good to go, no more warning :-)
This seems to be an ongoing issue on Firebase with React Native.
Check out this thread:
https://github.com/firebase/firebase-js-sdk/issues/1847
I have been annoyed by this similar issue and here is my warning message. I simply solved it by:
go to: 'node_modules/react-native/index.js'
simply comment out all the lines that contains 'AsyncStorage'
Then it was working fine for me.
Credits to #Rory for the below steps:
Note: We need to find var reactNative = require('react-native') in node_modules
Note: If you don't want to do the following steps, just navigate to node_modules/#firebase/auth/dist/rn/index.js
cmd + shift + f - then paste var reactNative = require('react-native') into search
click three dots under search '...'
right click node_modules folder select copy path
add path to files to include in vscode search
Then in index.js where we find our search, do the following replacements:
// var reactNative = require('react-native');
var AsyncStorage = require('#react-native-community/async-storage');
// and further below
// var reactNativeLocalPersistence = getReactNativePersistence(reactNative.AsyncStorage);
var reactNativeLocalPersistence = getReactNativePersistence(AsyncStorage);
Refresh and the warning is gone!
if you're using npm
npm install #react-native-async-storage/async-storage
yarn
yarn add #react-native-async-storage/async-storage
YellowBox has been replaced with LogBox. You can use LogBox.ignoreLogs() instead to suppress the warning
In my case firebase using asyn storage from react native . I am using v8 firebase which has no getReactNativePersistence.
So I had this solution which may be helpful.
Keep below code snippet in one file ignoreWarning.js and import in App.js on top of file .
import { LogBox } from "react-native";
const ignoreWarns = [
"AsyncStorage has been extracted from react-native",
];
const warn = console.warn;
console.warn = (...arg) => {
for (const warning of ignoreWarns) {
if (arg[0].startsWith(warning)) {
return;
}
}
warn(...arg);
};
LogBox.ignoreLogs(ignoreWarns);
I created a React Native project from Expo. Then I wanted to add Flow to it. I noticed in my node_modules/react-native folder there was a .flowconfig so I copied that to the root of my project. After running flow I got some warnings from files in node_modules/exponent so I added an ignore for that whole folder. Afterwards, I still get many errors when running flow. Here are a few:
node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:227
227: /* $FlowFixMe */
^^^^^^^^^^^^^^^^ Error suppressing comment. Unused suppression
node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:1120
1120: if (__DEV__) {
^^^^^^^ identifier `__DEV__`. Could not resolve name
node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:2162
2162: if (__DEV__) {
^^^^^^^ identifier `__DEV__`. Could not resolve name
Expo SDK version: 14.0.0
Flow version: 0.37.0
React Native version: 0.41.2
You can suppress errors in .flowconfig file, in [options] section as follows:
[options]
suppress_type=$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-8]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
Then, in [libs] section, you should point so called library definition file, like:
[libs]
./libdefs.js
And in libdefs.js just declare:
declare var __DEV__:string;
These changes should resolve your errors. See:
https://flow.org/en/docs/config/options/#toc-suppress-comment-regex and
https://flow.org/en/docs/libdefs/creation/ for details.
Looks like it might have been an oversight on the flow types for that release version.
All of those errors look fairly harmless though so you could just ignore it. If you absolutely cannot ignore it, update to a later version of React Native that's locked to a different version of Flow? I've had good results personally (no errors) with React Native # 0.42 and Flow # 0.38.
Found this issue which recommended updating the flowconfig to use the latest version from create-react-native-app. Seems to have worked for me.
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';
I upgraded my app from react-native 0.15 to 0.16 but after that I'm getting an error and I don't know how to solve it.
TypeError:undefined is not an object (evaluating 'GLOBAL.Text={
get defaultProps(){
throw getInvalidGlobalUseError('Text')}}')
In Chrome Debugger:
Uncaught Error: Uncaught TypeError: Cannot set property 'Text' of undefined
Thanks
OBS: I'm running on Android.
I notice that changing app name solves the problem, I'm using Evently as app name today. I tried to recreate my virtual machine but didn't solve it.
In my case, I was able to narrow the cause down to one item in my .babelrc file:
{
"presets": ["es2015"]
}
As soon as I removed that and restarted the packager (making sure to also use the --reset-cache flag), I stopped getting the error.
Update 2:
It looks like React Native is making some changes to their .babelrc in version 0.20.0. So, if you are using that version or newer, you should follow the instructions at: https://github.com/facebook/react-native/tree/master/babel-preset in order to specify your .babelrc settings.
Update:
I've narrowed this down further to transform-es2015-modules-commonjs, which React-Native sets some options on, specifically {"strict": false, "allowTopLevelThis": true}. The es2015 preset does not set this option, and it seems that the React-Native .babelrc does not override it. If you want to use es6 modules and transform them to commonjs, you'll need to put the following in your .babelrc:
{
"plugins": [
["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}]
]
}
Note, Babel 6, which I updated to along with react-native 0.16.0, no longer contains any transforms by default. What I didn't initially realize is that the React-Native packager provides most of the transforms you might ever need (listed in their docs at: https://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers), and I'm thinking that the "es2015" plugin interferes with some of those transformers.
I also tried using "babel-preset-react" (http://babeljs.io/docs/plugins/preset-react/), and that plugin did not seem to cause any errors.
I solve the problem. I think it was because permissions in project folder. I ran chown in my folder to correct the permissions problems and now all are working.
Thanks
In my case the problem was a rogue .babelrc two folders up (my root code folder); I had initiated a yeoman generator to scaffold out a new project using babel-6...accidentally running yeoman from the root code folder. Apparently babel traversed upwards from my project folders until it hit this .babelrc which borked the react-native babel configs...
^ this was originally an edit to my initial answer, which was deleted WHILE I WAS UPDATING IT