Node modules in react-native

4
votes

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

3
javascriptnode.jsreactjsreact-nativereact-native-android
Please post text, not images. - Dave Newton

3 Answers

2
votes

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.

1
votes

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
0
votes

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.