How to create Ionic 4 wrapper for native libraries

Step 1 — Create Cordova Plugin

plugman create --plugin_id <plugin_id> --plugin_version <plugin_version> --name <plugin_name>
plugman platform add --platform_name android
plugman platform add --platform_name ios
plugman createpackagejson ./
package package_name_change_me;// Cordova-required packages
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.PluginResult;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
public class plugin_name_change_me extends CordovaPlugin {@Override
public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) {
// Verify that the user sent a you action
if (!action.equals(method_name_sent_from_js_change_me)) {
callbackContext.error("\"" + action
+ "\" is not a recognizedaction.");
return false;
}
// Get properties sent from JS
String msg;
try {
JSONObject options = args.getJSONObject(0);
message = options.getString("msg");
} catch (JSONException e) {
callbackContext.error("Error encountered: "
+ e.getMessage());
return false;
}
//Add your functionality here

// Send a positive result to the callbackContext
callbackContext.success("Success");
return true;
}
}
@objc(plugin_name_change_me) class plugin_class_name_change_me :
CDVPlugin, CallbackListenerDelegate {
var callbackListener: CallbackListenerObjCImplementation!
@objc(method_name_change_me:)
func method_name_change_me(command: CDVInvokedUrlCommand) {
// Get properties sent from JS
let msg = command.arguments[0] as? String ?? "def_value"

//Add your functionality here
// Create a positive result.
pluginResult = CDVPluginResult(
status: CDVCommandStatus_OK,
messageAs: msg
)
// Send the result
self.commandDelegate!.send(pluginResult,
callbackId: command.callbackId
)
}
}
<?xml version='1.0' encoding='utf-8'?>
<plugin id="plugin_id_change_me" version="0.0.1"
xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<name>plugin_name_change_me</name>
<description>plugin_description_change_me</description>
<license>MIT</license>
<keywords>cordova,android,</keywords>
<repo>plugin_repo_change_me</repo>
<issue>issue_reporting_change_me</issue>
<engines>
<engine name="cordova" version="&gt;=3.0.0" />
</engines>
<js-module name=plugin_name_change_me src="www/toastyplugin.js">
<clobbers target="plugin_target_change_me" />
</js-module>
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
<feature name="feature_chnagem_me">
<param name="android-package" value="
java_class_pachage_change_me" />
</feature>
</config-file><framework custom="true" src="src/android/test.gradle" type="
gradleReference" />
<lib-file src="src/android/replace_me.aar" /><resource-file src="src/android/assets/svm_models.zip" target="
assets/svm_models.zip" />
<resource-file src="src/android/assets/tessdata.zip" target="
assets/tessdata.zip" />
<source-file src="java1_file_with_path_change_me" target-dir="
target_dir_path_change_me" />
<source-file src="java2_file_with_path_change_me" target-dir="
target_dir_path_change_me" />
</platform><platform name="ios">
<config-file parent="/*" target="config.xml">
<feature name="feature_chnagem_me">
<param name="ios-package" value="feature_change_me" />
</feature>
</config-file>
<config-file target="*-Info.plist" parent="
NSCameraUsageDescription">
<string>Used to scan QR code, MRZ and documents</string>
</config-file>
<source-file src="swift_file_path" /><header-file src="src/ios/lib/callbackListenerObjC.h"/><header-file src="src/ios/lib
/callbackListenerObjCImplementation.h"/>
..........
<header-file src="src/ios/lib/public_types.h"/>
<source-file src="src/ios/lib
/callbackListenerObjCImplementation.mm"/>
<source-file src="src/ios/lib/libjpeg.a" framework="true"/><source-file src="src/ios/lib/replace_me.a"
framework="true" />
<source-file src="src/ios/lib/libtiff.a" framework="true"/><framework src="QuartzCore.framework" />
<framework src="AVFoundation.framework" embed="false" />
<framework src="AudioToolbox.framework" embed="false" />
<framework src="CoreMedia.framework" embed="false" />
<framework src="libiconv.tbd"/>
<framework src="libc++.tbd"/>
<framework src="src/ios/lib/tesseract.framework" custom="true"/><framework src="src/ios/lib/leptonica/1.76.0/leptonica.
framework" embed="false" custom="true"/>
<framework src="src/ios/lib/opencv2.framework" embed="false"
custom="true"/>
<resource-file src="src/ios/lib/svm_models.zip"/>
<resource-file src="src/ios/lib/tessdata.zip"/>
</platform>
</plugin>
var exec = require('cordova/exec');exports.<our_method_name> = function (arg0, success, error) {
exec(success, error, 'class_name_change_me',
'method_name_change_me', [arg0]);
};

Step 2 — Create Ionic 4 Wrapper

git clone https://github.com/ionic-team/ionic-native
sudo npm install --global gulp-cli
npm install
gulp plugin:create -n plugin_name_change_me
import { Injectable } from '@angular/core';
import { Plugin, Cordova, IonicNativePlugin } from '@ionic-native/core';
@Plugin({
pluginName: 'cordova_plugin_name_change_me',

plugin: 'cordova_plugin_pachage_change_me', // npm package name, example: cordova-plugin-camera

pluginRef: 'cordova_clobbers_target_change_me', // the variable reference to call the plugin, example: navigator.geolocation

repo: '', // the github repository URL for the plugin
platforms: ['Android', 'iOS'] // Array of platforms supported,
example: ['Android', 'iOS']
})
@Injectable()
export class native_plugin_name_change_me extends IonicNativePlugin {
@Cordova()
cordova_plugin_method_name_change_me(arg1: string,
arg2: number): Promise<any> {
return; // We add return; here to avoid any compiler errors
}
}
npm run build

Step 3 — Integrate the wrapper

cordova plugin add our_plugin_path
import { plugin_name_change_me } from '@ionic-native/plugin_name_change_me/ngx';@NgModule({
imports: [... ],
providers:[plugin_name_change_me]
})
import { plugin_name_change_me } from '@ionic-native
/plugin_name_change_me/ngx';
....
constructor(private plugin_obj:plugin_name_change_me){}
public pluginMethodCall(){

this.plugin_obj.cordova_plugin_method_name_change_me("")
.then(r=>{
console.log('success');
}).catch((e)=>{
console.error(e);
})
}

Links

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store