Build, Test & Publish Own Native Module As npm: ReactNative

You will find many great articles across the web for creating and publishing an npm package. It seems publishing an npm package can be as easy as running the npm-publish command into the terminal.

It might be straightforward for other platforms. However, when you start creating for React-Native, the available resources might not fulfil the complete flow from creating to testing locally to finally publishing it.

Assumption

This guide assumes that you have a basic understanding of npm and ReactNative Native Module.

What are we going to build?

There are two ways to write a native module for your React Native application:

1. Directly within your React Native application’s iOS/Android projects
2. As an NPM package that can be installed as a dependency by your/other React Native applications

In this post, we are going with the second option. We will walk through building a native module and further distributing it as an npm package.

Step 1: Creating an npm account

If you finally need to publish your native module as an npm package then you need to have an account in npm or if you just need to test it locally then skip it for now.

Step 2: Setting up the native-module structure

Go to the respective folder where you need to create the module and run the below command.

npx create-react-native-library react-native-module

Where create-react-native-library is the community tool to set up with the basic project structure for a native module and react-native-module is the name for our native module

Here you will get the different options of languages to be used. We will be going with C++ for both Android & ios.

This is the complete structure that you will be getting after the successful creation. The main highlights are the “android”, “ios” and “CPP” folders.

I would deeply request you to understand the basic code of the android and ios folder from this link https://reactnative.dev/docs/native-modules-android

Note:- If you are trying to use yarn for packages installation and the command isn’t working for you, delete the .yarnrc folder or comment out the yarn-path “scripts/bootstrap.js” inside the .yarnrc file.

Take a moment to thanks the community for such a great tool. It definitely reduces the pain of creating a basic project structure.

Step 3: Linking the module to react-native project

Before we publish this native module as an npm package, It is very much important to test it locally with our existing react-native project.

Note:- If you are using managed expo workflow, Hold on! eject it.

For other npm packages linking part would work like a charm with the simple npm link command but that’s not the case here with react-native.

Because React Native packager doesn’t support symlinks. Yeah, you heard it right. Holla, saved a complete day of yours.

After some googling, I got the two solutions for you…

1. Use haul packager in the example app. Haul supports symlinks, so you can use npm link them as usual.
2. Use local dependency via file:../ and then edit files in node_modules folder or reinstall every time you make changes.

For the best workaround, you can go with haul packager but here We will be going with the simple file path process to get the work done.

So let’s do this, Jump to the react-native project where you need to link and test the native module and run the below command. Let say the name of the react-native project is “projectB” and both the “react-native-module” and “projectB” are under the same folder.

Run the below command inside projectB.

npm add file:../react-native-module or yarn add file:../react-native-module

Yeah, it is as simple as that. Once the command ran successfully you can see the “react-native-module” inside the node_modules of projectB.

Step 3: Testing the linked module

We are almost done with the major part and now it’s time to test what we have done till now.

Open your react-naive project (“projectB” in my case) in the Android Studio or the X-code and build the latest apk containing our native module “react-native-module”.

Once you have the latest apk build with “react-native-module” you can copy the code inside the example folder of “react-native-module” and paste it anywhere in projectB and the code will work like a charm.

✨Hurray, You have done it!

Step 4: Publishing as npm package

Publishing your NPM package is as simple as entering this a two-word command in the CLI

• Go into your terminal, type npm login and insert your details.
• In the terminal, navigate to the root directory of your package “react-native-module” and type npm publish

It’s as simple as that! If the package name is already there in npm, you’ll get an error message, and you’ll have to choose a different name. If you need to publish under any organisation read about the npm scope package

If everything worked successfully, Take a moment to Stand-up and push your chair back and start dancing.

🎉congratulations — you are now the author of a react-native npm package!

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

This is my first article, I hope it was informative and helpful for you. If you have any doubt or suggestion do post it in comment or drop a message in any of my social media id.

Twitter: https://twitter.com/jaisadarsh123

LinkedIn: linkedin.com/in/adarsh-jaiswal-5025a2168

Instagram:@jaisadarsh

Facebook: https://www.facebook.com/adarsh.jaiswal.7712826