How To Use a Capacitor Plugin

Ionic Portals uses Capacitor under the hood, meaning that you can use Capacitor Plugins in your Portals. This means you can take advantage of our suite of Capacitor Core Plugins in your Portals, as well as any plugins made by the community. These plugins allow Portals to use native functionality with minimal configuration by the native developer or the web developer.

Core Plugins

Capacitor Core Plugins are plugins built by the Capacitor team and provided for you to use conveniently through public repositories.

React Native Usage

In order to use a Capacitor Core Plugin, you need to install the plugin as a dependency in your Podfile and as a dependency in your build.gradle file.

Podfile
build.gradle

Podfile
pod 'IonicPortals', '~> 0.11.0'
pod 'CapacitorPreferences', '~> 6.0.0'

build.gradle
dependencies {
    implementation 'io.ionic:portals:0.10.0'
    implementation 'com.capacitorjs:preferences:6.0.0'
}

caution

To avoid errors, make sure that the versions in your build.gradle, Podfile, and package.json match!

When creating your portal, you will need to specify the Android classpath and the iOS Objective-C class name for the plugin you intend to use:

import { PortalView } from "@ionic/portals-react-native";

const cameraPortal = {
  name: "cameraFeature",
  plugins: [
    {
      androidClassPath: "com.capacitorjs.plugins.camera.CameraPlugin",
      iosClassName: "CAPCameraPlugin"
    }
  ]
};

<PortalView portal={cameraPortal} />

Published Plugins

Action Sheet

Pod	`CapacitorActionSheet`
Maven	`com.capacitorjs:action-sheet`

{
  androidClassPath: "com.capacitorjs.plugins.actionsheet.ActionSheetPlugin",
  iosClassName: "ActionSheetPlugin"
}

The Action Sheet API provides access to native Action Sheets, which come up from the bottom of the screen and display actions a user can take.

App

Pod	`CapacitorApp`
Maven	`com.capacitorjs:app`

{
  androidClassPath: "com.capacitorjs.plugins.app.AppPlugin",
  iosClassName: "AppPlugin"
}

The App API handles high level App state and events. For example, this API emits events when the app enters and leaves the foreground, handles deeplinks, opens other apps, and manages persisted plugin state.

App Launcher

Pod	`CapacitorAppLauncher`
Maven	`com.capacitorjs:app-launcher`

{
  androidClassPath: "com.capacitorjs.plugins.applauncher.AppLauncherPlugin",
  iosClassName: "AppLauncherPlugin"
}

The AppLauncher API allows the opening of other apps.

Browser

Pod	`CapacitorBrowser`
Maven	`com.capacitorjs:browser`

{
  androidClassPath: "com.capacitorjs.plugins.browser.BrowserPlugin",
  iosClassName: "CAPBrowserPlugin"
}

The Browser API provides the capability to open an in-app browser and subscribe to browser events.

Camera

Pod	`CapacitorCamera`
Maven	`com.capacitorjs:camera`

{
  androidClassPath: "com.capacitorjs.plugins.camera.CameraPlugin",
  iosClassName: "CAPCameraPlugin"
}

The Camera API provides the capability to take a photo with the camera or to choose photos from the photo album.

Clipboard

Pod	`CapacitorClipboard`
Maven	`com.capacitorjs:clipboard`

{
  androidClassPath: "com.capacitorjs.plugins.clipboard.ClipboardPlugin",
  iosClassName: "ClipboardPlugin"
}

The Clipboard API enables copy and pasting to/from the system clipboard.

Device

Pod	`CapacitorDevice`
Maven	`com.capacitorjs:device`

{
  androidClassPath: "com.capacitorjs.plugins.device.DevicePlugin",
  iosClassName: "DevicePlugin"
}

The Device API exposes internal information about the device, such as the model and operating system version, along with user information such as unique ids.

Dialog

Pod	`CapacitorDialog`
Maven	`com.capacitorjs:dialog`

{
  androidClassPath: "com.capacitorjs.plugins.dialog.DialogPlugin",
  iosClassName: "DialogPlugin"
}

The Dialog API provides methods for triggering native dialog windows for alerts, confirmations, and input prompts.

Filesystem

Pod	`CapacitorFilesystem`
Maven	`com.capacitorjs:filesystem`

{
  androidClassPath: "com.capacitorjs.plugins.filesystem.FilesystemPlugin",
  iosClassName: "FilesystemPlugin"
}

The Filesystem API provides a NodeJS-like API for working with files on the device.

Geolocation

Pod	`CapacitorGeolocation`
Maven	`com.capacitorjs:geolocation`

{
  androidClassPath: "com.capacitorjs.plugins.geolocation.GeolocationPlugin",
  iosClassName: "GeolocationPlugin"
}

The Geolocation API provides simple methods for getting and tracking the current position of the device using GPS, along with altitude, heading, and speed information if available.

Haptics

Pod	`CapacitorHaptics`
Maven	`com.capacitorjs:haptics`

{
  androidClassPath: "com.capacitorjs.plugins.haptics.HapticsPlugin",
  iosClassName: "HapticsPlugin"
}

The Haptics API provides physical feedback to the user through touch or vibration.

Keyboard

Pod	`CapacitorKeyboard`
Maven	`com.capacitorjs:keyboard`

{
  androidClassPath: "com.capacitorjs.plugins.keyboard.KeyboardPlugin",
  iosClassName: "KeyboardPlugin"
}

The Keyboard API provides keyboard display and visibility control, along with event tracking when the keyboard shows and hides.

Local Notifications

Pod	`CapacitorLocalNotifications`
Maven	`com.capacitorjs:local-notifications`

