Overview

Ionic Native is a curated set of wrappers for Cordova plugins that make adding any native functionality you need to your Ionic, Cordova, or Web View mobile app easy.

Promises and Observables

Ionic Native wraps plugin callbacks in a Promise or Observable, providing a common interface for all plugins and ensuring that native events trigger change detection in Angular 2.

import {Geolocation} from 'ionic-native';

Geolocation.getCurrentPosition().then(pos => { 
  console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});

let watch = Geolocation.watchPosition();
watch.subscribe(pos => {
  console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});

// to stop watching
watch.unsubscribe();

Runtime Diagnostics

Spent way too long diagnosing an issue only to realize a plugin wasn’t firing or installed? Ionic Native lets you know what the issue is and how you can resolve it.

Installation

Run following commmand to install ionic-native in your project. shell npm install ionic-native --save

Usage

Import Ionic Native

If you are using Angular 2.0, you do not need to include any JavaScript files in your index.html. Simply importing the plugin you need from the ionic-native npm package will result in the required code to be imported in your compiled code. However, if you are using Angular 1.x or plain JavaScript then you will need to import ionic.native.js file into your index.html before your application’s main code.

Install The Needed Plugins

Ionic Native will not install plugins for you automatically. You still need to install the plugins you need using the Cordova CLI or Ionic CLI. Ionic Native will notify you if you are missing a plugin, and will also provide you with the plugin name to install.

Use Ionic Native Wrappers

We can call the functions of that plugin directly without the requirement of performing any checks, such as ensuring that the deviceready event has fired. ```js // Example with plain JS window.IonicNative.Camera.getPicture().then( function(res) { console.log(“We have taken a picture!”); // Run code to save the picture or use it elsewhere } );

// Example with AngularJS angular.module(‘MyApp’, [‘ngCordova’]) .controller(‘MyController’, function(){ ngCordova.Camera.getPicture().then( function(res) { console.log(“We have taken a picture!”); // Run code to save the picture or use it elsewhere } ); });

// Example with TypeScript and Angular 2.0 import {Camera} from ‘ionic-native’; Camera.getPicture().then( res => { console.log(“We have taken a picture!”); } ); ```