React Native - Error on importing third party library - react-native

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)

Related

React Native Expo shows Async Storage warning

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",

Unable to resolve module #react-native-masked-view/masked-view 2021

I have already tried all of the answers in this previous thread and they have not worked
Unable to resolve "#react-native-community/masked-view
I have been unable to build my app in any capacity. Using expo ~42.0.0 to manage installations.
Unable to resolve module #react-native-masked-view/masked-view from
/node_modules/#react-navigation/elements/src/MaskedViewNative.tsx
Here is that file on their main branch
https://github.com/react-navigation/react-navigation/blob/main/packages/elements/src/MaskedViewNative.tsx
Just curious what this error means, expo documentation says react navigation uses #react-native-community/masked-view this error and code in the latest release says other wise
https://docs.expo.dev/versions/latest/sdk/masked-view/
Has anyone found a solution?
expo documentation says react navigation uses #react-native-community/masked-view
Expo documentation says React Navigation 5.x uses #react-native-community/masked-view. You're probably using React Navigation 6.x, not React Navigation 5.x. But it doesn't matter what Expo documentation says if you're getting an error because a specific package is missing and you already know which package it is.
You need to install #react-native-masked-view/masked-view:
expo install #react-native-masked-view/masked-view

React Native app crashes on launch with Invariant Violation

I have a react native app built using Expo and everything was working fine until I had to npm install a package that broke everything. I've uninstalled the said package but the app doesn't seem to work any more. It shows the following invariant violation:
It shows an error Invariant Violation: ListView has been removed from React Native - however, I have not used ListView anywhere in my project. All my lists are through FlatList or VirtualisedList.
Additionally, I'm unable to deduce from the error info about the origin of this error. How do I fix this?
If you have the backup of the code please check the older version of React Native in package.json.
When you do npm install command your React Native version upgraded or may be some other packages.
So, you need to compare the packages with old package.json file. If you found that some packages are updated then you need to remove ^ e.g react-native: ^0.60.0 from package dependencies. This one is the only way to solve this problem.

Twilio import error: Module cannot be null

I've done npm install --save react-native-twilio and react-native-link in my EXPO react-native project. the code compiles without error. But when I add this line of code:
const Twilio = require('react-native-twilio');
in my file, it reports an error says Module can not be null.
I think it is because I didnt link my twilio library to the project right, but I dont know how to fix it, can someone give me some help?
It looks like react-native-twilio has native dependencies and with EXPO, its not possible to include custom native modules. The only way is for you to eject your app to create native builds.
[Official docs for ejecting] (https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#ejecting-from-create-react-native-app)

Installing npm modules makes flex crash with type errors

I'm attempting to use a component in my React Native project, specifically this one:
https://github.com/lucholaf/react-native-grid-view
I run npm install react-native-grid-view in the project's directory, but as soon as I do that, after building I get:
Is the problem that I'm running npm install in the wrong location? I've tried other directories, but then React doesn't see the modules and says "unknown module".
Thanks!
The problem was that the component was pointing to an older version of React Native, 0.3.4. Manually updated to 0.4 and it worked.