The VIS.X® SDK Interstitial integration will provide you access to regular interstitials and the YOC Mystery Ad®, a high-impact fullscreen-overlay powered by YOC.

To request an interstitial, all that is needed is a VIS.X® Ad Unit ID (provided by YOC) and a URL of your app-ads.txt.

1. Import the required Classes
2. Calling and Rendering an Interstitial Ad
3. Adding Background Color

Import the required Classes

First, simply import the VISX_EVENT, loadInterstitial, displayInterstitial and loadAndDisplayInterstitial classes from the react-native-visx-module of yoc.

import React, { useMemo } from 'react';
import { VISX_EVENT, loadInterstitial, displayInterstitial, loadAndDisplayInterstitial } from '@yoc/react-native-visx-module';

Next you need to prepare the VisxViewEmitter, which is needed to listen to NativeEventEmitter which handles callbacks between React Native and the native SDK.

const eventEmitter = useMemo(() => {
  return new NativeEventEmitter(VisxViewEmitter);
}, [VisxViewEmitter]);

Calling and Rendering an Interstitial Ad

Next, use the loadInterstitial method to make an ad call to request an ad.

{() => loadInterstitial('123456', 'domain-of-you-app-ads-txt.com')}

Once the interstitial is ready, the CALLBACK_ON_AD_LOADING_FINISHED event will inform you that it’s ready to be displayed and with displayInterstitial, you can finally display it.

  eventEmitter.addListener(VISX_EVENT.CALLBACK_ON_AD_LOADING_FINISHED, (event) => {
    console.log('RN VIS.X: ' + event);
    {() => displayInterstitial()}
  });

If you want to call ad hoc interstitials, that will automatically render interstitials if VIS.X® has an ad, you can use loadAndDisplayInterstitial as a convenience method. Please note, that in this case no VISX_EVENT will be triggered.

  {() => loadAndDisplayInterstitial('123456', 'domain-of-you-app-ads-txt.com')}

Adding Background Color

The default background color of interstitials is transparent with a slight opaque for visual separation from the content. If you need an opaque background, make sure to set up the color before rendering the ad, using a HEX Color as a third parameter in your loadInterstitial method.

{() => loadInterstitial('123456', 'domain-of-you-app-ads-txt.com', "#000000")}

Your interstitial placement is fully set up and ready for testing.