Latest 1.0.9
Homepage https://github.com/mfdeveloper/cordova-plugin-nativeview
License MIT
Platforms ios 8.0
Dependencies Cordova
Authors

npm version
cordova-plugin-nativeview


title: NativeView
description: Starts native view or another app, from a cordova app.

Start an UIViewController(IOS) or Activity(Android) relative to your cordova app, or an external app (based in cordova plugin startapp cordova plugin)

You can use this in a standalone project (basic cordova project), or into an existing native Android/IOS application, like described in Embed Cordova in native apps

OBS: If you wish just EXIT from cordova app or back to native view (Android only), use: navigator['app'].exitApp()

Installation

cordova plugin add cordova-plugin-nativeview --save

# using IONIC
ionic cordova plugin add cordova-plugin-nativeview --save

Extra: Native app (Android/IOS native code)

ALL PLATFORMS

Make sure that config.xml file contains the <feature> tag below:

<feature name="NativeView">
    <param name="android-package" value="br.com.mfdeveloper.cordova.NativeView" />
    <param name="onload" value="true" />
</feature>

IOS

  • Copy the config.xml from your cordova project to root XCode project directory.
  • Install cocoapods
  • Add this plugin like a pod dependency:
# Objective-C version (Default)
pod 'cordova-plugin-nativeview', '~> 1.0.7'

# Swift version (needs update to latest Objective-c implementations)
pod 'cordova-plugin-nativeview', :git => 'https://github.com/mfdeveloper/cordova-plugin-nativeview.git', :branch => 'swift'

ANDROID

Add this code snippet below to your build.gradle file

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

implementation ('com.github.mfdeveloper:cordova-plugin-nativeview:1.0.7')

This dependency is added using jitpack

Or add, the NativeView class directly to your android project:

  • From your cordova project:

    • Copy the content off platforms/android/assets/www folder to your android project (usually, app/src/main/assets).
      Or create a gradle task to do this.
    • Copy the config.xml to src/main/res/xml android project folder.
  • Clone this repo, and copy the class: src/android/NativeView.java to your Android project

  • Or create a .jar or a .aar that contains this class, and import like a Android module dependency

  • Verify if the code snippet below is present in your AndroidManifest.xml. This is required to open a specific Activity from a Intent (using [package + activityName])
<activity android:name=".MyActivity" >
    <intent-filter>
        <action android:name="com.mypackage.MyActivity" />
        <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
</activity>

If this filter not exists in AndroidManifest.xml, you will get this error: No Activity found to handle Intent splash screen

  • Build/Run your android project!

Supported Platforms

  • Android Android
  • iOS iOS

Methods

NativeView.show(packageOrClassName: string, className: string)

OR

NativeView.show(params: object)

Shows a native view.

ANDROID


document.addEventListener("deviceready", function() {
    //  pass a package name and a activity by params
    cordova.plugins.NativeView.show('com.mycompany', 'MyActivity')
    .then(function() {

      /**
       * Do something when open the activity.
       * This code here will be executed in paralell,
       * not after open.
       */
    }).catch(function(error) {

        /**
         * error.success => Will be "false"
         * error.name => Exception type from the captured error 
         * error.message => A exception message
         */
    });

    // Preferably, pass the Package and Activity in a json
    cordova.plugins.NativeView.show({
        packageName: 'com.mycompany',
        className: 'MyActivity',
    });

}, false);

IOS

  • Pass Storyboard name and storyboard id
document.addEventListener("deviceready", function() {

    /*
     * The first param is a storyboard name, and
     * the second param is a storyboardId 
     * (conventionally the same name of the ViewController class name)
     */
    cordova.plugins.NativeView.show('MyStoryboard', 'MyUIViewController')
    .then(function() {

      /**
       * Do something when open the activity.
       * This code here will be executed in paralell,
       * not after open.
       */
    });

    // Preferably, pass the ViewController and Storyboard in a json
    cordova.plugins.NativeView.show({
        storyboardName: 'MyStoryboard',
        viewControllerName: 'MyUIViewController'
    });

}, false);
  • Pass only the ViewController class/xib name
