Use Capacitor plugins with @nativescript/ionic-portals

Ionic Portals allow you to use Capacitor plugins.

Let's use Capacitor plugins in our NativeScript apps through @nativescript/ionic-portals!

Use Capacitor Plugins

You can find all sorts of Capacitor plugins in the docs here: https://capacitorjs.com/docs/plugins

For example, let's use the following:

• Camera: https://capacitorjs.com/docs/apis/camera
• Filestystem: https://capacitorjs.com/docs/apis/filesystem
• Storage: https://capacitorjs.com/docs/apis/storage

iOS

For iOS, we can use any Capacitor Cocoapod as mentioned in Portals docs here: https://ionic.io/docs/portals/how-to/using-a-capacitor-plugin

In your NativeScript app:

• App_Resources/iOS/Podfile (you can add this file if it doesn't exist)

# Capacitor iOS Plugins
pod 'CapacitorCamera', '~> 1.3.0'
pod 'CapacitorFilesystem', '~> 1.1.0'
pod 'CapacitorStorage', '~> 1.2.0'

When using any plugins which require user permission consent, be sure you also abide by platform permissions handling (often using various key/values in App_Resources/iOS/Info.plist), for example as stated with CapacitorCamera.

Official Capacitor iOS plugins are auto configured from @nativescript/ionic-portals anytime they are used.

Android

For Android, we can use any Capacitor gradle implementation as mentioned in Portals docs here: https://ionic.io/docs/portals/how-to/using-a-capacitor-plugin

In your NativeScript app:

• App_Resources/Android/app.gradle (can add these dependencies)

dependencies {
  // Capacitor Android Plugins
  implementation 'com.capacitorjs:camera:1.3.1'
  implementation 'com.capacitorjs:filesystem:1.1.0'
  implementation 'com.capacitorjs:storage:1.2.5'
}

When using any plugins which require user permission consent, be sure you also abide by platform permissions handling (often using various settings in AndroidManifest.xml and other resource files), for example as stated with com.capacitorjs:camera.

Official Capacitor Android plugins are auto configured from @nativescript/ionic-portals anytime they are used.

Using non-official Capacitor Plugins

Official Capacitor plugins are listed here and are all auto configured without any additional setup.

When using Capacitor Community plugins mentioned here and found here, they are also auto configured on iOS, however for Android you may need to pass in the full package namespace of the plugin, for example:

Note: Only required for Android non-official capacitor plugins

import { IonicPortalManager } from '@nativescript/ionic-portals';

Application.on(Application.launchEvent, () => {
	// Register IonicPortals
	IonicPortalManager.register('<portal-api-key>');

	// Create as many Portals as you need to use in your app
  // For Android, you can pass array of any non-official capacitor plugin namespaces
	IonicPortalManager.create('ionicWebPortalSample', '', [
    'com.hemangkumar.capacitorgooglemaps.CapacitorGoogleMaps'
  ]);
});

Use from your IonicPortal

Using this blog post as a guide on setting up your IonicPortal in your NativeScript app, you can now use any Capacitor plugin you'd like with any microfrontend you plan to insert into your IonicPortal.