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()
cordova plugin add cordova-plugin-nativeview --save # using IONIC ionic cordova plugin add cordova-plugin-nativeview --saveALL 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.xmlfrom 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/wwwfolder to your android project (usually,app/src/main/assets). Or create a gradle task to do this. - Copy the
config.xmltosrc/main/res/xmlandroid project folder.
- Copy the content off
-
Clone this repo, and copy the class:
src/android/NativeView.javato your Android project -
Or create a
.jaror a.aarthat 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!
Android
iOS
OR
Shows a native view.
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);- Pass
Storyboardname andstoryboard 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
ViewControllerclass/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
Storyboardname
/* * 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' });OR
Verify if another app that responds to a
uriis 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' });OR
Open the store (Apple Store/Google Play) app installed in your device, or in a browser.
// 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' });// 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' });Get the current Android build variant configured in
/* * 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); });Replace document.addEventListener event to this.platform.ready().then(...) service method. See IONIC Platform documentation
This project is licensed under the MIT License - see the LICENSE file for details
- Better catch IOS exception from JS
- Update
Swiftimplementation - Add cordova integration tests