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::

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

Get Full-stack React Native Developers to Work on Your Project at Your Convenience

coma

Conclusion

This article is helpful to the developers who want to know how to create npm package for react native. These custom packages are also available publicly so other developers can also use them. I hope developers can understand how to upload packages to npm and git and then how to update it. The main reason to write this blog is if any developer has done any kind of complex code/feature/design and anything he/she can upload it to the public and make the attention of everyone.

Developers can follow the GitHub link to check the custom package::

!! Enjoy, Keep and Do Delicious Coding !! 🙂🙂

Ronak K. Kotak

React-Native Developer

Ronak is a React-Native developer with more than 2 years of experience in developing mobile applications for android and iOS. He is dedicated to his work and passion. He worked in different kinds of application industries that have responsive designs. He also has knowledge of how to make an app with expo cli and react-native web and some basic understanding of react.js.

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

They're very tech-savvy, yet humble.

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author
Katie Taylor
Founder, Child Life On Call
coma

As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give
coma

We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!

author
Bart Mendel
Founder, Mindworks