Step-by-Step Guide 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. Scafflod your library

Start by setting up your library using CallStack’s create-react-native-library command:

npx create-react-native-library math-lib

This creates a boiler plate package called math-lib with an example React Native app for you to test with.

2. Create your components

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

Here’s how it looks by default

I added more Math functions, you can utilize this as an entry point to your library and add what you want to provide in your library. Looks like this after my update:

3. Test your components in the example

Navigate to the example folder:

cd example

Install the necessary dependencies

yarn

then, run the example app:

yarn example android

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

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

4. Update your README.md to match your code

• Update your README.md file to reflect the changes in your code.
• Provide clear instructions on how to install and use your library, and include example code to demonstrate its functionality.

5. Push your repo up to GitHub

1. Create a new, blank repository on GitHub with the same name as your library (e.g., math-lib).
2. Get the web URL and then run these commands from your terminal (be sure to use your own URL).
3. Add the remote URL:

git remote add origin https://github.com/JyotiBhambhu/math-lib.git

4. Stage, commit, and push your changes:

$ git add .
$ git commit -m "chore: setting up npm"
$ git push origin HEAD

6. Publish to npm

1. Create an npm account here
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

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

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

Then you can run the same process as before:

npm pack
npm publish

And your updates will come through!