How to create your own react native npm package

In this post I will discuss how I created my first react native npm package and how can anyone build their own package. The package I created is react-native-infinite-looping-scroll.

Inception

The problem was that I wanted a component in which I can pass a limited data and the render function of each item and it produces an infinite scrolling sensation in both directions by repeating the same data again and again.

So I searched a lot for this component and couldn’t find any, hence I decided to create one from scratch and published it on npm so that others who required this type of component wouldn’t need to implement it from scratch.

I implemented it using FlatList and by appending the data again and again whenever the user reached a particular threshold in any direction and removing the redundant data after a particular limit was reached, so the final result looked something just like this -

The final InfiniteScroll component implemented with data items numbered from 1–7

Procedure

This is the overview of the procedure I followed to create this package, if you want a more detailed procedure then you can visit the official npm docs.

Initial Setup

First you need to create a directory with the name of directory as the name of your package(that’s optional).

After that run command npm init in that directory, then it would ask you the details of your project like the name, version etc to create the package.json Don’t worry if you don’t know what to fill in a particular field, just keep pressing enter and you can change it later on.

After the package.json is created then created a src folder and place your component file into it and rename it as index.js. In package.json replace the value of main with "src/index.js".

Dependencies

Now add the dependencies to your project, it is usually divided into 3 parts -

• peerDependencies These are the dependencies that are required by the component and would already have been satisfied by the project. For eg -For any react native project react and react-native are necessary dependencies, so if anyone is installing your component they must have already installed these dependencies and we wouldn’t want it to install them again.
• dependencies These are the dependencies that are required by the project that might be or might not be satisfied by the project, so the component should install it. For eg — lodash or prop-types might be a good example for them if they are required by your component, because these may be or may not be present in the project, so we should better install them.
• devDependencies These are the dependencies that will be required by someone who wants to contribute to your project and will include all the libraries like jest , babel and es-lint that are required to perform the tests. These aren’t necessary if you haven’t setup the tests for your project.

Versioning

Proper Semantic Versioning of your project is very necessary and it shouldn’t be ignored. I would refer you to go through this guide on semantic versioning for proper versioning of your project.

Tests

The tests are necessary for anyone who is looking to contribute to your project for proper and maintainable code. This is a vast topic and I won’t be able to cover it up in this post so let’s keep it for another time( I too have also not set them up yet ;) ).

If you still have your doubts you can view the package.json of my project for more info.

Publishing and Testing

Once you’re done with the above steps, then it’s time to get you rolling.

First of all you need to create an account don npm for that, just run npm adduser and fill in all the necessary details.

Once done you can check if your user is created successfully by visiting npmjs.org/~yourusername.

Now just run npm publish in your project directory to publish the package.

Once published you can test the package in any react native project by running

npm install your-package-name

Once installed successfully you can test it by importing it in the following way

import YourComponent from 'your-package-name'

And test it. If it works then congratulations you have successfully created your first npm package.

Updating

Once published you can update your package anytime by making the required the changes in the component and then updating the version in the package.json accordingly using semantic versioning and run npm publish to update the package.

If its just a patch update then you can also update it by running npm version patch in your project directory to automatically increment the patch version by one and then run npm publish to update.

I guess by now you might have a clear idea on how you can create your own npm package, if not then you can jot down your queries down below and I will try to help you the best I can.

Thanks for reading ;)