OptiView Ads SDK on React Native

On React Native, the OptiView Ads SDK bridges the native Android and iOS SDKs behind a typed JavaScript API. All timing-sensitive break scheduling runs natively, so playback stays smooth regardless of the JavaScript thread's load.

Prerequisites

1. Retrieve the channel's Break Manifest URL. See Retrieving the required values.
2. For Google Pod Serving, have your Google Ad Manager networkCode and the channel's customAssetKey at hand.
3. Add the OptiView Ads SDK for React Native to your project. Contact us for access to the SDK artifacts.

Integration

Attach the SDK to your host player once it is ready, then start a session with the channel's Break Manifest URL. The example below uses the OptiView Player (react-native-theoplayer):

import { THEOplayerView } from 'react-native-theoplayer';
import { createOptiViewAds } from '@dolby-optiview/ads-react-native';

const onPlayerReady = async (player) => {
  player.source = { sources: [{ src: CONTENT_URL, type: 'application/x-mpegurl' }] };
  const ads = createOptiViewAds({ nativeHandle: player.nativeHandle });
  await ads.startSession({
    manifestUrl: 'https://us.markers.optiview.dolby.com/manifest/v1/ORG-ID/channels/CHANNEL-ID',
  });
};

<THEOplayerView config={{ license: THEOPLAYER_LICENSE }} onPlayerReady={onPlayerReady} />;

From this point the SDK polls the Break Manifest, schedules the breaks against your player's timeline, plays the ads, and reports the impressions. To verify the integration, schedule a break through the API or dashboard and confirm that it plays out.

Supported players

OptiView Player (react-native-theoplayer)

The SDK attaches to a THEOplayerView through its native player handle.

Limitations:

• Requires the React Native new architecture (TurboModules / Fabric).

react-native-video

The SDK attaches to a react-native-video player through its native player handle.

Limitations:

• Requires react-native-video v6.
• Requires the React Native new architecture (TurboModules / Fabric).