Publishing React Native Modules to NPM

In the previous article we focused on creating FlatListSlider component. So if we want to use it in every project we need to copy-paste the boilerplate code which is time-consuming and even led to import issues. We can simplify this by publishing the module to the NPM repository. Moreover, you become a contributor to the open-source community.

NPM refers to Node Package Manager and is target towards javascript programming language. NPM command line utility comes with inbuilt support for publishing module to npm repository.

Step 1: Create an NPM Account

First, you need to signup for the NPM account using the link https://www.npmjs.com/signup & and validate your email

Step 2: Create Local Folder for Library

It's up to you how to organize your folders. You can create a separate folder in src for each module in the library. Since for me, it's a single module library so I will place all files in the src folder itself.

mkdir flatlist-slider
cd flatlist-slider
mkdir src
cd src

Step 3: Creating Index File

So your library’s first entry point is index.js which enlist all exported modules. You can directly create an exportable component in the index file or create a separate file for each component and list it as exportable in the index file which is a preferred way for doing it.

Step 4: Add Readme file

It's always a good practice to have a readme for your library with detailed documentation to guide the developer to understand and use the library. Attaching screenshots wherever required makes it more developer-friendly. It also helps them understand the copyright licensing. To understand different types of open source licensing go through the below link.

Licenses & Standards

Step 5: Version Control

It's very important to have the code backed up in a version control system like Github or any other provider. We need our repository link in next step.

Step 6: Init NPM

With npm init command, it creates an important file package.json which enlist all metadata for the library. It also lists down all the dependencies for your library if any. You need to fill up multiple questions before the package file is created.

One main this is the library version. You can follow the below documentation for your versioning → https://docs.npmjs.com/about-semantic-versioning

In this post I don’t need to do at the native level and thus no need for linking is required. Hence skipping native linking part as its purely built with react inbuilt components.

Step 7: Log in with NPM in the command line

Use the below command to login

npm login

Enter username and password and you are all set for publishing

Step 8: Publishing to NPM

You can set the proper version and publish with command

npm publish

You cannot publish with the same version name and you need to increment it with every new publish.

Note: You can test your react component by manually importing it into your project and once its successfully tested you can proceed with publishing

NPM Published Library

A love note from NPM

NPM sends out a publish notification once your new version is successfully published.

Links:

• This post is a continuation of my previous post → Creating ImageSlider with FlatList in React Native