Cordova | Native Plugin Development

The first question you may ask after reading the title why on earth anyone is still developing app using Cordova when we have robust frameworks like React Native and Flutter. Well you might be right but there are few scenarios in which still developer has to work in this framework. Like i recently had to integrate a native module into old Cordova app and it took me 2-3 days just to figure out the process as the Docs available are not really helpful.

So i decided to write a small tutorial to help those who might be struggling to figure out the process.

Note: I will build a simple plugin for iOS only but for Android its the same process just replace the "android" where i am mentioning "ios"

Let's get started......

First we will create a new plugin by running below command in the Terminal in you desired directory.

plugman create --name helloWorldPlugin --plugin_id info.ios.helloWorldPlugin --plugin_version 1.0.0

Plugin name : helloWorldPlugin

Plugin id: info.ios.helloWorldPlugin

Plugin Version: 1.0.0

The above configuration can be updated according to your requirements

Now move to the plugin folder we just create

cd helloWorldPlugin

The next step is to add the platform you want to support by running below command

plugman platform add --platform_name ios

Now create a package json file which will be needed when we are integrating the plugin

plugman createpackagejson ./

It will prompt to enter some optional details if you like at the end it should like the below screen.

If you want to have repo for your plugin you can add its link under git repository prompt.

Now we have created our plugin now its time to add it in our app.

Now we will create a new Cordova app and integrate the newly created helloWorldPlugin plugin. Run the below commands in your desired directory to create the app.

cordova create hello com.example.hello HelloWorldApp

Folder name: hello

Bundle id: hello com.example.hello

App name: HelloWorldApp

Now move to hello world folder

cd hello

Now add iOS Platform

cordova platform add ios

In our last step we will integrate plugin by running following command.

cordova plugin add <path/to/plugin> 

You will replace <path/to/plugin> with your plugin directory path or your Github repo link

And thats it... You have successfully integrated your plugin.

If you want to further know how native code can be invoked from javascript and vice versa you can check my Github repo below.