Ad Format Integration

Here's how to integrate the supported ad formats on React Native. Each ad format has its own unique characteristics and implementation details.

App Open Ads

App Open Ads

App open ads appear when the user opens your app or switches back to your app. They are displayed on the loading or splash screen.

Implementation

import { NativeModules, NativeEventEmitter } from 'react-native';
const { Yodo1MASAds } = NativeModules;

const handleEvents = ({value}) => {
  switch (value) {
    case 'onAppOpenAdLoaded':
      // Handle the event when the ad is loaded
      break;
    case 'onAppOpenAdOpened':
      // Handle the event when the ad is opened
      break;
    case 'onAppOpenAdClosed':
      // Handle the event when the ad is closed
      break;
    case 'onAppOpenAdFailedToLoad':
      // Ad failed to load, let's try again after a delay
      break;
    case 'onAppOpenAdFailedToOpen':
      // Ad failed to open, let's try again after a delay
      break;
  }
};

// Register event listeners
const eventEmitter = new NativeEventEmitter(Yodo1MASAds);
const eventListener = eventEmitter.addListener('adEvent', handleEvents);

// Clean up on component unmount
useEffect(() => {
  return () => {
    eventListener.remove();
  };
}, []);

Rewarded Video

Rewarded Video Ads

Rewarded video ads enable users to earn in-app rewards by watching video ads.

Implementation

import { NativeModules, NativeEventEmitter } from 'react-native';
const { Yodo1MASAds } = NativeModules;

const handleEvents = ({value}) => {
  switch (value) {
    case 'onRewardAdLoaded':
      // Handle the event when the ad is loaded
      break;
    case 'onRewardAdOpened':
      // Handle the event when the ad is opened
      break;
    case 'onRewardAdClosed':
      // Handle the event when the ad is closed
      break;
    case 'onRewardAdEarned':
      // Handle when the user earns the reward
      break;
    case 'onRewardAdFailedToLoad':
      // Ad failed to load, let's try again after a delay
      break;
    case 'onRewardAdFailedToOpen':
      // Ad failed to open, let's try again after a delay
      break;
  }
};

// Register event listeners
const eventEmitter = new NativeEventEmitter(Yodo1MASAds);
const eventListener = eventEmitter.addListener('adEvent', handleEvents);

// Clean up on component unmount
useEffect(() => {
  return () => {
    eventListener.remove();
  };
}, []);

Interstitial

Interstitial Ads

Interstitial ads are full-screen ads that appear at natural transition points in your app.

Implementation

import { NativeModules, NativeEventEmitter } from 'react-native';
const { Yodo1MASAds } = NativeModules;

const handleEvents = ({value}) => {
  switch (value) {
    case 'onInterstitialAdLoaded':
      // Handle the event when the ad is loaded
      break;
    case 'onInterstitialAdOpened':
      // Handle the event when the ad is opened
      break;
    case 'onInterstitialAdClosed':
      // Handle the event when the ad is closed
      break;
    case 'onInterstitialAdFailedToLoad':
      // Ad failed to load, let's try again after a delay
      break;
    case 'onInterstitialAdFailedToOpen':
      // Ad failed to open, let's try again after a delay
      break;
  }
};

// Register event listeners
const eventEmitter = new NativeEventEmitter(Yodo1MASAds);
const eventListener = eventEmitter.addListener('adEvent', handleEvents);

// Clean up on component unmount
useEffect(() => {
  return () => {
    eventListener.remove();
  };
}, []);

Banner

Banner Ads

Banner ads are rectangular ads that occupy a portion of your app's layout.

Implementation

import { NativeModules, NativeEventEmitter, findNodeHandle } from 'react-native';
const { Yodo1MASAds } = NativeModules;

// Show banner ads
const showBanner = () => {
  const reactTag = findNodeHandle(ref);
  Yodo1MASAds.showBannerAds(reactTag);
};

const handleEvents = ({value}) => {
  switch (value) {
    case 'onBannerAdLoaded':
      // Handle the event when the ad is loaded
      break;
    case 'onBannerAdOpened':
      // Handle the event when the ad is opened
      break;
    case 'onBannerAdClosed':
      // Handle the event when the ad is closed
      break;
    case 'onBannerAdFailedToLoad':
      // Ad failed to load, let's try again after a delay
      break;
    case 'onBannerAdFailedToOpen':
      // Ad failed to open, let's try again after a delay
      break;
  }
};

// Register event listeners
const eventEmitter = new NativeEventEmitter(Yodo1MASAds);
const eventListener = eventEmitter.addListener('adEvent', handleEvents);

// Clean up on component unmount
useEffect(() => {
  return () => {
    eventListener.remove();
  };
}, []);

Native

Native Ads

Native ads allow you to customize the ad experience by blending it directly into your app's UI.

Implementation

import { NativeModules, NativeEventEmitter, findNodeHandle } from 'react-native';
const { Yodo1MASAds } = NativeModules;

// Show native ads
const showNative = () => {
  const reactTag = findNodeHandle(ref);
  Yodo1MASAds.showNativeAds(reactTag);
};

const handleEvents = ({value}) => {
  switch (value) {
    case 'onNativeAdLoaded':
      // Handle the event when the ad is loaded
      break;
    case 'onNativeAdFailedToLoad':
      // Ad failed to load, let's try again after a delay
      break;
  }
};

// Register event listeners
const eventEmitter = new NativeEventEmitter(Yodo1MASAds);
const eventListener = eventEmitter.addListener('adEvent', handleEvents);

// Clean up on component unmount
useEffect(() => {
  return () => {
    eventListener.remove();
  };
}, []);

Best Practices

1. Event Cleanup: Always remove event listeners when components unmount to prevent memory leaks.
2. Error Handling: Implement proper error handling for ad loading failures.
3. Loading States: Manage loading states to provide better user experience.
4. Component Lifecycle: Handle component lifecycle properly with React hooks.
5. TypeScript: Use TypeScript for better type safety and development experience.