# Custom Views for the React Native Module

Register custom native views to use within Scenes.

A *Custom View* is a native view from your mobile or web application embedded into a Scene. Custom Views can display any native content your app exposes, so you can reuse that existing content within any screen in a Scene.

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](https://www.airship.com/docs/developer/sdk-integration/react-native/installation/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](https://www.airship.com/docs/developer/sdk-integration/apple/in-app-experiences/custom-views/) for detailed implementation instructions.

Custom Views should be registered after takeOff in your native iOS code:

```swift
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](https://www.airship.com/docs/developer/sdk-integration/android/in-app-experiences/custom-views/) for detailed implementation instructions.

Custom Views should be registered during the `onAirshipReady` callback in your native Android code:

```kotlin
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.