Ionic Native

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

Ionic Native wraps plugin callbacks in a Promise or Observable, providing a common interface for all plugins and making it easy to use plugins with Angular change detection.

Installation

Run following command to install Ionic Native in your project.

npm install @ionic-native/core --save

You also need to install the Ionic Native package for each plugin you want to add. Please see the Ionic Native documentation for complete instructions on how to add and use the plugins.

Documentation

For the full Ionic Native documentation, please visit http://ionicframework.com/docs/v2/native/.

Basic Usage

To use a plugin, import and add the plugin provider to your @NgModule, and then inject it where you wish to use it.

// app.module.ts
import { Camera } from '@ionic-native/camera';

...

@NgModule({
  ...

  providers: [
    ...
    Camera
    ...
  ]
  ...
})

export class AppModule { }

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

import { NgZone } from '@angular/core';

@Component({ ... })
export class MyComponent {

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

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

      // get position
      geolocation.getCurrentPosition().then(pos => {

        console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`)

      });


      // watch position
      const watch = geolocation.watchPosition().subscribe(pos => {

        console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`)

        // Currently, observables from Ionic Native plugins
        // need to run inside of zone to trigger change detection
        ngZone.run(() => {
          this.position = pos;
        })

      });

      // 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.

Plugin Missing?

Let us know or submit a PR! Take a look at the Developer Guide for more on how to contribute. ❤️

Ionic 1/Angular 1 support

Ionic Native 3.x supports Ionic 2.x and above. For Ionic/Angular 1 support, please use version 2 of Ionic Native. See the 2.x README for usage information.

Credits

Ibby Hadeed - @ihadeed

Tim Lancina - @timlancina

Mike Hartington - @mhartington

Max Lynch - @maxlynch

Rob Wormald - @robwormald