How to make a React Native package?

[oney]

I have written some codes that bridge native code to react native, and I want to make it to a package.
The project name is RCTRating.
RCTRating/package.json is like

{
  "name": "react-native-rating",
  "version": "0.0.1",
  "nativePackage": true,
  "scripts": {},
  "dependencies": {
    "react-native": "^0.11.2"
  }
}

And I create a new project "TestRating", and modify package.json to

  ...
  "dependencies": {
    "react-native": "^0.11.2",
    "react-native-rating": "file:../RCTRating"
  }

And run npm install, the files is coped to node_modules/react-native-rating.
Then, I run the code.
In the TestRating/node_modules/react-native-rating/index.ios.js, I have

var RCTRatingManager = require('react-native').NativeModules.RCTRatingManager;

RCTRatingManager is undefined
I have a file in TestRating/node_modules/react-native-rating/ios/RCTRatingManager.h, so it should not be undefined.
Why? Please help me.

[ghost]

First of all you need to add a "main" field to your package.json. This basically tells the packager where the main entry point of the module is e.g.

...
"main": "deviceinfo.js",
...

Secondly, you need to export something from TestRating/node_modules/react-native-rating/index.ios.js so you can import it later. You can do this by setting module.exports

module.exports = require('react-native').NativeModules.RCTRatingManager;

Then when you do require('react-native-rating') you will get an instance of RCTRatingManager.

Finally if you're having problems with NativeModules.RCTRatingManager being undefined make sure you have RCT_EXPORT_MODULE() in your TestRating/node_modules/react-native-rating/ios/RCTRatingManager.m.

I wrote a device info module that is quite simple so if you're looking for a simple working example of a module then take a look: https://github.com/rebeccahughes/react-native-device-info

[oney]

Thank you so much for reply.
I look some react native packages(also your package 😄). Those packages use the way of creating Static Library(by New Project -> Cocoa Touch Static Library) and adding some codes to it, right?
After running npm install some-package-xxx --save, developer has to add .xcodeproj to the project and add lib*.a to Link Binary With Libraries.
Is it possible to automatically do these things? Like pod install.
I think this repository can help.

[ghost]

Yes you create a Cocoa Touch Static Library in the module. I think there was some talk about automating the process in #235 and here: https://github.com/exponentjs/rem

[oney]

Thanks again. This is what I am looking for.
Another question, is these informations written in the document? If there is "Make a React Native module" guide like this and this, it can help many people.

[ghost]

Yes there are some guides here:

https://facebook.github.io/react-native/docs/native-modules-ios.html#content
https://facebook.github.io/react-native/docs/native-components-ios.html#content

[oney]

Thanks! It's helpful.

[keshavkaul]

@rebeccahughes I'm looking for some official documentation specifying correct way to create a native module library. I have come across this repo https://github.com/frostney/react-native-create-library but I'm not sure if that's the best way to go about creating a native react native library. Any help would be appreciated. Thanks