Embedded Content

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 EmbeddedView component defines a place for Airship Embedded Content to be displayed. When defining an EmbeddedView, 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.

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

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

Placeholders

If content is unavailable to display, the EmbeddedView will render nothing by default. You can customize this by providing a placeholder component.

<EmbeddedView 
  embeddedId="home_banner"
  placeholderComponent={<Text>No content available</Text>}
/>

Sizing

The EmbeddedView will automatically size itself based on the content it displays. You can control the sizing behavior using style properties:

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

Observing available embedded content

Embedded Content is not always available, and even after being triggered, it still needs to be prepared before it can be displayed. An EmbeddedView will automatically update when content is available and transition from the placeholder to the content once content is available. If you need to query the availability of Embedded Content, you can use the useEmbeddedContent hook to watch for updates.

Use the useEmbeddedContent hook to observe when embedded content is available:

import { useEmbeddedContent, EmbeddedView } from '@ua/react-native-airship'

function MyComponent() {
  const embeddedInfos = useEmbeddedContent('home_banner')

  if (embeddedInfos.length === 0) {
    return <Text>No banner available</Text>
  }

  return (
    <>
      <Text>Banner available</Text>
      <EmbeddedView embeddedId="home_banner" />
    </>
  )
}

The useEmbeddedContent hook accepts either a single embeddedId or an array of IDs to watch multiple embedded content placements at once. The hook returns an array of EmbeddedInfo objects in FIFO order, including any extras you set through the Scene composer when creating the content.