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, sorted based on priority. When an embedded view loads content, the highest priority Scene that is queued for display will be shown. The same content will be shown across app and web sessions until it is dismissed by the user or is no longer available. The view will then show the next Scene with the highest priority from the display queue.

Airship first prepares the content when the triggering event occurs and then refreshes it upon every app open or web session start. This ensures that users always experience the most up-to-date message. So, after updating active Embedded Content, users will see the latest version the next time they open the app or load the app or web page containing the view.

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. 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>
  );
}