Custom Views for the Cordova Plugin

Custom Views allow you to embed native iOS and Android views within Scenes, giving you full control over design and layout while leveraging Airship’s targeting and orchestration capabilities.

Requirements

To use Custom Views in Cordova, you must extend the native Airship modules by implementing native code on each platform.

Registering Custom Views

Custom Views must be registered on each native platform separately:

iOS

See the Apple Custom Views documentation for detailed implementation instructions.

Custom Views should be registered after takeOff in your native iOS code. You can add this to your AppDelegate.swift or a custom plugin:

import AirshipKit

// In your AppDelegate or after Airship.takeOff
AirshipCustomViewManager.shared.register(name: "my-custom-view") { args in
    // Return your SwiftUI view
    MyCustomView(args: args)
}

Android

See the Android Custom Views documentation for detailed implementation instructions.

Custom Views should be registered during the onAirshipReady callback in your native Android code. You can use Airship’s Autopilot to register views at startup:

import com.urbanairship.AirshipCustomViewManager
import com.urbanairship.Autopilot
import com.urbanairship.UAirship

class CustomAutopilot : Autopilot() {
    override fun onAirshipReady(airship: UAirship) {
        // Register custom views
        AirshipCustomViewManager.register("my-custom-view") { context, args ->
            // Return your Android View
            MyCustomView(context, args)
        }
    }
}

Don’t forget to register your Autopilot in AndroidManifest.xml:

<meta-data
    android:name="com.urbanairship.autopilot"
    android:value="your.package.name.CustomAutopilot" />

Using Custom Views

Once registered, Custom Views can be added to Scenes in the Airship dashboard:

1. Create or edit a Scene
2. Add the Custom View content element to a screen
3. Enter the view name (e.g., my-custom-view) that matches the name you registered in your native code
4. Optionally add key-value pairs to pass custom properties to the view

The native view will be displayed within the Scene with the properties you configured.