How to develop and publish your react native package to NPM

In this post i will show you how you can build your first react native npm package, you will be learning from my experience of building my own package. The package I created is react-native-social-fab, it is an animated floating action button you could add to your social media applications to take actions on your favorite social media accounts.

This tutorial assumes you have some basic understanding of the command line, Git and Github.

Problem

If you have been around the react native environment for some time, you should know that often times, we use one or few of the components we have created, and rather than going over the same process of building the same components over again, it would be nice to have a custom component we can import or reuse to serve the same purpose. Hence, i decided to create one from scratch and published it on npm so that others who required this type of component wouldn’t need to implement it from scratch.

Procedure

This is an overview of the procedure i followed to create my package, if you want a more detailed procedure then you can visit the official npm docs.

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

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.

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 my-component && cd my-component

Once inside the folder, we need to initialize a new NPM package by typing npm init, then it would ask you the details of your project like the name, version etc to create the package.json (this will hold some important metadata about the React Native component). Don’t worry if you don’t know what to fill in a particular field, just keep pressing enter and you can change it later on.

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:

dependencies: These dependencies are required for the component to run, but you can’t assume the consuming app has these installed. Some examples would be lodash and prop-types.

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 react-native itself. However, in React Native’s case it is not necessary to add react-native as a peer dependency.

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.

my package.json

{
  "name": "react-native-social-fab",
  "version": "1.0.2",
  "description": "A fully customizable social media floating action button for react native",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react-native",
    "floating-action-button",
    "social",
    "expo",
    "mobile",
    "ios",
    "android",
    "web"
  ],
  "bugs": {
    "url": "https://github.com/kpose/react-native-social-fab/issues"
  },
  "homepage": "https://github.com/kpose/react-native-social-fab/blob/master/README.md",
  "peerDependencies": {
    "react": "^16.0.0-beta.5",
    "react-native": "^0.49.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0",
    "metro-react-native-babel-preset": "^0.59.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/kpose/react-native-social-fab"
  },
  "author": "Jude Ganihu <ganihujude@gmail.com>",
  "license": "MIT"
}

Project Structure

After the package.json is created, now create a component file in it and name it as index.js. In package.json replace the value of main with index.js. Our index.js will be the most important file for properly exporting/importing your component.

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

• Directly writing the component class inside of the App.js file and exporting it there. This is the approach I followed as you will see below.

• Creating a separate component JavaScript file and exporting it in App.js.

• Lastly, creating one or more other components (example is "FloatingButton.js" in the described library) and container JavaScript files and exporting all the necessary ones in the App.js file.

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

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'

export default class FloatingButton extends Component {

  render() {
    return (
      //
    )
  }
}

Creating README.md

It would be awesome to describe the package for other users. Provide some README and example how to use the package. Make it as simple to use as possible. Though, it is required we add the link to our README file from our repository to the homepage value in our package.json, but, a problem i noticed while publishing was NPM not properly reading our README file. To solve this, add a README.md file to the root directory of our project.

Creating .gitignore and .npmignore
One of the final steps is to create the standard .gitignore and .npmignore files as a best practice.

.gitignore

# Logs
*.log
npm-debug.log

# Runtime data
tmp
build
dist

# Dependency directory
node_modules

.npmignore

# Logs
*.log
npm-debug.log

# Dependency directory
node_modules

# Runtime data
tmp

Publishing To NPM

Satisfied and ready to publish and share with the awesome open source community?

First, we need to login into our already created npm account by running npm login. After that run npm publish. And that’s it now the component is public and available for others. One thing to remember is NPM requires us to increment the version in package.json each time before publishing.

Once published you can test the package in any react native project by running
npm install your-package-name. Once installed successfully you can test it by importing it in the following way:
import YourComponent from 'your-package-name'
and test it. If it works, then congratulations, you have successfully created your first npm package.

Conclusion

I guess by now you might have a clear idea on how you can create your own npm package, If you run into any issues feel free to drop me a question in the comments below. You could also reach out to me on Twitter . Thanks for following along, I can’t wait to see what you build!

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