How To Create an NPM Package For React Native?

Introduction

Building an app requires a lot of work from the JavaScript side and the react-native side. So, a custom package can help at this point (you can simply call the npm package). So, React Native npm packages are developed by developers and ready to use. Today, I'm here to explain everything related to creating a custom package and uploading it to the npm store/registry.

Requirements for creating npm package

GitHub account
Npm account
Knowledge of React-Native and TypeScript

What is npm?

Npm stands for Node Package Manager. This is the world's largest software registry. npm allows users to publish their own repositories and use other repositories with or without login. Npm is a node. Js-based command line utility and dependency manager. Code is packaged in a tarball and stored in a central CouchDB database. Npm doesn't track changes. It might seem that way because you can have multiple versions of a package, but npm can't tell the difference between them.

What are Dependencies?

Peer Dependencies:- These are dependencies that are required by the component and already satisfied by the project. For example, React and React-Native are required dependencies for a React-Native project. So, if someone installs your component, they should already have those dependencies installed, and you don't want to install them again.

Dependencies:-  These are project dependencies that may or may not be provided by the project, so the component must install them. For example, if your component requires Lodash or Prop types, they may or may not be present in your project, so you need to install them.

DevDependencies:- These are the dependencies needed by people who want to contribute to the project and contain all the libraries needed to run tests such as jest, babel, and es-lint. This is not necessary if you have not set up any tests in your project.

What do you need before creating a NPM package for React Native?

Before creating a React native package, you should check that no similar package is available or published. You can search git or npm to find existing packages of a similar type. I think you should create packages for other functions if the same type of package is available.

Create a new project: -

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

After running the above command, it will ask you some questions and help you build the project and package.json file accordingly. In the future, changes can be made after this creation, such as changes to package names, versions, authors, git URLs, etc. You can refer to the screenshot below.

Then, the project will be created. You can install the node module :

yarn install or npm install

Now you can create an empty repository in your GitHub and you can add it to this created project.

You can also check the repo URL in the main project  package.json file.

Now, we are ready to implement this project.

Before releasing a package live, you should test it locally. I need this because every time I make a change, I have to upload the package to npm so I can see it. Due to time constraints, I can test locally in other projects.

Open the terminal, go to your other local project, and run this command.

Yarn add /Users/EMP20210014/Desktop/react-native-animated-floating-button

Open the package.json file and check whether the package is installed or not.

"dependencies": {
   "react": "18.1.0",
   "react-native": "0.70.6",
   "react-native-animated-floating-button": "/Users/EMP20210014/Desktop/react-native-animated-floating-button"
 },

You can import packages using the screenshot below.

Now, we will upload our package to npm.

Open the terminal, go to your project directory, and run the command below for npm login.

npm login

Will ask you for a username, password, and email for authentication. You need to enter OTP, which you will get in your email.

After the npm login, run the below command for the first time to initialization your package in  npm

npm init

Before publishing, we need to upload all of our code to the git repository. You can refer to the git commands below.

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

Now, your code is uploaded to GitHub.
Run the below command to publish your package.

npm publish

After running the above command, checking your package is live from the npm registry. You can install it using the below command.

npm install react-native-animated-floating-button

After running your project with the command below,

npm i

for ios:-

cd ios && pod install && cd ..

npm run ios

for Android:-

npm run android

Conclusion

Creating an NPM package for React Native is an effective way to improve your development. On top that following the right step-setting up your package, configuring package.json, and properly testing-you can seamlessly create an NPM package for React Native

Whether you're contributing to the community or improving your internal development workflow, building a React Native package opens up many possibilities for collaboration and efficiency.

If you are looking for a custom software development which can help you build app helping you scale your bussinss. We have our decade of experience in developing software. If you are looking for React Development Services visit us today!

FAQs

1. What is an NPM package in React Native, and why should I create one?
   
   An NPM package in React Native is a collection of reusable code that developers can share and install via the NPM registry, you can encapsualate common features or components, making it easier for other developers to integrate them into their projects.  
   
   
2. What are the prerequisites for developing an NPM package for React native?
   
   Before developing any NPM packagefor React native, you will need few things
   
   Knowledge of React Native and Javascript
   
   Node.js and NPM (or Yarn) Installed
   
   A basic understanding of modular programming and how to export code as reusable components.
   
   
3. How can I configure my React Native code for an NPM Package?
   
   To configure your React Native code, you'll need to:
   
   Set up a project directory and initialize it with npm init.
   Organize your code into modules that can be easily reused.
   Making your code is compatible with other React Native projects by testing it Ia sample apps.
   
   
4. How do I publish my React Native NPM packages to the NPM registry?
   
   To publish your package, log in to your NPM account, making sure that your package details like name, version, description are correct in the package.json file, and then command npm publish. This will make your package available for others to install.
   
5. How can I update and maintain my React Native NPM package after publishing?
   
   After publishing, you can update your package by making changes and incrementing the version number in package.json. Once the updates are ready, simply run npm publish again to upload the new version.