How to build a react-native plugin in 2021
How to build a react-native plugin in 2021
A step-by-step guide to building TypeScript wrapping around native code written using Objective-C and Kotlin.
The goal of this tutorial is two-fold:
- show how to generate crypto-safe random numbers in react-native;
- show how to build and publish react-native plugin for both iOS and Android.
- Existing tools to build react-native plugins in 2021
- Creating a library
- Building a TypeScript plugin interface with basic test coverage
- Building an Objective-C part
- Building a Kotlin part
- Running an example application using a newly build plugin
- Finalizing your plugin
- Publishing your plugin to npm
Existing tools to build react-native plugins in 2021
Two years ago react-native team made a great decision to support CocoaPods by default starting with version 0.60. This move enabled a lot of developers to enjoy simplified maintenance of plugins and codebases that use such plugins.
This tutorial focuses specifically on using Objective-C for iOS and Kotlin for Android. While most of the steps in this tutorial can be easily done in Swift, the Objective-C version will make your life easier if you need to integrate older libraries written in C and C++.
Several tools will help you make your own custom plugin easier:
- Cocoapod to create Pod (not just React Native)
In this article, I will show you how to use
create-react-native-librarywhich has better community support, more templates out of the box with support for Swift, Objective C, Kotlin, Java, and TypeScript, and serves as a layer on top of
To build your library for iOS and ensure everything works correctly, you will need a Mac computer and Apple Developer account (a free personal one will work as well). Also, you will need:
- Android Studio
- NPM —
brew install node
- react-native —
npm i -g react-native
- Cocoapods —
sudo gem install cocoapods
Creating a library
- Make sure you have the most recent NPM version installed.
- Use this command to initialize your new library:
npx create-react-native-library react-native-randomness
Native moodule in Kotlin and Objective-C and click Enter.
Building TypeScript plugin interface with a basic test coverage
Random generation uses
NSData on iOS and
ByteArray on Android. Unfortunately, React Native communicates between JS thread and native code via the bridge, and it supports only JSON data.
For this reason, all data that is being generated by native code is being converted to Base64 format, delivered to JS thread via React Native Bridge, and converted back to UInt8Array to make it easier for the end-developer to work with the bytes directly.
However, this approach impacts the performance, as we always encode and then decode a byte array.
On the typescript level we use this code to do the decoding of Base64 code, here’s a source code.
The interface itself is much simpler:
If you see the above screen in your simulator, congrats! It works! 🎉🥳👏
Finalizing your plugin
If everything went well, your code went through a linter, types were generated and code is stored in a newly created
lib folder with all the parts.
Publishing your plugin to npm
Make sure that you’ve already signup with NPM and learned the basics of package publishing here. Also, check that you have the correct library name and version inside
package.json , as it will be used to generate your NPM package page.
This will get your package published on NPM’s Registry and it will be available for others to download and use.
Congratulations on publishing your first react-native plugin, and thanks for reading! Follow us to receive a notification when the next article is published.
About the author
Eugene Hauptmann, CEO of Reactive Lions™
Eugene is a faith-centric technologist, a serial entrepreneur, angel investor, advisor, and mentor.
He is the founder and CEO of REACTIVE LIONS INC. where he is implementing his vision of faith-driven entrepreneurship in the tech world. He is currently running a team of over 40 talented engineers across the US.
Eugene is the expert in building tech teams and he is a chief architect of scalable software products. His experience goes beyond B2B and B2C in multiple industries like Cyber Security, Deep Tech, FinTech, Media, AI, ML, Data platforms, Marketplaces, Wellness, Healthcare, Space, M&A, and more.
Contact us to learn how we can help your business build great tech.