DEV Community

Cover image for How to Publish a React Native SDK
Jack Bridger
Jack Bridger

Posted on • Updated on

How to Publish a React Native SDK

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


Enter fullscreen mode Exit fullscreen mode

Image description

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


Enter fullscreen mode Exit fullscreen mode

Image description

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 simplifiedmessage component from an article I wrote previously

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



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>
  );
}



Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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



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,
  },
});


Enter fullscreen mode Exit fullscreen mode

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

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.



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>
  );
}


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

6) Publish to npm

1) Create an npm account here

2) Then login with npm in your terminal



npm login


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

4) Finally we can publish our package



npm publish


Enter fullscreen mode Exit fullscreen mode

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

Image description

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

Then you can run the same process as before:



$ npm pack
$ npm publish


Enter fullscreen mode Exit fullscreen mode

And your updates will come through!

If you like this article, I also host a podcast on developer tools.

Top comments (0)