Custom Views for the React Native Module

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 React Native, you must extend the native Airship modules using the AirshipPluginExtender. See Extending Airship for setup instructions.

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:

import AirshipKit

@objc(AirshipExtender)
class AirshipExtender: NSObject, AirshipPluginExtenderDelegate {
    func onAirshipReady() {
        // Register custom views
        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:

import com.urbanairship.AirshipCustomViewManager

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

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.