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.
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 -
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.
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.
package.json is created then created a src folder and place your component file into it and rename it as
package.json replace the value of
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-nativeare 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 —
prop-typesmight 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
es-lintthat are required to perform the tests. These aren’t necessary if you haven’t setup the tests for your project.
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.
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
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.
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 ;)