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})
Related
I need to develop multiple react native projects which share common UI elements. I plan to create a UI component library and use it in all these apps.
What would be the best way to import the RN library into my RN project?
I think the cleanest way to go about it would be to publish the ui library to npm. Doing this would let you install and update the ui library the same way you would any other npm package.
e.g. if the npm package name is my-awesome-ui-components
Installing: npm i my-awesome-ui-components
Updating: npm update my-awesome-ui-components
Importing:
import { Switch, Text, Button, } from 'my-awesome-ui-components'
Here's a cool guide for getting started with publishing to npm.
Here's the npm docs on publishing privately (if thats what you need to do)
I tried to look it up but quickly got confused|
I have a package for reusable mobile components that's in a monorepo alongside multiple expo apps. Most of the components in this package are your average styled views and stuff, and all of the apps import the packages as
import ComponentName from "#my-package/Component"
It works well with all the base react native components, but now I need to specifically use an expo package (expo-icons) and I was wondering
1.- Aren't these packages tightly coupled to your expo version? They come prepackaged on expo init and you don't explicitly install anything.
2.- Is there any way to use them without explicitly installing anything in node modules? like Rely on whatever version of expo/vector-icons is installed in the app importing this package instead of whatever #my-package has installed
3.- If I relied in https://github.com/oblador/react-native-vector-icons which should work, how is the link step handled in the installing apps? Like App A imports an icon component from my package, do I need to explicitly go to my package and copy the fonts? Do I need to install https://github.com/oblador/react-native-vector-icons in app A?
I can tell these are likely questions that deal a lot more with how npm works but I have not gone too deep into it so I apologize if it's a duplicate.
You need to use peerDependencies for such packages.
See https://github.com/callstack/react-native-builder-bob#how-do-i-add-a-react-native-library-containing-native-code-as-a-dependency-in-my-library
Re: #expo/vector-icons, you can use react-native-vector-icons in your code and it'll work in both Expo and non-Expo apps since expo maps it to #expo/vector-icons automatically.
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.
I am facing the problem. I am not getting intellisense of properties onPress onLongPress, paddingHorizontal, paddingVertial even in import when I type Touch then expected Suggestion will be Touchable, TouchableOpacity etc no any suggestion working in react native in vscode.
If anyone still look for a solution,
here, install this npm package #types/react-native by typing in terminal:
npm install --save #types/react-native
This is where I found the solution
So i found an easy solution to this. All you have to do is change your language mode from JavaScript to JavaScript React.
But that only fixes the auto complete issue, to also fix the auto import you can install this vs code extension called npm Intellisense by Christian Kohler.
Link: https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
You will need to install an extension in VsCode to get that functionality.
vscode-react-native
To install and use the extension, just follow the steps provided from that github repository.
Happy coding!
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)