/*
*  Or, pass only the UIViewController name, if you don't
*  use storyboards in your project. This plugin try instantiate
*  from a ".xib" file. If not exists, try instantiate just by
*  UIViewController class.
* 
*  By convention, your ViewController class/xib needs contains 'Controller' 
*  string in any part of the name 
* .
*/
cordova.plugins.NativeView.show('MyUIViewController');

// Preferably, pass the ViewController in a json
cordova.plugins.NativeView.show({
    viewControllerName: 'MyUIViewController'
});
  • Pass only the Storyboard name
/*
*  Or, pass only the Storyboard name. If you don't pass a 
*  ViewController class name in second param, the 
*  "rootViewController" of your storyboard will be
*  instantiated. 
* 
*  By convention, your Storyboard name needs contains 'Storyboard' 
*  string in any part of the name
*/
cordova.plugins.NativeView.show('MyStorboard');

// Preferably, pass the Storyboard in a json
cordova.plugins.NativeView.show({
    storyboardName: 'MyStorboard'
});

NativeView.checkIfAppInstalled(uri: string)

OR

NativeView.checkIfAppInstalled(params: { uri: string })

Verify if another app that responds to a uri is installed on device.


cordova.plugins.NativeView.checkIfAppInstalled('another-app://custom-host')
.then(function() {
    console.log('The app is INSTALLED!');
}).catch(function(error) {
    console.log("The app is NOT INSTALLED!");
    throw error;
});

// Preferably, pass the uri in a json
cordova.plugins.NativeView.show({
    uri: 'another-app://custom-host'
});

NativeView.showMarket(marketId: string)

OR

NativeView.showMarket(params: { marketId: string })

Open the store (Apple Store/Google Play) app installed in your device, or in a browser.

ANDROID


// Pass a app package on Android (found this on Google Play)
cordova.plugins.NativeView.showMarket('my.company.other.app');

// Preferably, pass the marketId in a json
cordova.plugins.NativeView.show({
    marketId: 'my.company.other.app'
});

IOS


// Pass a app id from the Apple Store
cordova.plugins.NativeView.showMarket('idxyz1?mt=x');

// Preferably, pass the marketId in a json
cordova.plugins.NativeView.showMarket({
    marketId: 'idxyz1?mt=x'
});

NativeView.getBuildVariant(params: { catchError: boolean })

Get the current Android build variant configured in

ANDROID (ONLY)


/*
* Pass the param "catchError", and use the `catch()` method to verify an 
* error (if happens)
*
* Otherwise, this method will return the variant like a string,
* or null if not found.
*
* This is useful if you need show a NativeView by environment
*/
cordova.plugins.NativeView.getBuildVariant({
    catchError: true
}).then(function(value) {
    console.log('My environment is: ' + value);
}).catch(function(error) {
    if (!error.success && error.message) {
        console.log(error.message);
    }
});

/* Optionally, don't pass any parameter and get the Build Variant 
 * value, or NULL
 */
cordova.plugins.NativeView.getBuildVariant()
.then(function(value) {
    console.log('My environment is: ' + value);
});

IONIC

Replace document.addEventListener event to this.platform.ready().then(...) service method. See IONIC Platform documentation

License

This project is licensed under the MIT License – see the LICENSE file for details

TODO

  • [x] Better catch IOS exception from JS
  • [ ] Update Swift implementation
  • [ ] Add cordova integration tests

Latest podspec

{
    "name": "cordova-plugin-nativeview",
    "version": "1.0.9",
    "summary": "Start or Back to a native screen/page from app or other app",
    "description": "Start or Back to a UIViewController(ios)/Activity(Android) nrelative to you cordova app or open other screen/page from other app. You cannstart another app too (by package, uri scheme...)",
    "homepage": "https://github.com/mfdeveloper/cordova-plugin-nativeview",
    "license": "MIT",
    "authors": {
        "Michel Felipe": "[email protected]"
    },
    "platforms": {
        "ios": "8.0"
    },
    "source": {
        "git": "https://github.com/mfdeveloper/cordova-plugin-nativeview.git",
        "tag": "1.0.9"
    },
    "source_files": "src/ios/*.{h,m}",
    "dependencies": {
        "Cordova": [
            ">= 4.3.0"
        ]
    }
}

Pin It on Pinterest

Share This