How to develop and publish your react native package to NPM
Tags: react, reactnative, npm
Published: 2020-05-17 23:22:26

---
title: How to develop and publish your react native package to NPM
published: true
description: This post shows you how you can build your first react native npm package and publish to NPM
tags: react, reactnative, 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](https://www.npmjs.com/package/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.

![npm logo](https://dev-to-uploads.s3.amazonaws.com/i/uvlgypdjtnfsi0x5x1gd.jpeg)

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](https://docs.npmjs.com/creating-node-js-modules).

> 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](https://www.npmjs.com/get-npm) for help.

Before we get started, make sure to register for an account on NPM. You can do that [here](https://www.npmjs.com/signup).

###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*
```javascript
{
  "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.

```javascript
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.

```javascript
.gitignore

# Logs
*.log
npm-debug.log

# Runtime data
tmp
build
dist

# Dependency directory
node_modules
```
```javascript
.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](https://mobile.twitter.com/kpoosee) . 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](https://www.npmjs.com/package/react-native-social-fab). Give it a try in your next project and let me know what you think!