Publishing my own React Native Radio Buttons Package

Introduction

I was working on a project where I needed a simple radio button functionality but couldn't find something simple to use for React Native, so I decided to build one on my own!
So everyone who is reading this, I am going to create React Native Radio Button component package and publish it on npmjs.

You can get it going in 5 simple steps -

1. Set-up the custom package
2. Write the code for custom package
3. Install the package in a new or existing project
4. Test locally
5. Deploy on npmjs

Setting up your package

The first step to take is to set up a project for the package we are going to create. Go to your desired directory, open up your terminal or cmd/PowerShell and run:

npm init MyPackageName

This creates a blank package for you. Specify the details you are asked about and finally create an index.js file. (At the time of writing this package, I was not experienced in Typescript but I would 200% recommend to write the package in Typescript). Now, since this is going to be a React Native package, we need to add it as peer dependencies. Open up your package.json and add at the bottom:

"peerDependencies": {
    "react": "^17.0.1",
    "react-native": "^0.64.3"
}

Here the version should be latest or whatever version of React and React Native you are working on.

Your package is setup. Now we need to write the code for the radio button.

Code for the Package

It is a very simple package but achieves my use case so here goes the code. We are going to write our code directly in the index.js but you can follow whatever project structure you want just the entry file is going to be the index.js file.

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

export default function RadioButtons({
  text,
  setOption,
  selected,
  radioButtonBorderColor = "#000",
  radioButtonSize = 20,
  selectedRadioButtonColor = "#000",
  optionTextStyling,
}) {
  let selectedRadioButtonSize = parseInt(radioButtonSize)/2;
  return (
    <TouchableOpacity
      onPress={() => {
        setOption(text);
      }}
    >
      <View style={styles.option}>
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <Text style={optionTextStyling}>{text}</Text>
          <View
            style={[
              styles.radio,
              {
                borderColor: radioButtonBorderColor,
                height: radioButtonSize,
                width: radioButtonSize,
              },
            ]}
          >
            <View
              style={
                selected === text
                  ? [
                      styles.selected,
                      {
                        backgroundColor: selectedRadioButtonColor,
                        height: selectedRadioButtonSize,
                        width: selectedRadioButtonSize,
                      },
                    ]
                  : null
              }
            ></View>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  option: {
    paddingTop: 20,
    paddingBottom: 10,
  },
  radio: {
    borderRadius: 100,
    borderWidth: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  selected: {
    borderRadius: 100,
    backgroundColor: "#000",
  },
});

After we are done with the code, we are going to edit our package.json a bit. We will be adding a version, a description, keywords for SEO, author and license. It should look like the following -

{
  "name": "react-native-custom-radio-buttons",
  "version": "1.0.0",
  "description": "Add radio buttons to your react-native application",
  "main": "index.js",
  "scripts": {
    "test": "npm test"
  },
  "keywords": [
    "react-native",
    "radio-button"
  ],
  "author": "Neelesh Ranjan Jha",
  "license": "ISC",
  "peerDependencies": {
    "react": "^17.0.1",
    "react-native": "^0.64.3"
  },
}

Our package is ready to be installed locally in our projects.

Installing the package

To test our package, we need to install it, and this shall be done by running a simple command.

npm install --save ../path/to/custom-module

We can also add the package in the package.json under dependencies of the project and run npm i to install it. It would look like something like -

"dependencies": {
    "customPackage": "file:../path/to/custom-module"
  }

Your package will be installed now. Now we need to test it which is very simple.

Testing

To test, import the package like your normally do with other packages. For our case, it would go like -

import RadioButtons from "react-native-custom-radio-buttons"

Now you can just test it. What will be left is the uploading the package on npmjs and telling everyone to use it.

Deploying on npmjs

To deploy the package on npmjs, first create an account if you don't have one already and also create a GitHub repository for the package. Link it in the package.json by adding the following line-

  "repository": {
    "type": "git",
    "url": "https://github.com/Neeleshrj/react-native-custom-radio-buttons"
  }

Push the code to GitHub (After writing an amazing Readme of course) and then run a simple command in the local code to publish it to npm.

npm publish --access public

Horrah, you just published your first package. Now go on and share it with people, and give back to the community.

Remember, whenever you update the package, increase the version and publish to keep a history of older code and in case someone requires a specific version of it.

Important links

npmjs official doc on publishing packages

Link to the package repository

Link to package on npmjs

Do visit and use my package and consider giving this post and the repository a star.

Thank you <3