Ionic Framework

Ionic Native is a TypeScript wrapper for Cordova/PhoneGap plugins that make adding any native functionality you need to your Ionic mobile app easy.

Disclaimer:
Ionic Native is largely a set of community maintained plugins, and while the community is quick to find and fix issues, certain plugins may not function properly. For teams that require dedicated Native plugin support, the Ionic team has options available. Please contact us for more information.

Promises and Observables

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

import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';

class MyComponentOrService {

  constructor(private platform: Platform, private geolocation: Geolocation) {

    platform.ready().then(() => {

      // get current position
      geolocation.getCurrentPosition().then(pos => {
        console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
      });

      const watch = geolocation.watchPosition().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

To add Ionic Native to your app, run following command to install the core package:

npm install @ionic-native/core@4 --save

Note that Ionic Native core package is included by default with every Ionic app.

Usage

Install the Needed Plugins

Install the Ionic Native package for each plugin you want to add.

For example, if you want to install the Camera plugin, you will need to run the following command:

npm install @ionic-native/camera@4 --save

Then install the plugin using Cordova or Ionic CLI.

For example:

ionic cordova plugin add cordova-plugin-camera

All package names are documented on the plugin’s documentation. It is recommended to follow the installation instructions on each plugin’s documentation, as some plugins require additional steps to fully install.

Add Plugins to Your App's Module

After installing a plugin’s package, add it to your app’s NgModule.

...

import { Camera } from '@ionic-native/camera';

...

@NgModule({
  ...

  providers: [
    ...
    Camera
    ...
  ]
  ...
})
export class AppModule { }

Ionic Native