How To Create Npm Package For React Native

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 t o 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.

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.