React Native component dependency which requires rnpm link

Question

I just created a component for React-Native that I will push soon to npm as a package. Although I'm facing an issue.

The component is dependent of another npm package called react-native-image-resizer. This package needs to be linked with rnpm in order to work.

Although, when I just install my component in a brand new project, the dependency won't be linked automatically, and the native library won't appear in the project. Of course, when I run rnpm link, it won't add it to the project either.

So I'm wondering what would be the best way to install and link this dependency?

MacBook-Pro:Example $ npm install react-native-image-crop

> [email protected] preinstall /Users/alexmngn/Work/react-native-image-crop/Example/node_modules/.staging/react-native-image-crop-95365d1b
> npm install --save react-native-image-resizer

[email protected] (git+ssh://[email protected]/alexmngn/react-native-image-crop.git#90e002c7d0f01c9d61277c30cad375560f09a94a) /Users/alexmngn/Work/react-native-image-crop/Example/node_modules/.staging/react-native-image-crop-95365d1b
├── UNMET DEPENDENCY react-native@^0.31.0
└── [email protected] 

npm WARN [email protected] requires a peer of react-native@>=v0.14.2 but none was installed.
npm WARN [email protected] No repository field.
- [email protected] node_modules/react-native-image-crop/node_modules/react-native-image-resizer
[email protected] /Users/alexmngn/Work/react-native-image-crop/Example
└── [email protected]  (git+ssh://[email protected]/alexmngn/react-native-image-crop.git#90e002c7d0f01c9d61277c30cad375560f09a94a)

MacBook-Pro:Example $ rnpm link
MacBook-Pro:Example $ # Nothing gets linked here...

Also, as you can see up there, I have an unmet peer dependencies issue with react-native when I install my component in my example project, even though it is listed properly (with the right version) in my dependencies in package.json:

{
  "name": "Example",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.2.1",
    "react-native": "^0.31.0",
    "react-native-image-crop": "git+ssh://github.com/alexmngn/react-native-image-crop.git"
  }
}

Any idea why it complains?

Repo of the component available here: http://github.com/alexmngn/react-native-image-crop.git

Thanks

Answer 1

The rnpm link only links packages it found in package.json, generally these packages are installed via command rnpm install or npm install --save.

In order to automatically do this for those who install your package, you can write a preinstall npm script which will be executed before the package installed.

In thepackage.json add scripts block like this

{
  "scripts": {
    "preinstall": "npm install --save [email protected]"
  }
}

After doing this, when someone try to install your pacakge via npm, react-native-image-resizer will be installed first, and also add leave ab entry to package.json -> dependency so that rnpm link can work correctly.

Read more information about npm script