Making libraries for React Native

Part 3: Publish and beyond

This is the final part of my articles series.

• Part I: Android
• Part II: iOS
• Part III: Publish and beyond

It has past some time since my last post. So many libraries were done, and some others are ready to be shared with the world.

So, all our efforts should become a real thing. This is the last step, and it is a big one!

Let’s recap.

We already have the Chromecast SDK exposed natively. But we haven’t tried yet, cause we didn’t add a way to communicate these Objective-C and Java code to React Native.

Time for some sugar.

Communication between React Native and Javascript

In the first two chapters, we have created the bridges between React Native and the native code.

Also, we exposed some functions. Internally, we described a way to receive and send data between the SDK and our project.

Missing part is to tell React Native about this bridge.

Spoiler alert: is way easier than you may think!

React Native has a module called NativeModules. This already knows that we exposed some native code. And even knows how it is called!

Remember this?

@Override
    public String getName() {
        return "GoogleCast";
    }

NativeModules will look for this method to know how our implementation should be called.

First, let’s import this module from React Native.

import { NativeModules } from ‘react-native’;

Now, by using NativeModules.GoogleCast, we can access our wrapper and all the methods we exposed before. NativeModules.{WrapperName} will do the trick!

Ready to start trying a method?

NativeModules.GoogleCast.startScan() will start the scanning process of the Chromecast SDK. You will see a message in the console saying:

RCTLogInfo(@”start scanning chromecast!”);

Really neat!

Taking care of our users

Importing NativeModules and accessing methods thru NativeModules.GoogleCast.{method} over and over across our project is not a good practice. DRY mojo will reject us if we publish a library with this approach.

Could we do better?

Of course we can!

Our plan since the beginning was to make things easier for other developers, including us.

This includes some helpers for text editors to autocomplete our wrapper.

Let’s start playing with the index.js that the generator already has created for us.

Here, we will do this dirty job, so people that use our project will need to import just our interface to work in the right away.

import { NativeModules } from 'react-native';

const { GoogleCast } = NativeModules;

Did you see it? We’re destructering our wrapper from NativeModules, so we can use it later in the interface.

And, here we go.

import { NativeModules } from 'react-native';

const { GoogleCast } = NativeModules;

export default {
      startScan: function () {
        GoogleCast.startScan();
      },
  };

This interface will expose the methods from our wrapper, and it works as documentation too.

How can be used in the wild?

import GoogleCast from ‘./GoogleCast’
GoogleCast.{method}

That’s all you need. No more importing NativeModules from our users. They don’t even need to know that we’re using dark magic behind the scenes!

And a good thing about this, is that this helps text editors to provide a better autocompletion.

We’re doing great so far.

Last step, is to make the world a better place to live (or at least, help other people save some time).

Publish the library

When I was ready to publish my first library, I was really scared. I thought process would be a mess, and people would complain of missing functionality.

Thing is, reality is not as cruel as we could expect.

Creating an account in NPM

First thing to do is to create an account in npm. People will get our library thru this repository.

Now, enter enter into the directory where the project is. Login to npm with npm login.

Publishing the library

npm publish

And that’s it! You library will be published in npm, ready to be installed.

Updating the package

Time goes on, and you’ll have new ideas to implement to your library.

Updating it is a pretty straightforward process.

1. npm version {update_type}. We have 3 options to update the version: patch, minor, or major. It’s up to you to decide the kind of the update. Keep in mind that this will only change the version in the package.json file.
2. npm publish. This will update the project in npm registry.

To infinity, and beyond

And that’s it.

You have created a new library that other developers can use, and even modify.

But fun it’s not over yet!

React Native evolves continuously, so is your library. New features and ideas come, and you’ll find that other people have other needs, and will ask for your help to support those things.

Some will open a pull request to contribute to your efforts. How exciting is this?

I’ll let you enjoy your glorious moment. Well done!

Want to talk more about this? Or just say ‘Hi’?

Shoot me a tweet! @carlyeah.