# In-App Experiences Configure and control In-App Experiences in React Native applications. # In-App Experiences > Pause, resume, and control display timing for In-App Experiences. In-App Experiences are automatically enabled when you integrate the Airship SDK. Use these methods to control when and how they are displayed. ## Pausing and Resuming Display You can pause and resume In-App Experiences to control when they are displayed to users. ```typescript // Pause in-app experiences await Airship.inApp.setPaused(true) // Resume in-app experiences await Airship.inApp.setPaused(false) // Check if paused const isPaused = await Airship.inApp.isPaused() ``` ### Auto-Pause on Launch You can configure the SDK to automatically pause In-App Experiences on launch. This is useful if you want to defer showing In-App Experiences until after onboarding or other critical app flows. ```typescript await Airship.takeOff({ production: { appKey: "", appSecret: "" }, development: { appKey: "", appSecret: "" }, inProduction: true, site: "us", autoPauseInAppAutomationOnLaunch: true }) ``` See the [React Native Plugin Setup guide](https://www.airship.com/docs/developer/sdk-integration/react-native/installation/getting-started/) for complete `takeOff` configuration options. When you're ready to display In-App Experiences, call `setPaused(false)`: ```typescript await Airship.inApp.setPaused(false) ``` ## Display Interval Control the minimum time between In-App Experience displays to avoid overwhelming users. ```typescript // Set display interval to 5 seconds await Airship.inApp.setDisplayInterval(5000) // Get current display interval const interval = await Airship.inApp.getDisplayInterval() ``` The display interval is the minimum time (in milliseconds) that must pass between displaying In-App Experiences. # Embedded Content > Integrate Embedded Content into your React Native app to display Scene content directly within your app's screens. For information about Embedded Content, including overview, use cases, and how to create Embedded Content view styles and Scenes, see [Embedded Content]({{< ref "/guides/features/messaging/scenes/embedded-content.md" >}}). ## Adding an embedded view The `AirshipEmbeddedView` component defines a place for Airship Embedded Content to be displayed. When defining an `AirshipEmbeddedView`, specify the `embeddedId` for the content it should display. The value of the `embeddedId` must be the ID of an Embedded Content view style in your project. **Basic integration** ```typescript import { AirshipEmbeddedView } from '@ua/react-native-airship' // Show any "home_banner" Embedded Content ``` ## Sizing The `AirshipEmbeddedView` accepts an optional `style` prop for controlling its dimensions and layout. You can use standard React Native `ViewStyle` properties to set width, height, and other layout constraints. **Custom sizing** ```typescript ``` ## Checking if embedded content is ready Use `Airship.inApp.isEmbeddedReady` to check if embedded content is currently available for a given ID: ```typescript import Airship from '@ua/react-native-airship' const isReady = Airship.inApp.isEmbeddedReady("home_banner") ``` ## Listening for embedded content updates Use `Airship.inApp.addEmbeddedReadyListener` to listen for changes in the availability of embedded content for a given ID. The listener receives a boolean indicating whether content is ready to display. The listener is called immediately with the current state when first added, and then again whenever the state changes. **Embedded ready listener** ```typescript import Airship from '@ua/react-native-airship' const subscription = Airship.inApp.addEmbeddedReadyListener("home_banner", (isReady) => { console.log("home_banner is ready:", isReady) }) // Remove the listener when no longer needed subscription.remove() ``` ## Showing a placeholder when content is unavailable The `AirshipEmbeddedView` renders nothing when no content is available. Use `addEmbeddedReadyListener` to toggle between a placeholder and the embedded view based on content availability. **Embedded view with placeholder** ```typescript import React, { useState, useEffect } from 'react' import { View, Text, StyleSheet } from 'react-native' import Airship, { AirshipEmbeddedView } from '@ua/react-native-airship' function HomeBanner() { const [isReady, setIsReady] = useState( Airship.inApp.isEmbeddedReady("home_banner") ) useEffect(() => { const subscription = Airship.inApp.addEmbeddedReadyListener( "home_banner", (ready) => { setIsReady(ready) } ) return () => { subscription.remove() } }, []) if (!isReady) { return ( No content available ) } return ( ) } const styles = StyleSheet.create({ placeholder: { width: '100%', height: 200, justifyContent: 'center', alignItems: 'center', }, banner: { width: '100%', minHeight: 200, }, }) ``` # Custom Views > 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.