How To Create NPM Package For React Native?

Currently, hybrid technologies is in high demand and in that React Native is using more and more to make a mobile application for android and iOS.

In this article, we are going to cover how to create npm package for React Native?

Why do we need this and why do we need to use it?

For making an app we require lots of things from the javascript side and from the react-native side. So at that time custom packages can be useful (Simply we can call npm packages). So npm packages are developed by developers and we can use them ready-made. Today I will explain here everything related to how to create custom packages and upload them to the npm store/registry.

Official documentation ::

Library Used::

Requirements::

• GitHub account 
• Npm account 
• Knowledge of React-Native and TypeScript 

Things we need to do before making custom packages (Prerequisite)

Before making a custom package we need to ensure that no similar packages are available or published anywhere. You can search in git or npm for similar kinds of existing packages. If the same kind of package is available then as per my thinking we need to make a package for other features.

Before implementation, we should have knowledge of some basic things?

1. What is npm?

Npm stands for node-package-manager. It is the world’s largest software registry. In Npm users can publish their repositories and use other repositories without any kind of login/signup. Npm is a Node. js-based command-line utility and dependency manager. Code is packaged into tarballs and stored in a central CouchDB database. Npm does not track changes. It may seem like it does since you can have multiple versions of a package, but npm can’t identify the difference between them.

More Information:: 

2. Dependencies : 

• peer dependencies These are dependencies required by the component and already satisfied by the project. For example – react and react-native are necessary dependencies for any react native project, so if someone installs your component, they must already have those dependencies installed and we don’t want it to install them again.
• dependencies These are project dependencies that may or may not be supplied by the project, thus the component should install them. If your component requires lodash or prop-types, for example, we should install them because they may or may not be present in the project.
• devDependencies These are the dependencies needed by people who want to contribute to your project and will include all the libraries needed to execute tests, such as jest, babel, and es-lint. None of these are required if you haven’t set up tests for your project.

How will we implement it?

1. To create a new project, run the following:

npx create-react-native-library react-native-custom-components

2. When you run the above command it will ask you some questions and based on that your project and package.json file will create. In the future, you can implement changes after this creation like package-name change, version, author, git URL, etc. You can refer to the below screenshots.

And After this, your project will be created. You can install node modules using the below command.

yarn install or npm install

3. Now you can create an empty repository in your GitHub and you can add it to this created project. You can also check reo is added or not to your project.

4. You can change the git url and add keywords as per the custom package and feature.

5. Now this project is ready to implement and you can see a simple demo example given by default. So for initial testing, we can use it.

6. Now before publishing the package to live we need to test it locally. It is required because if every time we change we need to upload a package to npm and then we can check it. So for reduced time purposes, we can test it locally in other projects.

7. You can import packages and use the below screenshot.

8. Now we will upload our package to npm. But we need to check that the same package name should not be available in the npm registry. You can search for the package here. 

9. You need to login into npm in vscode using the below command:

npm login   

It will ask you for username, password and email and for authentication you need to enter OTP which you will get in email.

10. Then You need to run the below command for the first time to initialize the library and It will ask you for confirmation like the package name, version, license, etc. 

npm init

11. Before publishing we need to upload our whole code to the git repository and you can refer to the below commands.

• git status
• git add -a
• git commit -m “your message”
• git push origin/git push –set-upstream origin master

Now your code is uploaded to git. You can upload your package to the npm registry using the below command.

npm publish

12. Now for checking the live npm package from the npm registry you can install using the below command and you can check as we checked previously.

yarn add react-native-reusable-custom-components 

OR

npm install react-native-reusable-custom-components

13. Now we will update our package with some modifications and again we will upload it to the npm store.

1. 1. We will add one method Ex. method of giving the sum of two integers. And in last export that method
   2. Update example in a custom package
   3. Update version in package.json file
   4. Update README.md file based on new changes(You can edit readme.md file using the online editor )
   5. Upload and Save new code to the git repository
   6. Upload updated package to npm registry using npm publish command
   7. Test the updated version of the custom package.