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.

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

import { AirshipEmbeddedView } from '@ua/react-native-airship'

// Show any "home_banner" Embedded Content
<AirshipEmbeddedView embeddedId="home_banner" />

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

<AirshipEmbeddedView 
  embeddedId="home_banner"
  style={{
    width: '100%',
    minHeight: 200
  }}
/>

Checking if embedded content is ready

Use Airship.inApp.isEmbeddedReady to check if embedded content is currently available for a given ID:

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

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

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 (
      <View style={styles.placeholder}>
        <Text>No content available</Text>
      </View>
    )
  }

  return (
    <AirshipEmbeddedView
      embeddedId="home_banner"
      style={styles.banner}
    />
  )
}

const styles = StyleSheet.create({
  placeholder: {
    width: '100%',
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
  },
  banner: {
    width: '100%',
    minHeight: 200,
  },
})