Native

The native ads are a kind of ad that can be shown using the same visual style like the rest of the app, which allows a natural and non-intrusive integration with the user interface.

Unlike the other formats, the ad view is defined natively on each platform and the SDK fills it with the assets of the ad, no matter which demand source has filled it. React Native then displays that view through the WortiseNativeAdView component.

Register a factory

Each ad view is provided by a factory that is registered natively with an identifier, which is later used from JavaScript to display the ads.

Android

First, create a layout file (for example native_ad.xml) where each view that will show an asset of the ad has an identifier, and then implement the WortiseNativeAdViewFactory interface:

package com.example.app

import android.content.Context
import com.wortise.ads.natives.NativeAdView
import com.wortise.ads.natives.NativeAdViewBinder
import com.wortise.ads.react.WortiseNativeAdViewFactory

class MyNativeAdViewFactory(private val context: Context) : WortiseNativeAdViewFactory {

    private val binder = NativeAdViewBinder.Builder(R.layout.native_ad)
        .setAdvertiserTextViewId(R.id.ad_advertiser)
        .setBodyTextViewId(R.id.ad_body)
        .setCallToActionButtonId(R.id.ad_call_to_action)
        .setHeadlineTextViewId(R.id.ad_headline)
        .setIconImageViewId(R.id.ad_app_icon)
        .setMediaContentViewId(R.id.ad_media)
        .setPriceTextViewId(R.id.ad_price)
        .setRatingContentViewId(R.id.ad_rating)
        .setStoreTextViewId(R.id.ad_store)
        .build()

    override fun createNativeAdView() = NativeAdView(context, binder)
}

Caution

The view that shows the media content must be at least 120x120dp. Smaller sizes make the ad ineligible for video demand, which reduces the revenue of the ad unit.

Then, register the factory in the MainApplication class:

import com.wortise.ads.react.WortiseNativeAds

class MainApplication : Application(), ReactApplication {

    override fun onCreate() {
        super.onCreate()
        ...
        WortiseNativeAds.registerFactory("my-factory", MyNativeAdViewFactory(this))
    }
}

iOS

Create the view as a subclass of WANativeAdView, either by code or with a XIB file, connecting the outlets of the assets that the design displays. Then, implement the factory:

import WortiseSDK
import RNWortiseSdk

class MyNativeAdViewFactory: WortiseNativeAdViewFactory {

    func createNativeAdView() -> WANativeAdView {
        return NativeAdView(frame: .zero)
    }
}

Caution

The view that shows the media content must be at least 120x120pt, and it has no intrinsic size, so it needs an explicit height (or an aspect ratio) in the layout constraints.

Then, register the factory in the AppDelegate class:

func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
    WortiseNativeAds.registerFactory("my-factory", factory: MyNativeAdViewFactory())

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}

Note

The identifier used to register the factory must be the same on both platforms, since it is the one that will be passed from JavaScript.

Integration

Once the factories are registered, the ads are requested with the WortiseNativeAd class and displayed with the WortiseNativeAdView component:

import { WortiseNativeAd, WortiseNativeAdView } from '@wortise/react-native-sdk';

/* ... */

const [nativeAd, setNativeAd] = useState(null);

const loadNative = () => {
  if (nativeAd) {
    nativeAd.destroy();
    setNativeAd(null);
  }

  WortiseNativeAd.createForAdRequest('Wortise Ad Unit ID')
    .then((ad) => {
      ad.addEventListener('onNativeClicked', () => {
        // Invoked when the ad has been clicked
      });

      ad.addEventListener('onNativeImpression', () => {
        // Invoked when the ad has generated an impression
      });

      ad.addEventListener('onNativeRevenuePaid', (data) => {
        // Invoked when the ad has generated revenue
      });

      setNativeAd(ad);
    })
    .catch((error) => {
      // Invoked when the ad could not be loaded
      // (because of an error or no fill)
    });
};

return (
  <View style={styles.container}>
    <Button onPress={loadNative} title="Load Native" />
    {nativeAd && (
      <WortiseNativeAdView
        factoryId="my-factory"
        nativeAd={nativeAd}
        style={{ height: 300, width: '100%' }}
      />
    )}
  </View>
);

Caution

The ad must be destroyed, by calling its destroy() method, when it is no longer needed.

Ad assets

The WortiseNativeAd instance exposes the assets of the ad, which can be used to display them with your own components:

Property	Type	Description
advertiser	string?	Name of the advertiser
body	string?	Description of the ad
callToAction	string?	Text of the call to action
headline	string?	Headline of the ad
icon	WortiseNativeAdImage?	Icon of the ad
images	WortiseNativeAdImage[]?	Images of the ad
mediaContent	WortiseNativeMediaContent?	Media content of the ad
price	string?	Price of the promoted product
rating	number?	Rating of the promoted product
store	string?	Store of the promoted product

Request parameters

The createForAdRequest method also accepts the request parameters, in the same way as the rest of the formats:

WortiseNativeAd.createForAdRequest('Wortise Ad Unit ID', { agent: 'your agent' });