How to create a Cordova plugin with Ionic Framework Native support

Creating the Cordova Plugin

Hey, Folks!

Today I’ll write a small article about Cordova plugins development and how to write a wrapper for Ionic Native for them.

  • The first step is the cordova plugin development. You can achieve that following their good structured documentation.

Writing a Ionic Native wrapper for  the existing/created Cordova plugin

  • After you have built the cordova plugin for Android using Java and/or iOS using Objective C or Swift, you will have to clone the Ionic Native github repository (here you have their developer guide).My advice, as the development guide also say it’s to use
    gulp plugin

    command to create your plugin template as following:

    gulp plugin:create -n PluginName

    (run the command in the ionic-native cloned repo directory using CamelCase for plugin name.)If you don’t have plugman installed, just run

    npm install -g plugman
  • Then, after running the plugman command, you will have
    src/@ionic-native/plugins/plugin-name/

    directory with a single

    index.ts

    file in there.
    Here, you will have to define

    plugin

    (plugin name),

    pluginRef

    (like the namespace of the plugin)

    Here, with the pluginRef I had some issues, because my cordova plugin appeared like not installed because I didn’t match the clobbers from plugin.xml to pluginRef (must be the same).

    You must pay attention to plugin class mapping because you will have issues if you define a package name in your Android Java class and in your plugin.xml don’t follow this convention.
    This is applicable for iOS too.

  • Last but not least, after you done the work, you may want to publish your plugin to the Ionic Framework native repo – this will help community to build apps based on your work, make you proud that you giving back some of your time and work to the Ionic people and you will have a nice reference in your future career.
    This being said, for your plugin must be approved you must follow the commit message format and create a pull request.

I covered broadly the subject of how to develop a cordova plugin and how to link it to a Ionic Native component written in TypeScript.

In the end, I will leave here (again) the references that you need (and are enough) to build a Cordova plugin and the wrapper for Ionic Native:

Cordova Plugin Development Guide
Ionic Native Developer Guide

If you think I’ve missed something important, your comments are warmly welcomed. 😀

Silviu Stroe
I'm Silviu and I run Brainic, a mobile-focused software agency. I'm also a member of Nokia and Yahoo wall of fame. My interests are in low-code/no-code development and bleeding-edge technologies.

Leave a Reply

Your email address will not be published. Required fields are marked *