How to Publish a React Native SDK
Tags: reactnative, ios, npm, android
Published: 2023-01-18 14:59:07

Ever wanted to build your own React Native UI components and share them with the world? Here's how you can do it.

# 1) Scaffold your library

CallStack have built an amazing set of packages to help build React Native Libraries.

```
npx create-react-native-library super-simple-chat
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5anqgen30bb3u42nt5j.png)


This creates a boiler plate package called super-simple-chat with an example React Native app for you to test with.

Next, we automatically configure our project using **react-native-builder-bob**

```
$ cd super-simple-chat && yarn
$ npx react-native-builder-bob@latest init
$ yarn
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20dmnnzo175r0irofics.png)

# 2) Create your components

Open **src/index.tsx** to write and export your component. You will find a pre-existing **multiply** example.

### Make a UI component

I copied a simplified[message component from an article I wrote previously](https://dev.to/jacksbridger/whatsapp-ui-in-react-native-part-1-4nbm)

Here's what my **src/index.tsx** looks like for me. It's probably more fun to write your own, though!

```ts
import React from 'react';
import { View, Text } from 'react-native';

export function MessageBubble(props: { text: string; isSender: boolean }) {
  const { text, isSender } = props;
  return (
    <View
      style={{
        width: '65%',
        marginVertical: 3,
        marginHorizontal: 16,
        paddingVertical: 10,
        paddingHorizontal: 10,
        flexDirection: 'row',
        borderRadius: 5,
        alignSelf: isSender ? 'flex-start' : 'flex-end',
        backgroundColor: isSender ? '#fad1d0' : '#dfffc7',
      }}
    >
      <Text
        style={{
          fontSize: 16,
          width: '65%',
          left: isSender ? 0 : 10,
        }}
      >
        {text}
      </Text>
    </View>
  );
}

```

# 3)Test your components in the example

So now let's test the components from our library in the example React Native app that comes with the boilerplate.

```
yarn example ios
```

Then, open up **example/src/App.tsx** and import your component, or copy mine:

```ts
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { MessageBubble } from 'react-native-super-simple-chat';

export default function App() {
  // generate an array of 10 messages in a human conversation. Each message is an object with a text property and a userID property.
  const messages = [
    { text: 'Hi', userID: 1 },
    { text: 'Hi', userID: 2 },
    { text: 'How are you?', userID: 1 },
    { text: 'I am good, how are you?', userID: 2 },
    { text: 'Not bad', userID: 1 },
  ];

  return (
    <View style={styles.container}>
      {messages.map((msg) => (
        <MessageBubble text={msg.text} isSender={msg.userID === 1} />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});
```
_P.s. I used GitHub copilot for generating my conversation._

Check if it is working in your simulator, mine looks like this:

![Preview of the app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfi3wuykrr5cqn3f0xad.png)

# 4) Update your README.md to match your code

It's important that our npm package has up to date instructions for our users.

I pasted in my example from App.tsx as an explainer. 

```ts
import { MessageBubble } from 'react-native-super-simple-chat';

export default function App() {
  const messages = [
    { text: 'Hi', userID: 1 },
    { text: 'Hi', userID: 2 },
    { text: 'How are you?', userID: 1 },
    { text: 'I am good, how are you?', userID: 2 },
    { text: 'Not bad', userID: 1 },
  ];

  return (
    <View style={styles.container}>
      {messages.map((msg) => (
        <MessageBubble text={msg.text} isSender={msg.userID === 1} />
      ))}
    </View>
  );
}
```

# 5) Push your repo up to GitHub

1. Create a blank repo with the same name you have specified in your package.json when creating the library
2. Get the web URL and then run these commands from your terminal (be sure to use your own URL).

```
$ git remote add origin https://github.com/jackbridger/react-native-super-simple-chat.git
$ git add .
$ git commit -m "chore: setting up npm"
$ git push origin HEAD
```

# 6) Publish to npm


1) Create [an npm account here](https://www.npmjs.com/signup) 


2) Then login with npm in your terminal

```
npm login
```

You'll need to provide your login details as well as a one time code that they email you. 

3) Now, we need to pack our library into a compressed file format (a tarball) by running:

```
npm pack
```

4) Finally we can publish our package

```
npm publish
```

And there we have it, our own npm package is live.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7ycfu1hm3o4jrm48mxo.png)

## Bonus: improve your library

To publish a new version to npm, increment the package version in your **package.json** e.g. I patched it from 0.1.0 to 0.1.1

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl1z302m1zelxmeobydl.png)

Then you can run the same process as before:

```
$ npm pack
$ npm publish
```

And your updates will come through!

If you like this article, I also host a podcast on [developer tools](https://scalingdevtools.com/).