Native Ads

Native ads are ad assets presented using UI components that match your app’s look and feel. In React Native, a loaded native ad is represented by NativeAdContent.

Native Ad loading in React Native is handled through NativeAdLoader from react-native-cas:

import {
  NativeAdLoader,
  NativeAdContent,
  AdChoicesPlacement,
  AdError,
  AdContentInfo,
} from 'react-native-cas';

Add ad event listeners

Subscribe to loader events before requesting ads.

import { useEffect } from 'react';
import { 
  NativeAdLoader, 
  type NativeAdContent, 
  type AdError, 
  type AdContentInfo 
} from 'react-native-cas';

useEffect(() => {
  const unsubLoaded = NativeAdLoader.addAdLoadedEventListener((ad: NativeAdContent) => {
    console.log('Native Ad loaded', ad);
  });

  const unsubFailedToLoad = NativeAdLoader.addAdFailedToLoadEventListener((error: AdError) => {
    console.log('Native Ad failed to load', error);
  });

  const unsubImpression = NativeAdLoader.addAdImpressionEventListener((info: AdContentInfo) => {
    console.log('Native Ad impression', info);
  });

  const unsubClicked = NativeAdLoader.addAdClickedEventListener(() => {
    console.log('Native Ad clicked');
  });

  const unsubFailedToShow = NativeAdLoader.addAdFailedToShowEventListener((error: AdError) => {
    console.log('Native Ad failed to show', error);
  });

  return () => {
    unsubLoaded();
    unsubFailedToLoad();
    unsubImpression();
    unsubClicked();
    unsubFailedToShow();
  };
}, []);

Load ad content

Load one Native Ad content using loadAd(). A successfully loaded ad is delivered through AdLoadedEventListener.

const [nativeAd, setNativeAd] = useState<NativeAdContent | null>(null);

useEffect(() => {
  const unsubLoaded = NativeAdLoader.addAdLoadedEventListener((ad: NativeAdContent) => {
    setNativeAd(prev => {
      prev?.destroy();
      return ad;
    });
  });

  NativeAdLoader.loadAd();

  return () => {
    unsubLoaded();
    setNativeAd(prev => {
      prev?.destroy();
      return null;
    });
  };
}, []);

Load multiple ads (optional)

Request multiple native ads by passing a larger number to loadAds. Each loaded ad will be delivered via AdLoadedEventListener (potentially multiple times).

const [queue, setQueue] = useState<NativeAdContent[]>([]);

useEffect(() => {
  const unsubLoaded = NativeAdLoader.addAdLoadedEventListener((ad: NativeAdContent) => {
    setQueue(prev => [...prev, ad]);
  });

  NativeAdLoader.loadAds(3);

  return () => {
    unsubLoaded();
    setQueue(prev => {
      prev.forEach(ad => ad.destroy());
      return [];
    });
  };
}, []);

Autoload Ad mode

The NativeAdLoader does not have an autoload ad mode like other ad formats, so you need to implement error handling and ad reloading manually.

Ad Loader options

You can configure optional loader parameters:

StartVideoMuted

Controls whether native video content starts muted. Muted by default.

NativeAdLoader.setStartVideoMuted(true);

AdChoicesPlacement

Preferred placement for the AdChoices icon inside your native ad view. Leave space in your preferred corner of your native ad view for the automatically inserted AdChoices logo. Available values: TOP_LEFT, TOP_RIGHT, BOTTOM_RIGHT, BOTTOM_LEFT.

NativeAdLoader.setAdChoicesPlacement(AdChoicesPlacement.TOP_RIGHT);

By default the AdChoices icon position is set to the top right. An AdChoices overlay can be added by the SDK if NativeAdView.AdChoices not used.

Validate Ad Content (Optional)

Native ads can be preloaded and cached to reduce latency when displaying ads to users. However, these ads have a limited lifespan and may expire after a certain period. To ensure a seamless user experience, you should validate the ad content before displaying it.

Use the NativeAdContent.isExpired method to check if the ad has expired. If you attempt to display an expired ad, it will trigger an AdFailedToShowEventListener.

const isAdExpired = await ad.isExpired();
if (isAdExpired) {
  NativeAdLoader.loadAd();
  return;
}

If you display the ad immediately in AdLoadedEventListener, there's no need to check its validity, as it is guaranteed to be fresh at that moment.

Display ad content

Native ad content is displayed using NativeAdView. There are two approaches:

• Native Ad templates is quickest way to display native ads (render NativeAdView without children).
• Manual Native Ad is fully custom layout using asset components inside NativeAdView.

Release ad resources

Always release a loaded native ad when it is no longer displayed.

nativeAd.destroy();

You can also validate an ad before displaying it:

const expired = await nativeAd.isExpired();
if (expired) nativeAd.destroy();

Samples

• Native ad example
• Native ad template size example