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)
Related
Right now I am working on npm package for my react native app,My app contain lots of things, like have a native modules, lots of dependencies,I am using this to create npm package for my app.
Question 1 - Above package (Mentioned as this) is good for create npm package for my react native app?
Question 2 - As I mentioned that my react native app contain native modules too how can I manage into npm package?
Many thanks in advance
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 want to create a library in react-native that doesn't need any linking and any native code, namely, it is just a pure-javascript component.
Nowadays, I only found the react-native-create-library but it is oriented for native modules. I can create my library with this one but wouldn't be very "lean".
Do you know some library/article to create an full-javascript library for react-native ?
Thank you very much!
Here are the steps:
run npm init in cmd
give answers to all questions.
create components here
create index.js file and import your component in that
export you module in index.js file
login in npm by using npm login command
List item npm publish to publish it on npm.
here is the library which I created for TextInput https://github.com/shashinbhayani/rn-textfield/tree/master/src
you can check there how I created the library.
I'm installing react-native-elements and in the installation guide there is this command:
npm i react-native-vector-icons --save && react-native link react-native-vector-icons
I am curious what this part of the command does and why it is necessary: react-native link react-native-vector-icons
As you might know, React Native allows you to interface with the native APIs of the OS via JavaScript. In order to establish this interface, some configuration is required in the native side (linking libraries, adding search paths and assets...), and since this process is relatively repetitive and can be automated, the RN folks made the link command in order to set up modules with native code more easily. In the case of React Native Vector Icons, it will add the font files and other configuration to your project, for both Android and iOS.
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})