Packaging a React Native component

So you've written some code in an existing project and it works great and you want to pull it out into its own package, put it on npm, then install it back into your project. But wait, your component is partially implemented in Objective-C! How can you share this on npm? Read on, dear friend.

Creating the package

1. Create a new project, use this type of naming, RN prefix.

RN is a prefix that I have been using as RCT should only be used for the react-native standard library, feel free to adopt it or use your own

1. cd to the project directory and run npm init, fill out your info!

1. npm install react-native --save-dev, then open up package.json and also add the same version to peerDependencies.

2. Now we need to tell XCode where it can find the React Native source. Open up the project, add React to your Header Search Paths.

The highlighted one is for development, the one above it ($(SRCROOT)/../react-native/React) is so that we can find the source when this library is installed into the node_modules directory of another project.

1. Copy all of your source files in and make sure they're listed in compile sources.

1. Add a good .gitignore (eg: Github's Objective-C.gitignore) - don't forget to ignore node_modules/**/*.

2. Commit, tag it with the curent version git tag 0.0.1

3. Push to Github, publish on npm git push origin head --tags && npm publish (if you haven't published a npm module before, check this out).

Great! You now have a package that you can share with your friends and foes can install with a simple npm install your-best-package-name

Using the package

1. npm install your-package-name --save

2. Add the library to your project and link it (gif below will be useful)

A note about development workflow

This is all great if you already have a project done and are never going to change it again. My techniques are crude but effective: I modify the existing version of the package inside of the node_modules directory of an example project where I use it, and then when I'm done I'll copy and paste the files back into the git repo, tag commit and push. I've heard that npm link local/file/path or npm install local/file/path works for some, whatever you prefer here!

---

So this solution is far from ideal, but discussions are taking place and progress is being made towards a better solution. Until then, hopefully the above instructions will help you share your modules!