How To Create an NPM Package For React Native?

Introduction: -

Building an app requires a lot 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 npm packages are developed by developers and ready to use. Today I'm here to explain everything related to how to create a custom package and upload 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 custom package?

Before creating a custom 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 build the project and package.json file accordingly. In the future, changes can be made after this creation like 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 and 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 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 and use the below screenshot.

Now we will upload our package to npm.

Open the terminal go to your project directory and Run the below command 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 our whole code to the git repository and you can refer to the below git commands.

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 using the below command.

npm install react-native-animated-floating-button

After running your project with the below command.

npm i

for ios:-

cd ios && pod install && cd ..

npm run ios

for Android:-

npm run android