5

I just tried adding some node modules into react-native. I figure out it will work only with react-native modules and react-native link that modules.

I want to use: - https://www.npmjs.com/package/node-google-image-search or - https://www.npmjs.com/package/first-image-search-load

I tried: Link1 Link2 Link3 Link4

When I'm using command link with "non-react modules" I still get nothing: enter image description here

Also, when I just trying to add this module by:

  1. import 'first-image-search-load'
  2. import {saveFirstImage} from 'first-image-search-load'
  3. import * from 'first-image-search-load'
  4. var first-image-search-load = require('first-image-search-load');
  5. var first-image-search-load = require('./first-image-search-load');
  6. var first-image-search-load = require('./node-modules/first-image-search-load');

and trying put these in index.android.js I get: enter image description here

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false

Body: {"message":"Unable to resolve module https from /Users/Pien/Projects/smog_bielsko/node_modules/node-google-image-search/index.js: Module does not exist in the module map or in these directories:\n /Users/Pien/Projects/smog_bielsko/node_modules/node-google-image-search/node_modules\n, /Users/Pien/Projects/smog_bielsko/node_modules\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: watchman watch-del-all.\n 2. Delete the node_modules folder: rm -rf node_modules && npm install.\n 3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start -- --reset-cache.","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]} onResponse DevServerHelper.java:323 execute RealCall.java:126 run NamedRunnable.java:32 runWorker ThreadPoolExecutor.java:1113 run ThreadPoolExecutor.java:588 run Thread.java:818

Please tell me how I can import normal npm plugins into react-native..

Thx

Community
  • 1
  • 1
Darex1991
  • 855
  • 1
  • 10
  • 24

3 Answers3

2

Actually, the ReactNativify project should do just this, let's NodeJS modules be used inside of React-Native code projects (RN).

As I write this, May 2017, the project seems to not work with RN versions 0.43.3+, due to breaking changes.

Big Rich
  • 5,864
  • 1
  • 40
  • 64
1

Some additional information on the answer provided by Big Rich.

I don't think the error you're experiencing is solved by applying ReactNativify method of shimming. Otherwise the error would mention a missing Node API object.

But if your first-image-search-node package was written for Node, and you do want to use ReactNativify, then there are some additional issues you should be aware of, which I documented here:

Can we use nodejs code inside react native application?

In short it highlights:

  1. A way to split transformer into 2 files.
  2. Suggestion to use 'babel-plugin-module-resolver'
  3. Write all your shim replacements in .babelrc, not js code
  4. Should include a root .babelrc even if you have transformer.js
Arnold Schrijver
  • 3,588
  • 3
  • 36
  • 65
0

You don't need to link packages that don't use native code. For libraries with just js, all you need to do is npm install packageName. If the library has any html/css/dom content then it will not work with react native.

Matt Aft
  • 8,742
  • 3
  • 24
  • 37
  • I thought the same. But when I checked lodash- it's working but with those two aren't. Is it the problem with packages? What I should do, to fix those modules for use it on react-native? – Darex1991 Mar 13 '17 at 16:27
  • Oh, these packages require to be run on a node server. You wont be able to use them with react native. Although react native runs on node, it doesn't have access to node APIs like https and fs which these libraries use. – Matt Aft Mar 13 '17 at 16:37
  • Ooo.. Good to know. Tnx @Matt Aft. For the future. How can I recognise which module can I use on `react-native` (which has dependencies from Node)? – Darex1991 Mar 13 '17 at 16:47
  • You would have to look at the code of the library, one of them is requiring 'fs' and other is requiring 'https' which are both for nodejs. – Matt Aft Mar 13 '17 at 16:59
  • Look inside the library, if it has android and ios, folders, it is most likely native and needs link for RN <0.6, else check @MattAft's answer to then differentiate between node library and raw js library – Jose Ananio Apr 06 '20 at 20:03