i didnt do anything on project for 5 months maybe. I try to run now but it gives me this error:
I dont use WebView why i am getting this error ? and also i installed react-native-webview but error is still not going
these are my dependencies which i use :
You could try to search all the project about webView(especially in node modules), find out where use this tag.
Check if that modules have update? if yes, upgrade it. Or go to that page and change like this:
import { WebView } from 'react-native';
//change to below
import { WebView } from 'react-native-webview';//because you have install the new react-native-webview
And it should work well...
--update for picture--
Maybe you use some third-party Modules from NPM which depends on webview.
You should check this and upgrade the needed Package.
Maybe do an full-text-search in your "node_modules" for it. Or provide more information what your app does and which components it use.
Related
I reinstalled all my node_modules in my react-native project using yarn (Delete node_modules and run yarn). After it finished I've started my app and there heappens to pop up this warning:
[react-native-gesture-handler] Seems like you're using an old API with
gesture components, check out new Gestures system!
And then it lists a lot of react-native elements (I think) like this:
PanGestureHandler#http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:133321:38
PanGestureHandler#http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:132628:34
RCTView
View
AnimatedComponent#http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:68721:38
AnimatedComponentWrapper
RCTView
View
Card#http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:131894:36
CardContainer#http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:131451:34
RNSScreen
And so on....
I tried reinstalling react-native-gesture-handler (yarn romove react-native-gesture-handler and yarn add react-native-gesture-handler), but that didn't change anything.
The new version, of react-native-gesture-handler send warning if you use an old API version, but also if one of your package/library use it.
To disable the warning, you can ignore logs.
in your app.js / app.tsx
import { LogBox } from 'react-native';
LogBox.ignoreLogs([
"[react-native-gesture-handler] Seems like you\'re using an old API with gesture components, check out new Gestures system!",
]);
Here you have the explanation
UPDATE
This is now fix since : react-native-gesture-handler": "2.1.1"
This error is ridiculous :D
force the 2.1.1 version. and you won't see that annoying error again:
"react-native-gesture-handler": "2.1.1",
it may causes by react-navigation package if so use #react-navigation/native-stack instead of #react-navigation/stack from this link
This way worked for me.
Install
npm i react-native-gesture-handler#2.1.1
or install the version based on what expo has mentioned when starting the server (for eg : expected version is 2.1.1)
then close the server and open again by resetting cache
expo r -c
I also have the same problem. I kept getting this warning!. The solution provided below helps ignore the warning, but is not a root solution. and it may make your app bigger in size. Any other solutions
import { LogBox } from 'react-native;
LogBox.ignoreLogs([
"[react-native-gesture-handler] Seems like you\'re using an old API with gesture components, check out new Gestures system!",
]);```
Solution 1:
Actually, the warning is shows if you updated the react-native-gesture-handler to the latest version. You can ignore the warning by adding the following code.
import { LogBox } from 'react-native';
LogBox.ignoreLogs([
"[react-native-gesture-handler] Seems like you\'re using an old API with gesture components, check out new Gestures system!",
]);
Solution 2:
You can downgrade the react-native-gesture-handler to the old version using the following command. It will fix the error.
yarn add react-native-gesture-handler#2.1.1
React native CLI
just use this version
npm i react-native-gesture-handler#2.1.1
package.json
"react-native": "0.66.1",
"react-native-reanimated": "^2.4.1",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
i'm using React Native expo, and it shows
[Warning: Async Storage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '#react-native-community/async-storage' instead of 'react-native'. See https://github.com/react-native-community/react-native-async-storage].
i read this link and I understood that it's due to the fact that some dependencies are using old AsyncStorage, not the new one from community.
But I hardly found that any solution for Expo users. Is there any solution for Expo? Or if I have to manual change dependencies using the old AsyncStorage, how can i do it? Since I'm new to React Native, not really sure what to do..
In Expo you should always link the libraries that Expo includes in the App. So like mentioned in the docs here https://docs.expo.dev/versions/latest/sdk/async-storage/
expo install #react-native-async-storage/async-storage
is the correct import. If you are working with an old Expo-SDK this might be different, otherwise you should adapt your imports.
Now expo has migrated to use as well the community version as you can see here.
But if you get this warning definitely you have some dependency or more that still use the react-native-core version, if so please refer to the first answer to How to resolve using AsyncStorage (deprecated) warning? Using the community (correct) library:
if this is the case the best is as suggested in that answer is to
Your best course of action is to fork the repo and fix all instances of AsyncStorage to use the correct version, or open an issue.
This error occurs because firebase imports AsyncStorage from react native core and not the new library #react-native-async-storage/async-storage. I think firebase hasn't updated the by default import yet so you have to do it yourself.The way I fixed it was ;
Install react-native-async-storage: npm i #react-native-async-storage/async-storage
Go into the firebase index.js file that imports AsyncStorage from react native core: It is located at : 'node_modules/#firebase/auth/dist/rn'.
Create a variable that imports AsycnStorage from 'node-modules/#react-native-async-storage/async-storage' :
var AsyncStorage = require('../../../../#react-native-async-storage/async-storage');
Replace all uses of AsyncStorage in this file from react native core with new variable, i.e. replace "ReactNative__namespace.AsyncStorage" with "AsycnStorage",
I have used two social login and both are refers the react-native-webview dependency.
installed versions:
react-native-linkedin(it uses react-native-webview 7.0.5),
react-native-instagram-login (it uses react-native-webview 7.5.1),
react-native-webview ^7.5.1
Can you please tell me how to resolve this issue
screenshot
https://i.stack.imgur.com/ETW5J.png
facing same issue with same library . It is cause of different versions of webview which these library are using and as much as i know we can update those npm module directly so we can solve this issue temporary by following these steps
Create file InstaWebView.js(name can be any)
Copy code from
https://github.com/hungdev/react-native-instagram-login/blob/master/Instagram.js
Paste in InstaWebView.js and use as normal
I know it is hack but for now we can do this
Note :- For this hack , you need to install webview module so you may install webview module of same version as linkedin has so there will be no issue
I am trying to use a library react-native-tinder-swipe-cards - github
The issue is that it's giving the following error:
"Seems you're trying to access ReactNative.Component from the
'react-native' package. Perhaps you meant to access 'React.Component'
from the 'react' package instead?"
I am using the latest version of react native. Although the error tells me what exactly to do, it's not actually part of my application that is causing the error. It's their library that is causing the issue because removing this line:
import SwipeCards from 'react-native-swipe-cards';
Removes the error. Has anyone had a similar problem and can help me resolve this?
The NPM published version is not up to date with React Native and is using the "old" way to bring in Component (from 'react-native' instead of 'react'). Looking at the github repo the code has actually been updated but nothing has been published to NPM for that update. Your best bet is to either contact the author and get them to publish a update to NPM or use the repo version (npm i git+https//github.com/meteor-factory/react-native-tinder-swipe-cards --save)
Is there a way to determine if a npm package is compatible with react-native ?
I read that to be usable in react-native they must have polyfill. Is this something I can look for?
For example:
https://www.npmjs.com/package/redux-persist
I am learning react-native and javascript. I was hoping to take advantage of the many existing npm packages. However unless the package has "react-native" as part of the package name it does not seem to work.
Thanks in advance,
UPDATE (8/7/2017): Have a look at Andre Staltz's (staltz/react-native-node) package which makes ALL node packages work with react native!
As I understand it, any package that is (( NOT )) DOM dependent, should work. With regard to the rt2zz/redux-persist package, I only quickly looked it over but it appears as though they support the react-native store since they provide instructions for it.
import {AsyncStorage} from 'react-native'
persistStore(store, {storage: AsyncStorage})