{
  androidClassPath: "com.capacitorjs.plugins.localnotifications.LocalNotificationsPlugin",
  iosClassName: "LocalNotificationsPlugin"
}

The Local Notifications API provides a way to schedule device notifications locally (i.e. without a server sending push notifications).

Network

Pod	`CapacitorNetwork`
Maven	`com.capacitorjs:network`

{
  androidClassPath: "com.capacitorjs.plugins.network.NetworkPlugin",
  iosClassName: "CAPNetworkPlugin"
}

The Network API provides network and connectivity information.

Preferences

Pod	`CapacitorPreferences`
Maven	`com.capacitorjs:preferences`

{
  androidClassPath: "com.capacitorjs.plugins.preferences.PreferencesPlugin",
  iosClassName: "PreferencesPlugin"
}

The Preferences API provides a simple key/value persistent store for lightweight data.

Push Notifications

Pod	`CapacitorPushNotifications`
Maven	`com.capacitorjs:push-notifications`

{
  androidClassPath: "com.capacitorjs.plugins.pushnotifications.PushNotificationsPlugin",
  iosClassName: "PushNotificationsPlugin"
}

The Push Notifications API provides access to native push notifications.

Screen Reader

Pod	`CapacitorScreenReader`
Maven	`com.capacitorjs:screen-reader`

{
  androidClassPath: "com.capacitorjs.plugins.screenreader.ScreenReaderPlugin",
  iosClassName: "ScreenReaderPlugin"
}

The Screen Reader API provides access to TalkBack/VoiceOver/etc. and provides simple text-to-speech capabilities for visual accessibility.

Share

Pod	`CapacitorShare`
Maven	`com.capacitorjs:share`

{
  androidClassPath: "com.capacitorjs.plugins.share.SharePlugin",
  iosClassName: "SharePlugin"
}

The Share API provides methods for sharing content to any sharing-enabled apps that the user may have installed.

Splash Screen

Pod	`CapacitorSplashScreen`
Maven	`com.capacitorjs:splash-screen`

{
  androidClassPath: "com.capacitorjs.plugins.splashscreen.SplashScreenPlugin",
  iosClassName: "SplashScreenPlugin"
}

The Splash Screen API provides methods for showing or hiding a Splash image.

Status Bar

Pod	`CapacitorStatusBar`
Maven	`com.capacitorjs:status-bar`

{
  androidClassPath: "com.capacitorjs.plugins.statusbar.StatusBarPlugin",
  iosClassName: "StatusBarPlugin"
}

The StatusBar API Provides methods for configuring the style of the Status Bar, along with showing or hiding it.

Text Zoom

Pod	`CapacitorTextZoom`
Maven	`com.capacitorjs:text-zoom`

{
  androidClassPath: "com.capacitorjs.plugins.textzoom.TextZoomPlugin",
  iosClassName: "TextZoomPlugin"
}

The Text Zoom API provides the ability to change Web View text size for visual accessibility.

Toast

Pod	`CapacitorToast`
Maven	`com.capacitorjs:toast`

{
  androidClassPath: "com.capacitorjs.plugins.toast.ToastPlugin",
  iosClassName: "ToastPlugin"
}

The Toast API provides a notification pop up for displaying important information to a user. Just like real toast!

Web Usage

Web Developers need to install the web dependencies of the plugins from npm. The packages are listed under the @capacitor scope. To install a plugin, run npm i @capacitor/<plugin_name> from the root of your web project.

warning

To avoid errors, make sure that the versions in your Podfile, build.gradle, and package.json all match!

For more information on how to use Capacitor Plugins in your web application, check out the Capacitor Plugin docs.

Other Plugins

Any plugin built for Capacitor can be linked in to a project using Portals even if it is not available through public native repositories like the core plugins are.

Download the Plugin

Get the source code for the plugin and integrate it into your web app. If it is a Capacitor plugin, it is likely that it will be available through NPM.

npm i @capacitor-community/stripe

Link the Plugin Natively

The native code from the plugin needs to be made available to each native project using Portals.

iOS
Android

In your project Podfile, define the path to the folder containing the plugin's Podspec file.

pod 'CapacitorPluginName', :path => '../../webapp/node_modules/@custom-capacitor/plugin'

The path to the Podspec file is typically the source root of the plugin project, not in the platform specific subfolder.

In your project settings.gradle file, define a path to the plugin android native project code.

include ':capacitor-plugin-name'
project(':capacitor-plugin-name').projectDir = new File('../../webapp/node_modules/@custom-capacitor/plugin/android')

Then in your project module level build.gradle file, add the project to the dependencies.

dependencies {
    implementation project(':capacitor-plugin-name')
    implementation 'io.ionic:portals:0.5.0'

    //...
}

If successful, you should now see a section in the Android Studio project browser for your plugin, be able to browse its source code, and reference classes in the plugin within your native application source code.

Register the Plugin

iOS
Android

Plugins are automatically registered on iOS.

Kotlin
Java

class MyApplication : Application() {
    override fun onCreate(): Unit {
        super.onCreate()
        PortalManager.register("YOUR_PORTALS_KEY")

        val portalId = "MY_FIRST_PORTAL"
        PortalManager.newPortal(portalId)
                     .addPlugin(MyCapacitorPlugin::class.java)
                     .create()
    }
}

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        PortalManager.register("YOUR_PORTALS_KEY");

        String portalId = "MY_FIRST_PORTAL";
        PortalManager.newPortal(portalId)
                     .addPlugin(MyCapacitorPlugin.class)
                     .create();
    }
}

Core Plugins​

React Native Usage​

Published Plugins​

Web Usage​

Other Plugins​

Download the Plugin​

Link the Plugin Natively​

Register the Plugin​

Contents