Node modules in react-native

Question

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:

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:

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

Solution 1

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.

Solution 2

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