Publishing my own React Native Radio Buttons Package
Tags: javascript, npm, reactnative
Published: 2023-07-30 10:37:52

### 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](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages)

[Link to the package repository](https://github.com/Neeleshrj/react-native-custom-radio-buttons)

[Link to package on npmjs](https://www.npmjs.com/package/react-native-custom-radio-buttons)

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

Thank you <3