Today we’re excited to release the 3.x version of Ionic Native, a project that makes it easy to use over 130 native mobile SDK features in your app through simple JavaScript interfaces, in a way that works across all major platforms (and now the web!). (Impatient? Check out the README for instructions on using it, or start a new v2 project)

With this release, we’ve made two major improvements: drastically reduced code bundle size, and 100% browser development support.

Bundle size improvements

With Ionic Native 3.x, you install only the plugins you need, saving significant space in your final code bundle. In one test, we saw a 15% code size improvement. If you use a lot of plugins, you’ll likely see a smaller but still significant improvement.

Plugin Mocking and Browser Development

The 3.x release is significant for adding full support for plugin mocking. That means any of of the 130+ Ionic Native plugins can be tested and used in the browser. This makes it possible to build the entirety of your app in the browser or ionic serve without dealing with device or emulator testing, a level of development speed and agility that is unheard of in mobile.

To take full advantage of this new super power, you’ll need to do some up front work by providing mocks for the plugins you use, and have them return data that makes sense for your app.

Take a look at the Browser Usage documentation for a full example of how to mock a plugin.

Ionic/Angular 1 Support

3.x is the first version that does not support Ionic/Angular 1.x. For those using Ionic/Angular 1, you’ll need to continue using version 2.x of Ionic Native. Take a look at the README for more info.

What’s next?

Reducing filesize and making it possible to develop your app entirely in the browser even if it relies on native plugins is just step one. We are thinking about ways we can make it easy to work with plugins that have browser APIs available, possibly with pre-baked UI on top of the rapidly expanding Web API’s out there.

We’re looking forward to hearing your feedback on the new release, and ways we can help you do more in the browser. To get started, read the README for installation instructions, or create a new v2 app.

