Custom Views

Airship Custom Views

This skill guides you through registering custom native views for use in Airship Thomas scenes (Airship's declarative layout engine for in-app messages and experiences).

When to Use

• Registering a custom native view for Thomas scenes
• Customizing Message Center / Inbox UI
• Styling Preference Center
• Customizing In-App Message appearance
• Embedding native components (maps, cameras, charts) in Airship layouts

Supported Platforms

Interactive Workflow

When helping a user register a custom view, follow this workflow:

Step 1: Identify Platform

Ask the user which platform they're targeting:

• iOS
• Android
• React Native
• Flutter
• Capacitor
• Cordova

For cross-platform SDKs (React Native, Flutter, Capacitor, Cordova): Explain that custom views require native iOS AND Android implementations.

Step 2: Identify Use Case

Ask what they want to customize:

1. Message Center / Inbox UI - Custom message list and detail views
2. Preference Center styling - Subscription preferences UI
3. In-App Message appearance - Banners, modals, full-screen messages
4. Custom Thomas view component - Native view for Thomas scenes

Step 3: Gather View Details

For custom Thomas views, ask:

1. Class name - e.g., "WeatherWidget", "MapView", "CameraView"
2. Identifier - Suggest snake_case from class name (WeatherWidget → weather_widget)
3. Properties - What data should be configurable from Thomas scenes?

IMPORTANT: Before asking about properties, analyze the user's existing code:

• Search for the class definition with Grep
• Read the file to understand the implementation
• Look for hardcoded values that should be configurable
• Look for constructor parameters or @State/@Published properties

Step 4: Generate Code

Use the templates in assets/templates/ to generate:

1. Registration code for the target platform
2. Thomas scene YAML snippet
3. Integration instructions

Code Generation

iOS Registration

import AirshipCore

// Add to your App.init() or AppDelegate
AirshipCustomViewManager.shared.register(name: "IDENTIFIER") { args in
    CLASS_NAME(properties: args.properties)
}

Property access:

let value = properties?["key"]?.unWrap() as? String ?? "default"

Android Registration (Compose)

import com.urbanairship.android.layout.ui.AirshipCustomViewManager

// Add to your Application.onCreate()
AirshipCustomViewManager.shared().register("IDENTIFIER") { args ->
    CLASS_NAME(properties = args.properties)
}

Property access:

val value = properties?.get("key")?.string ?: "default"

Thomas Scene YAML

view:
  type: custom_view
  name: IDENTIFIER
  properties:
    key1: "value1"
    key2: 42
    key3: true

Property Type Mapping

Use Case Templates

Custom View (iOS)

See assets/templates/ios-custom-view.swift for a complete custom view registration example.

Custom View (Android)

See assets/templates/android-custom-view.kt for a complete custom view registration example (Compose).

Thomas Scene

See assets/templates/thomas-scene.yaml for a scene definition that references a custom_view.

Message Center (iOS)

See assets/templates/ios-message-center.swift for:

• MessageCenterDisplayDelegate implementation
• Custom message list and detail views
• Integration instructions

Message Center (Android)

See assets/templates/android-message-center.kt for:

• OnShowMessageCenterListener implementation
• Custom message center activity
• Integration instructions

Cross-Platform Notes

For React Native, Flutter, Capacitor, and Cordova:

1. Custom views are implemented in native code, not JavaScript/Dart
2. You need implementations for both iOS and Android
3. Use the platform-specific extender classes:
   • React Native: AirshipPluginExtenderDelegate
   • Flutter: AirshipPluginExtenderProtocol
   • Capacitor/Cordova: AirshipPluginExtenderDelegate

See references/cross-platform-guide.md for detailed instructions.

References

• references/ios-guide.md - Complete iOS implementation guide
• references/android-guide.md - Complete Android implementation guide
• references/cross-platform-guide.md - React Native, Flutter, Capacitor, Cordova

Scripts

• scripts/generate_code.py - Generate registration code from parameters

Related Skills

• sdk-reference - SDK documentation and setup guides
• migration - SDK migration guides