Create and Publish React Native Package

Published in

Simform Engineering

6 min readAug 8, 2022

React Native libraries are collections of pre-written code that users can utilize to optimize tasks in computer languages. The code in a library is arranged so that it may be utilized by numerous applications unrelated to one another.

Node Package Manager (npm) is a tool that makes it easy for JavaScript developers to install, distribute, and manage npm packages, which are community-created modules that let developers dramatically enhance the functionality of their apps.

Now the question is how to create your own library and publish it to npm! 🤔

Gif from GIPHY by @usnationalarchives

Let’s find the answer to that in this article. 🌟

To create a React Native library, you need to follow these steps ✨

Step 1: Create a sample library

There is one open package that allows us to create an npm module with already added react-native capabilities. However, you can also create it on your own by adding package.json and other configuration files manually.

To create a new sample 💁‍♂ library, we are using this command:

npx create-react-native-library react-native-multiplier

While using this command, you will have to answer a few questions about your project and generate a new project in a react-native-multiplier folder.

Step 2: Add bob to the project

Bob tries to simplify your task. It requires answers to a few questions about the project and will then configure your project in the best way. 🗃

Many individuals do not compile the code when publishing because it’s a bit complex. 😕 Various factors, such as different entry points and babel setup for different targets, must be considered.

The type definitions must be generated and published if we use a static type checker like Flow or TypeScript. 😄

Use bob to automate and simplify this process. 😲 The Babel configuration and all scripts have been abstracted away.

To automatically configure your project, use this command:

npx react-native-builder-bob init

To manually configure your project, follow these steps:

First, install react-native-builder-bob in your project with this command:

yarn add --dev react-native-builder-bob

In your package.json, specify the targets to build for:

package.json

Add bob to your prepare step:

package.json

Configure the appropriate entry points:

package.json

It’s usually good to mark your source code with the react-native field to make debugging easier.

Metro already supports compiling a lot of new syntaxes, including JSX, Flow, TypeScript, etc. It will also use this field if present.

If you’re building a TypeScript 📜 definition file, also make sure that the types field points to the correct path.

While uploading code on git or any other platform, we don’t want to upload large files, 🗃 so add the output directory to .gitignore and .eslintignore

If you use Jest, add the output directory to jest.modulePathIgnorePatterns.

"modulePathIgnorePatterns": ["<rootDir>/lib/"]

This is how we create the module 📜 :

index.tsx

Below is a snippet of how we can use a module/library in an example application.

App. tsx

To upload your React Native library to npm, you need to follow these steps ✨

Step 1: Set up an npm account 😃

First, you need to create an npm account.

Step 2: Create a local folder for your library

How to organize your files is up to you. 📁 You can make a partitioned folder in src for each module within the library. Since, for me, it’s a single module library, I’ll put all records within the src folder itself.

Step 3: Create an index file

index.tsx

Our library’s first entry point is the index.js/.tsx file, which enlists all exported modules. You can directly create an exportable component in the index file, 😃 or you can create a separate component and list it as exportable in the index file.

Step 4: Add the readme file

A readme is a text file 📜 that explains all about your library. It contains all the instructions for using your module. Most developers always go through the readme file, so make sure to add one.

Step 5: Version control

It’s very important 🤔 to have the code backed up in a version control system like GitHub or any other provider. In the following step, we will need our repository URL.

Step 6: Start the initializer

You can run this command in your main project folder 📁.

This command will ask a few questions about your project and create the package.json file according to your answers.

npm init

It creates a critical record package with the npm init command, which enrolls all metadata for the library. It also keeps track of all the conditions for your library, in case there are any.

Below is a preview of the package.json file.

package.json

Step 7: Log in with npm in the command line

This command will ask for your username, password, and email. Following that, a one-time password will be sent to the email address. You will be logged in after providing the one-time password.

npm login

Step 8: Publish on npm

Before publishing, use this command to check it in the demo application.

npm pack

This command will generate a react-native-multiplier-0.1.1.tgz file.

Rename it react-native-multiplier to match the name of the library.

Now move this folder to the target project’s node_modules. Add it as a dependency in the package.json so you can import the component and test it.

Publish your library with the below command:

npm publish

On the off chance that you experience any error, like - This bundle is set to private!! ⚠️

Then don’t worry 😇, I’ve got you covered. Just change private: true to private: false in package.json. Now re-run the above command, and that should work ✨