How To Create an NPM Package For React Native?

Introduction

In the realm of React Native development, the ability to create and share custom npm packages can significantly streamline workflows and enhance code reusability. This article serves as a comprehensive guide to help you create your own npm package tailored for React Native projects.

Today, I'll delve into the intricacies of creating a custom npm package and uploading it to the npm store/registry, empowering you to streamline your development process and leverage the collective power of the developer community.

Requirements for creating npm package

Before you begin creating your npm package, make sure you have the following prerequisites installed and set up on your system:

1). GitHub Account: Having a GitHub account is essential as it provides version control for your codebase and facilitates collaboration with other developers. You can host your package's source code on GitHub, making it accessible to a wider audience and allowing for community contributions and feedback.

2). NPM Account: You'll need an NPM account to publish your package to the NPM registry, making it available for others to install and use in their projects. Creating an NPM account is free and straightforward, requiring only basic information such as your email address and a username.

3). Knowledge of React Native: A solid understanding of React Native is crucial for developing components or utilities that integrate seamlessly with React Native projects. This includes knowledge of React Native's component lifecycle, styling, navigation, state management, and platform-specific considerations.

What steps should be taken prior to developing a custom package?

Ensure that there are no existing similar packages already available or published before embarking on creating a custom package. Search platforms like Git or npm to identify any pre-existing packages of a similar nature.

Create a new project

npx react-native init CustomButton

Create a custom Button

Okay, let's create a custom button component

// File: src/components/CustomButton.js

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const CustomButton = ({ title, onPress }) => {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007bff',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default CustomButton;

Let's start with creating NPM package

First, create a new folder anywhere in the computer. Then, copy the "src" folder or any necessary files or folders that your component requires into this new folder.

Inside the folder do the following command

Your final package.json look like this

Note: Make sure to mention any other packages that your custom component relies on in the dependencies section of the package.json file.

{
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.3",
    "react-native-other-lib": "^2.2.0"
  }
}

If your custom component does not use any other packages, your package.json would look like this:

{
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.3"
  }
}

Publishing Your Package

Open the terminal go to your project directory(same directory the your paste the scr folder) and Run the below command for npm login. To publish your package to npm, log in to your npm account using:

npm login

Then, publish your package with:

npm version 1.0.5 // must be unique version name  

npm publish --access public   

Your package is now published and available for others to install and use in their React Native projects.