Creating Custom Native Integrations

Creating Custom Native Integrations

In most cases, you will probably be able to do everything you need with the official plugins, and if not likely you can find a community plugin that will cover what you need.

But not in every case, and knowing how to take matters into your own hands and write your own custom native integrations gives you a lot more power to work with. It can also keep you from getting blocked - say if a community plugin you are relying on doesn’t work anymore.

There are three main ways you can integrate custom native code:

• If it does not need to be accessible to the web view, then you can just make whatever change you want directly to the native iOS/Android project
• If it does need to be accessible, you can add custom native code and expose it to the web view as a local plugin
• You can do the same as above, except create a publishable/installable plugin just like the other community Capacitor plugins that are available.

Creating your own local plugin

Let’s take a look at an example of integrating our own native code to a project, and then integrating that into our application running inside of the web view. We aren’t going to get too far into the weeds here - this module is only intended to be introductory. But, I do want to give you a realistic view of what this might look like.

The example we are going to look at is displaying a native alert to the user. I don’t think there is any particularly strong reason to do this, you could just use something like an Ionic web based alert, but if you are not using Ionic or you would just prefer to use native controls where possible this is certainly something you could do.

We will take a look at adding the custom native code for iOS and Android.

Note

Make sure to run the ionic cap sync or npx cap sync commands before attempting to open the native projects.

Adding Native Code for iOS

First, you will need to open Xcode:

npx cap open ios

or

ionic cap open ios

Within XCode, you will need to expand App, and then select the App target within that:

You can then right click it to create a new file - you should choose a Swift file and name it something like AlertPlugin.swift. You could then add the following code to the file:

import Foundation
import Capacitor

@objc(AlertPlugin)
public class AlertPlugin: CAPPlugin, CAPBridgedPlugin {

    public let identifier = "AlertPlugin"
    public let jsName = "AlertPlugin"
    public let pluginMethods: [CAPPluginMethod] = [
        CAPPluginMethod(name: "present", returnType: CAPPluginReturnNone)
    ]

    @objc func present(_ call: CAPPluginCall) {
        let message = call.getString("message") ?? ""

        DispatchQueue.main.async { [weak self] in
            guard let self = self else { return }

            var presenter = self.bridge?.viewController
            while let presented = presenter?.presentedViewController {
                presenter = presented
            }
            guard let presenter = presenter else {
                call.reject("No view controller to present from.")
                return
            }

            let alert = UIAlertController(title: "Alert", message: message, preferredStyle: .alert)
            alert.addAction(UIAlertAction(title: "Ok", style: .default) { _ in
                call.resolve()
            })

            presenter.present(alert, animated: true, completion: nil)
        }
    }
}

This is iOS/Swift native code, so of course if you are not familiar with that it is going to be hard to understand. It is still going to be possible to do some simple native stuff even if you don’t know Swift/Kotlin just by copying and pasting simple examples from Googling or hitting up the LLMs. But, likely anything that is a bit more complicated will be hard to achieve without learning the language a little.

The specifics here aren’t too important for now, let’s just focus on:

import Capacitor
@objc(AlertPlugin)
public class AlertPlugin: CAPPlugin {

    public let identifier = "AlertPlugin"
    public let jsName = "AlertPlugin"
    public let pluginMethods: [CAPPluginMethod] = [
        CAPPluginMethod(name: "present", returnType: CAPPluginReturnNone)
    ]

    @objc func present(_ call: CAPPluginCall) {
        // ...snip
    }
}

We are creating a CAPPlugin and labelling it with @objc(AlertPlugin) which is how the plugin gets exported to Objective-C (and also why we have @objc before the present method). We have created a single function for this plugin called present which we will use to display the native alert. Notice that we specify an array of pluginMethods that define the methods we are making available and the types of data they are expected to return (in this case, our present method returns nothing, it just launches the alert).

The rest of the code is just standard Swift code for displaying an alert:

let message = call.getString("message") ?? ""

DispatchQueue.main.async { [weak self] in
  guard let self = self else { return }

  var presenter = self.bridge?.viewController
  while let presented = presenter?.presentedViewController {
      presenter = presented
  }
  guard let presenter = presenter else {
      call.reject("No view controller to present from.")
      return
  }

  let alert = UIAlertController(title: "Alert", message: message, preferredStyle: .alert)
  alert.addAction(UIAlertAction(title: "Ok", style: .default) { _ in
      call.resolve()
  })

  presenter.present(alert, animated: true, completion: nil)
}