Publishing a React Native Component to the npm Registry

In this post we’ll look at how to publish an npm package to the public registry. For this demo I’ll be using a React Native component that has been already build but not yet hooked up to work with npm. The same instructions apply for other JavaScript projects. For the full source code go the github project here.

Initialize your npm package

We first need to initialize the working directory with a package.json file. This file holds all the meta-data about the package and its dependancies. In this example we’ll be using a directory that already has the React Native component we wish to publish.

Before continuing it is important to note that your package name needs to be unique. Search on npmjs.com to make sure you have a unique name.

cd react-native-pickr
yarn init

After running yarn init follow the propmts until you see your package.json file.

Add peerDependancies

Since our component is designed to be used within a parent React Native project and not on its own, we need to specify peerDependancies. The peer dependancies property in our package.json tells us that those dependancies will be provided by the parent project/lib our component is hosted in. For this example our Pickr component requires the use of react & react-native so we need to add those as peer packages.

// package.json
"peerDependencies": {
  "react": "16.8.3",
  "react-native": "0.59.3"
}

Install & Test the Package Locally

Before publishing, it’s helpful to create a dummy React Native app which uses the package we just made as a test.

react-native init RNDummy
cd RNDummy
yarn add file:../react-native-pickr

Verify its installed in RNDummy/node_modules. If it is, you can now import it your module.

// App.js in RNDummy react-native project
// Our Pickr component will be tested here
import React, { Component } from 'react';
import Pickr from 'react-native-pickr';

class App extends Component {
  render() {
    return <Picker {/** props **/} />
  }
}

If you decide to make changes to your component, you will need to re-add it to RNDummy via the previous yarn add file:<path_to_your_package>

Upload Package to the npm Registry

In order to publish a package on npm you need to create an account first. Then run:

npm adduser
npm publish