Signup for the Ionic Newsletter to get the latest news and updates!

  • http://sampathloku.blogspot.com/ Sampath Lokuge

    “adding full support for plugin mocking” Oh.. Simply Awesome ! Thank you Max and Ionic Team.Keep up the Great work πŸ™‚ Hope Ionic2 will be the World’s Top Mobile app framework. Congratulations ! Now we’re waiting for what? That is for “Ionic2 Creator”.Hope you’ll fulfill that requirement too.Good Luck ! πŸ™‚

  • Young Park

    Angular 4 improved a lot with the speed. Hope to see that in Ionic 2 in the future.

    • http://sampathloku.blogspot.com/ Sampath Lokuge

      Hi,Any reference about that news?I mean about ng-4 performance improvement?

      • Young Park

        Referencing from the AngularJS meetup at mountain view held this month. Seems their recoding isn’t ready yet. but once I find that I will post here.

        • http://sampathloku.blogspot.com/ Sampath Lokuge

          OK sure.Thanks a lot.Awaiting for that video….

          • Young Park

            Unsure whether they will post the video, but this was the meetup
            https://www.meetup.com/modernweb/events/235966002/

          • http://sampathloku.blogspot.com/ Sampath Lokuge

            Yes,according to the “Tracy: yes this will be recorded!”,But not yet available 14+ days now.Sad πŸ™

    • http://ionicframework.com/ Adam Bradley

      Yes, our Ionic 3 branch is already working with Angular 4 RC, and includes lazy loading modules.

      • http://sampathloku.blogspot.com/ Sampath Lokuge

        Why it’s Ionic 3? I think it should be Ionic 4 no? Otherwise we’ll feel 1 version behind the Angular no? Which is not a good first impression.What is your thoughts?

        • yesimahuman

          We’re not Angular and won’t follow their releases exactly, regardless of which version of Angular we use underneath.

      • Owa

        Any possible/estimated release date?
        Should i start a new app in ionic 2.3 or just wait for Ionic 3.x?

  • https://nixo.us/ Nix

    When is @ionic/cloud-angular going to be updated to use ionic-native 3.x?

    Question #2 in order to get our app to work after we upgraded to 3.x is to still install ionic-native 2x so the cloud plugin would still function. Do you foresee any issues with this setup?

    • Tashuan

      Any progress on this? I’m at this point now I’m getting Cannot find module β€œionic-native” after installing @ionic/cloud-angular

      • Moutaz Mourad

        Same here. A new project will run and I was able to upload, but a project created a week ago started showing Cannot find module “ionic-native” right after installing @ionic/cloud-angular. Any fix or suggestion?

  • technotip

    Happy to see this coming ..but sad AdMob plugin wasn’t installed this way. It starts throwing errors – [ ‘@ionic-native/admob’ is not in the npm registry. ] Kindly let me know the fix for it. Other plugins got installed smoothly. Am yet to test its working.

    • yesimahuman

      Sorry, the package name changed (fixing docs rightnow): `npm install –save @ionic-native/ad-mob`

      • technotip
      • technotip

        I need one clarification:
        Why do we still have plugins listed in package.json
        “cordovaPlugins”: [
        “cordova-plugin-console”,
        “cordova-plugin-device”,
        “cordova-plugin-whitelist”,
        “cordova-plugin-statusbar”,
        “cordova-plugin-splashscreen”,
        “ionic-plugin-keyboard”
        ],

        For example: Status Bar plugin
        While creating new cordova project is uses, by default
        $ ionic plugin add cordova-plugin-statusbar

        We could instead use:
        $ npm install –save @ionic-native/status-bar

        Does that make any difference or are they same?

        • technotip

          I see that we need to do both?

          $ ionic plugin add cordova-plugin-statusbar
          $ npm install –save @ionic-native/status-bar

    • technotip

      Fixed it ..will see if my fix works!

  • technotip

    Cannot find module “@ionic-native/google-analytics” πŸ™

    • Davo

      and some others…I opened an issue with the one I found:

      https://github.com/driftyco/ionic-native/issues/1229

      • Davo

        These modules were renamed, see above ticket for solutions

    • Flint

      same here Cannot find module “@ionic-native/ad-mob”
      i try
      declare var AdMob: any;

      without import { AdMob} from ‘@ionic-native/ad-mob’;

      then call
      AdMob.createBanner({ bla bla });

      it work and I’m still confused

      • Srinath Srinaga

        Hi…AdMob variable which u declare is present in plugin.js. So when u compile ts file it will converted into js then it will uses plugin…

  • cocowalla

    Is it possible to mock plugins that are *not* part of Ionic Native?

  • Anton B

    Guys! That’s amazing work you are all doing, but…
    I’m using live deploy feature and will use push notification soon. All those features require ionic-cloud which still uses old ionic-native.
    As a result, the final build still includes the full ionic-native package.
    Using ionic-native 3 just increases the size of the final build, not making it smaller at all.
    After looking at ionic-cloud repos, I can see there’s no work there in the past 1-2 months.
    Please tell me what to expect?
    https://uploads.disquscdn.com/images/e7b08c33ae0fc82afced6f917afa2736684e87ba79efcbeaf13ed3d87cd6ee10.png

  • prithivi

    How to Mock Facebook and Google Login plugin with ionic serve?

    • Matu Delatower

      class FacebookMock extends Facebook {

      login(permissions: string[]): Promise {
      return new Promise((resolve, reject) => {
      resolve(
      {
      status: “connected”,
      authResponse: {
      session_key: true,
      accessToken: “kgkh3g42kh4g23kh4g2kh34g2kg4k2h4gkh3g4k2h4gk23h4gk2h34gk234gk2h34AndSoOn”,
      expiresIn: 5183979,
      sig: “…”,
      secret: “…”,
      userID: “634565435”
      }
      }
      )
      })
      }

      api(requestPath: string, permissions: string[]): Promise {

      if (requestPath == ‘/me?fields=id,name,email,first_name,last_name,gender’) {
      return new Promise((resolve, reject) => {
      resolve(
      {
      “id”: “99999999999999”,
      “name”: “Matias Solis de la Torre”,
      “first_name”: “Matias”,
      “last_name”: “Solis de la Torre”,
      “gender”: “male”
      }
      )
      })

      }

      return new Promise((resolve, reject) => {
      resolve(
      {
      “data”: {
      “is_silhouette”: false,
      “url”: “https://scontent.xx.fbcdn.net/v/t1.0-1/p200x200/14670766_10211334286772488_3119901245003760342_n.jpg?oh=017fab3173ae45e221bedf0a4b410728&oe=5965DC8E”
      }
      }
      )
      })

      }

      }

  • http://www.catalogo.mobi Mauro

    I’ve tried to convert my app 2.x to 3 but i’ve problem with sqlite:
    [10:48:41] transpile started …
    [10:48:43] typescript: src/providers/database.ts, line: 11
    Cannot find name ‘SQLite’.

    L11: private storage: SQLite;

    Some help?

  • Kent Johnson

    Thanks for all your smart work! I upgraded as noted [here](https://github.com/driftyco/ionic/releases/tag/v3.0.0) and everything worked fine for my currently small app. No plugins, so easy upgrade for me.
    Keep up the goodness!

  • passionate_prog

    Ionic native 3 is pretty good as previously with 2.x for instance with sqlite, i had to comment all the code as it was giving error in the browser. But now there is no need to comment the code, just create a mock class for all your sql functions and yon can run your app smoothly in the browser. Thanks the ionic team.

  • Joshua Furman

    Full plugin support within the browser will improve testing time, awesome guys.

  • GB

    All plugins giving me “No provider for” [any plugin].

    For example, I have
    import { Facebook } from ‘@ionic-native/facebook’;

    constructor(public navCtrl: NavController, private facebook: Facebook) {

    this.facebook.login // this will cause “No provider for Facebook!” error like all plugin
    }

    in app.modules.ts:
    providers: [
    StatusBar,
    SplashScreen,
    Facebook,

    ]

    ~/proj/actualizeapp.com/i2 ξ‚° ξ‚  master ● ξ‚° npm install -g cordova
    npm WARN deprecated [email protected]: Use uuid module instead
    /usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova
    /usr/local/lib
    └── [email protected]

    ~/proj/actualizeapp.com/i2 ξ‚° ξ‚  master ● ξ‚°
    ~/proj/actualizeapp.com/i2 ξ‚° ξ‚  master ● ξ‚° ionic –version
    ******************************************************
    Dependency warning – for the CLI to run correctly,
    it is highly recommended to install/upgrade the following:

    Please install your Cordova CLI to version >=4.2.0 `npm install -g cordova`

    ******************************************************
    2.2.2

  • Jeson Dias

    This is awesome . Love your work guys