Is it possible to use npm modules with React Native projects directly, like one uses them within a React project by npm install <module-name>?
Of course I mean modules that can be used with a React app, that is front-end ones that will be run in the browsers JS runtime but not in the nodejs or iojs runtime as a React Native app does not run in the nodejs or iojs runtime.
Well, it's quite opposite. React Native actually runs within io.js runtime so most pure javascript modules for node will work. On the other hand most front-end modules written for React.js will not work for React-Native.
React Native does not use HTML DOM nor CSS as we know it from the web. It replaces the CSS/HTML DOM with the native view representation. So any front-end packages that are supposed to use HTML and be displayed in browser will not work.
On the other hand, any modules that are pure javascript and run within node.js/io.js are perfectly OK to be run in react-native.
For example, I am quite sure that Facebook uses their 'relay' data access library in their react-native apps (it's a javascript library that efficiently communicates over Facebook's Open Graph API and allows to access Facebook user's data).
The way to do it is the same as in other node.js/io.js apps. Simply run
npm install module --save
and you are done (package.json will be automatically update with the dependency for the module). Then you can use the package as usual.
Related
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.
After some investigation, I realized I'd have to detach/eject my Expo app in order to use libraries such as nodejs-mobile-react-native, a library that allows you to run (and ship) a NodeJS singleton thread with your client app.
So the problem here is that I can't use this library unless I detach - something that I've been doing my best thus far to avoid. It sees all references to this library as null and I've tried to even manually link it.
Is there perhaps another approach that someone knows of that allows you to run Node alongside React-Native, which is compatible with Expo?
I have also used Expo in the past and because of similar limitations I switched over to Native Development using Swift but, in your situations what you can do is:
expo eject
in the application directory to detach your app from expo, once you have done this then you will have a plain react native app, then you can add any nodejs packages compatible with React Native.
Done!
my question might be a little bit silly or ambiguous since I am fairly new to react native.
I'm trying to use the following repository for my react-native project https://github.com/smekalka/react-native-universal-pedometer. I have noticed that the repo is implemented in .java with platform folder unlike the regular .js or .ts files I used to see. Is this repository considered native module as react native doc describe?
Or in general how I can tell the whatever lib I am using is a native module.
The project is previously tested are under the support of expo-cli. I experienced the error null is not n object while using this repo. If so, I am probably going to eject the expo-cli and rewrite my code so I can use and even create own native-module for full control, some core implementations that written in other languages or expo-cli does not support.
Yes, the android and ios directories in the repository contain the 'native' code used to implement the platform-specific hooks that the Javascript will be able to pick up. Expo is not able to use these native modules or native code so your assumption is correct; you will need to eject your app in order to use this module.
If your app is below version 0.60 of React Native, after installing the module you will need to run react-native link react-native-universal-pedometer to link the native code to the Javascript runtime. If you're above 0.60, it will link automatically when installed.
I understand that react-native link (see post) is an automatic way to install native dependencies. The post above explain how to use the link command but lacking the detail of when to use it. Should it be used after adding a component, every code change or after introducing new module to the app?
Why we use react-native-link??
In this post, I will explain why we use react native link command and when we need to use this command or not?
First, we will understand what is native module??
Native Modules
Native modules are usually distributed as npm packages, apart from the typical javascript files and resources they will contain an Android and ios library project.
React Native provides an impressive amount of native modules that give you direct access to core platform APIs on both Android and IOS.
For example react-native-maps, react-native-firebase, react-native-socketio etc.
These modules or packages contained both platform (Android and Ios) code.
Now coming on to the react native link
Those libraries which are use native code, in that case you'll have to add these files to your app. For linking those library with react native code need to run react-native-link
Here are the few steps to link your libraries that contain native code
Automatic linking
Step 1
Install a library with native dependencies:
$ npm install --save
Step 2
Link your native dependencies:
$ react-native link
Done! All libraries with native dependencies should be successfully linked to your iOS/Android project.
Where we don't use react-native-link??
Those components which are only written in javascript they are not using any native code (Android and Ios). There is no need to run react-native-link.
For example rn-modal-picker, react-native-check-box etc.
You should check out this other answer: The use of react-native-link command?
You only need to run react-native link NAME_OF_PACKAGE when you install a new package that has a native codebase, or without arguments if you want to do it for multiple of them.
If Expo (create-react-native-app) is pure JavaScript, can I use other node modules in my Expo app?
in Expo, you can use any client based Javascript module, that you find in npm or that you created yourself.
But you can't use any kind of modules that has native parts in it. (Packages that you need to link to your react native projects can't be used) Although, Expo has its own SDK for your native needs.
The package you are talking about (mqtt.js) is a nodejs module, which can't be used with react native or in your case with Expo.
Just a guess, if you are trying to have a browser in your react native or Expo project, react native has a builtin in-app browser you might want to check out; https://facebook.github.io/react-native/docs/webview.html