React Native Embedded Content

About Embedded Content

Present the content of a SceneA single or multi-screen in-app experience cached on users’ devices and displayed when users meet certain conditions in your app or website, such as viewing a particular screen or when a Custom Event occurs. They can be presented in fullscreen, modal, or embedded format using the default swipe/click mode or as a Story. Scenes can also contain survey questions. on any app screen. There are three primary components:

Once the Scene is triggered for display and matches the specified audience conditions, its content is available to users when visiting a screen that contains the AirshipEmbeddedView. The view is populated with the content from all active Scenes with the matching ID and in the order in which the Scenes were triggered.

Embedded Content behavior is the same as In-App AutomationsMessages cached on users’ devices and displayed when users meet certain conditions within your app, such as viewing a particular screen or opening the app a certain number of times., SurveysA question-and-answer experience used to collect and aggregate feedback or generate a net promoter score. Surveys are cached on users’ devices and displayed when users meet certain conditions within your app, such as viewing a particular screen or opening the app a certain number of times., and modal and fullscreen Scenes:

• The content displays only within the app.
• When the app is terminated, the content is not automatically dismissed. It continues to display in the next app session.

Adding an AirshipEmbeddedView

The AirshipEmbeddedView is a Native View component that 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.

// Show any "home_banner" Embedded Content
<AirshipEmbeddedView embeddedId="home_banner" style={{ flex: 1 }} />

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 AirshipEmbeddedView will automatically render once the content is available. When no content is available, it will render as an empty view. You can query for when content is available to either show a placeholder or to remove the embedded view.

// Check if any "home_banner" Embedded Content is ready
 const isReady = Airship.inApp.isEmbeddedReady("home_banner");
 // handle isReady

Airship.inApp.addEmbeddedReadyListener("home_banner", (isReady: boolean) => {
    // handle isReady
});

Example Integration

Here is an example integration that renders an Embedded Content when available, and when not available displays an image placeholder:

import React, { useState, useEffect } from 'react';
import { View, Image } from 'react-native';
import Airship, { AirshipEmbeddedView } from '@ua/react-native-airship';

export default function HomeScreen() {
  const [isHomeBannerReady, setIsHomeBannerReady] = useState(false);

  useEffect(() => {
    let subscription = Airship.inApp.addEmbeddedReadyListener(
      'test',
      (isReady: boolean) => {
        setIsHomeBannerReady(isReady);
      }
    );

    return () => {
      subscription.remove();
    };
  }, []);

  return (
    <View>
      {isHomeBannerReady ? (
        <AirshipEmbeddedView
          embeddedId="home_banner"
          style={{ height: '100%', width: '100%' }}
        />
      ) : (
        <View
          style={{
            height: '100%',
            width: '100%',
          }}
        >
          <Image
            style={{
              width: '100%',
              height: '100%',
              resizeMode: 'contain',
              alignItems: 'center',
            }}
            source={require('./../img/airship-mark.png')}
          />
        </View>
      )}
    </View>
  );
}