How to publish a React Native component to NPM — it’s easier than you think

Colby Miller
Mar 1 · 6 min read
Photo by Markus Spiske on Unsplash

So you want to contribute to the open source community? That’s awesome! Helping to grow React Native’s fairly young ecosystem is great.

When I decided to take on this task not long ago, I noticed there wasn’t much material around publishing React Native components to NPM. So I’m hoping this post will help make the process much easier for others.

Note: All sample code below is from react-native-progress-steps, my very own first NPM package.

Before we get started, make sure to register for an account on NPM. You can do that here.

Initial Setup

First, let’s create a folder where our React Native component will live.

mkdir <folder_name> && cd <folder_name># For example
mkdir my-component && cd my-component

Note: To keep this article brief, I’m assuming you already have Node and NPM installed on your computer. If that’s not the case, take a look at this documentation for help.

Once inside the folder, we need to initialize a new NPM package by typing . This will create a file that will hold some important metadata about the React Native component.

A series of questions will be displayed such as package name, version, description, keywords, etc.

Important: When asked for the entry point, make sure to enter and press enter. This will be the file that exports your main component.

Project Structure

The next step is setting up a folder structure for your React Native component. This is really up to you, but I’ll share a simple example of mine below:

You’ll notice some files that we haven’t created yet. We will be addressing those shortly.

Let’s create the file. This will be the most important file for properly exporting/importing your component. Navigate to the root project folder and type .

There are a few different ways of going about the content inside this file.

  • Directly writing the component class inside of the file and exporting it there.
  • Creating a separate component JavaScript file and exporting it in .
  • Lastly, creating many component and container JavaScript files and exporting all the necessary ones in the file. This is the approach I followed and can be seen in the example below.

No matter which approach is taken, what’s exported in this file is what the consuming app will ultimately import and render. That’s the important part to remember.

import { ProgressSteps, ProgressStep } from 'react-native-progress-steps';

Dependencies

We have to determine what dependencies need to be installed for our React Native component to work properly.

There are three different types of dependencies:

  • peerDependencies: These dependencies are required for the component to run; however, they are expected to already be installed on the app. An example of this is itself. However, in React Native’s case it is not necessary to add as a peer dependency.
  • dependencies: These are also required for the component to run, but you can’t assume the consuming app has these installed. Some examples would be and .
  • devDependencies: These are more straightforward. They are all the packages required to develop the React Native component. Examples of these would be your linter, test framework, and babel.

Installing Babel Dependency

Our next step is to hook our component up to Babel. We can simply do this by installing the following dev dependency:

npm install metro-react-native-babel-preset --save-dev

After the installation is complete, we need to create a file and add the following to it:

{"presets": ["module:metro-react-native-babel-preset"]}

Creating .gitignore and .npmignore

One of the final steps is to create the standard and files as a best practice. This will also avoid any issues when publishing to NPM.

Testing

Normally, it’s relatively straightforward to link and install our package locally to apps, without having to publish to NPM first.

This would be done by using the command inside of our packages root directory. Then, navigating to an app and typing then .

However, at the time of writing this article, React Native and the command don’t work nicely together.

There are two solutions I’ve found so far that solve this issue:

1. Installing the package in an application using local path

To do this, navigate to an app and directly install your package there using its directory path.

npm i <path_to_project># For example
npm i ../my-component

After making any changes to your package, you’ll have to revisit the app and re-install. This is not an ideal solution, but it is one that works.

2. Creating an Examples folder and using npm pack

The command is a great way to quickly package up your React Native component and have it ready for testing. It creates a file that can then be installed into an already existing application.

Let’s create a folder inside of our NPM package’s root directory. This folder will essentially be its own React Native application that runs and displays your examples.

This can be done by creating a React Native project using .

Note: This requires having React Native already installed on your computer. You can follow the Facebook guide here.

After that is finished, run the command to generate a file that will have a naming convention similar to .

Then, go into the folder and install your component by running or in the terminal. Remember to replace and respectively.

Create a JavaScript file or files that will display your component. For this example, we will call this . It’s important to point out that you should be importing the component that you just installed using yarn or npm in this file.

Once the file is created, open and import/export the example file. Whatever is exported in this file is what will be displayed when running the project on a simulator or device.

Finally, we can run the application using or . We should now be able to see our component and properly test it.

After making any changes to your NPM packages code, remember to run the command, then go into the folder to or the file.

A cool benefit of this option is the ability for other users to run your examples on a simulator or device. This allows them to try out your component without having to import it into their own application first. Also, the file can be easily shared among coworkers, friends, etc.

Publishing To NPM

Finally, we are ready to share our React Native component with the awesome open source community!

Publishing is very quick and easy. Just log into your NPM account from the terminal using then publish using .

One thing to remember is NPM requires us to increment the version in each time before publishing.

Conclusion

We have covered a ton of material in this post. If you run into any issues feel free to drop me a question in the comments below. Thanks for following along, I can’t wait to see what you build!

Contributions, pull requests, and recommendations are always welcome for react-native-progress-steps. Give it a try in your next project and let me know what you think!

If you enjoyed this article, be sure to hit the👏 button below and give me a follow to see all future content!

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Colby Miller

Written by

Software Developer. Always Learning. https://colbymillerdev.com

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade