ironSource React-Native Plugin

A bridge for ironSource SDK

Getting Started

Prerequisites

Please refer to the ReactNative official page for environment setup.

Installation

npm install ironsource-mediation
# or
yarn add ironsource-mediation

Platform Setup

Android

Follow ironSource Knowledge Center Android integration guide for required settings.

Gradle Dependencies Included

ironSource SDK

Gradle Dependencies Required

Play Services dependencies must be added to PROJECT_ROOT/android/app/build.gradle.

// PROJECT_ROOT/android/app/build.gradle
dependencies {
  implementation 'com.google.android.gms:play-services-appset:16.0.2'
  implementation 'com.google.android.gms:play-services-ads-identifier:18.0.1'
  implementation 'com.google.android.gms:play-services-basement:18.3.0'
}

iOS

Follow ironSource Knowledge Center iOS integration guide for required settings.

Pods Included

ironSource SDK

Additional Requirements

SKAdNetwork Support

Add the SKAN IDs of your ad networks on your PROJECT_ROOT/ios/PROJECT_NAME/info.plist
Get the list of IDs using our SKAdNetwork IDs Manager

<key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>su67r6k2v3.skadnetwork</string>
  </dict>
  ...
</array>

App Transport Security Settings

Set NSAllowsArbitraryLoads: true on info.plist to allow http as some mediated networks require http calls. (Note: ironSource Network calls are all encrypted.)

Note:

Make sure that your info.plist does not contain other ATS exceptions such as NSAllowsArbitraryLoadsInWebContent.

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

App Tracking Transparency (ATT) Prompt

Implement the ATT prompt to request user authorization for app-related data.

Note:

This is not part of ironSource SDK but a bridge for AppTrackingTransparency ATTrackingManager.
You have to add NSUserTrackingUsageDescription to your info.plist if you intend to call this API.

async function checkATT() {
  if (Platform.OS !== 'ios') return

  const currentStatus = await ATTrackingManager.getTrackingAuthorizationStatus()
  console.log(`ATTStatus: ${currentStatus}`)

  if (currentStatus === ATTStatus.NotDetermined) {
    const returnedStatus =
      await ATTrackingManager.requestTrackingAuthorization()
    console.log(`ATTStatus returned: ${returnedStatus}`)
  }
}

Read more about Apple's ATT and user privacy guideline here.

General Usage

Implement Listeners

Note:

Only one listener can be registered. When setListener is called, the listener previously registered to the event will be removed.

LevelPlayRewardedVideoListener

import { IronSource } from 'ironsource-mediation'

function SomeComponent() {
  useEffect(() => {
    const listener: LevelPlayRewardedVideoListener = {
      onAdAvailable: (adInfo: IronSourceAdInfo) => {},
      onAdUnavailable: () => {},
      onAdOpened: (adInfo: IronSourceAdInfo) => {},
      onAdClosed: (adInfo: IronSourceAdInfo) => {},
      onAdRewarded: (placement: IronSourceRVPlacement, adInfo: IronSourceAdInfo) => {},
      onAdShowFailed: (error: IronSourceError, adInfo: IronSourceAdInfo) => {},
      onAdClicked: (placement: IronSourceRVPlacement, adInfo: IronSourceAdInfo) => {},
    };
    IronSource.setLevelPlayRewardedVideoListener(listener);
  }, [])

  // return some view
}

LevelPlayInterstitialAdListener

function SomeComponent() {
  useEffect(() => {
    const listener: LevelPlayInterstitialAdListener = {
      onAdLoaded: (adInfo: LevelPlayAdInfo) => {},
      onAdLoadFailed: (error: LevelPlayAdError) => {},
      onAdInfoChanged: (adInfo: LevelPlayAdInfo) => {},
      onAdDisplayed: (adInfo: LevelPlayAdInfo) => {},
      onAdDisplayFailed: (error: LevelPlayAdError, adInfo: LevelPlayAdInfo) => {},
      onAdClicked: (adInfo: LevelPlayAdInfo) => {},
      onAdClosed: (adInfo: LevelPlayAdInfo) => {}
    }
    // Use listener ...
  }, [])

  // return some view
}

LevelPlayBannerAdViewListener

function SomeComponent() {
  useEffect(() => {
    const listener: LevelPlayBannerAdViewListener = {
        onAdLoaded: (adInfo: LevelPlayAdInfo) => {},
        onAdLoadFailed: (error: LevelPlayAdError) => {},
        onAdDisplayed: (adInfo: LevelPlayAdInfo) => {},
        onAdDisplayFailed: (adInfo: LevelPlayAdInfo, error: LevelPlayAdError) => {},
        onAdClicked: (adInfo: LevelPlayAdInfo) => {},
        onAdExpanded: (adInfo: LevelPlayAdInfo) => {},
        onAdCollapsed: (adInfo: LevelPlayAdInfo) => {},
        onAdLeftApplication: (adInfo: LevelPlayAdInfo) => {},
      };
    // Use listener ...  
  }, [])

  // return some view
}

LevelPlayNativeAdListener

import { IronSource } from 'ironsource-mediation'

function SomeComponent() {
  useEffect(() => {
    const listener: LevelPlayNativeAdListener = {
      onAdLoaded: (nativeAd: LevelPlayNativeAd, adInfo: IronSourceAdInfo) => {},
      onAdLoadFailed: (nativeAd: LevelPlayNativeAd, error: IronSourceError) => {},
      onAdClicked: (nativeAd: LevelPlayNativeAd, adInfo: IronSourceAdInfo) => {},
      onAdImpression: (nativeAd: LevelPlayNativeAd, adInfo: IronSourceAdInfo) => {},
    };
    // Add the listener to the LevelPlayNativeAd instance...
  }, [])

  // return some view
}

Initialize the plugin

async function initLevelPlay() {
  let initRequest: LevelPlayInitRequest = LevelPlayInitRequest.builder(APP_KEY)
      .withLegacyAdFormats([AdFormat.BANNER, AdFormat.INTERSTITIAL, AdFormat.REWARDED, AdFormat.NATIVE_AD])
      .build();
    const initListener: LevelPlayInitListener = {
      onInitFailed: (error: LevelPlayInitError) => {},
      onInitSuccess: (configuration: LevelPlayConfiguration) => {}
    }
    await LevelPlay.init(initRequest, initListener)
}

Show Ads Example

LevelPlayRewardedVideo

const showRewardedVideo = async () => {
  if (await IronSource.isRewardedVideoAvailable()) {
    IronSource.showRewardedVideo();
  }
}

LevelPlayInterstitial

const SomeComponent: React.FC = () => {
  const [interstitialAd, setInterstitialAd] = useState<LevelPlayInterstitialAd | null>()

  useEffect(() => {
    const levelPlayInterstitialAd = new LevelPlayInterstitialAd([YOUR_AD_UNIT]);
    levelPlayInterstitialAd.setListener([YOUR_LISTENER]);
    setInterstitialAd(levelPlayInterstitialAd);
  }, []);

  const loadAd = async () => {
    try {
      await interstitialAd?.loadAd();
    } catch (error) {
      console.error('Failed to load ad:', error);
    }
  };

  const showAd = async () => {
    if (await interstitialAd?.isAdReady()) {
        await interstitialAd!.showAd([YOUR_PLACEMENT]);
    }
  };

  /// Rest of component, return some view ...

LevelPlayBanner

const SomeComponent: React.FC = () => {
  // State to manage the reference to the banner ad view
  const bannerAdViewRef = useRef<LevelPlayBannerAdViewMethods>(null);

  // Load ad
  const loadAd = useCallback(() => {
    bannerAdViewRef.current?.loadAd();
  }, []);

  const destroyAdAndCreateNew = useCallback(() => {
    bannerAdViewRef.current?.destroy();
    setAdKey((prevKey) => prevKey + 1);
  }, []);

  const pauseAutoRefresh = useCallback(() => {
    bannerAdViewRef.current?.pauseAutoRefresh();
  }, []);

  const resumeAutoRefresh = useCallback(() => {
    bannerAdViewRef.current?.resumeAutoRefresh();
  }, []);

  return (
    <View>
      <Text style={[styles.h2, styles.alignCenter]}>
        Banner Ad View
      </Text>
      <View style={styles.horizontalSpaceBetween}>
        <HighlightButton buttonText={'Load Ad'} onPress={loadAd} />
        <HighlightButton buttonText={'Destroy Ad'} onPress={destroyAdAndCreateNew} />
      </View>
      <View style={styles.horizontalSpaceBetween}>
        <HighlightButton buttonText={'Pause Auto Refresh'} onPress={pauseAutoRefresh} />
        <HighlightButton buttonText={'Resume Auto Refresh'} onPress={resumeAutoRefresh} />
      </View>
      <LevelPlayBannerAdView 
        ref={bannerAdViewRef}
        adUnitId={[YOUR_AD_UNIT]}
        adSize={[YOUR_LEVEL_PLAY_AD_SIZE]}
        placementName={[YOUR_PLACEMENT]}
        listener={[YOUR_LISTENER]}
        style={{width: adSize.width, height: adSize.height, alignSelf: 'center'}} // Use the values from the LevelPlayAdSize instance
      />
    </View>
  );
};

LevelPlayNativeAd

export const LevelPlayNativeAdSection = () => {
  const [nativeAd, setNativeAd] = useState<LevelPlayNativeAd | null>()
  const [adKey, setAdKey] = useState<number>(0);

  // LevelPlay NativeAd listener
  const listener: LevelPlayNativeAdListener = {
    onAdLoaded: (nativeAd: LevelPlayNativeAd, adInfo: IronSourceAdInfo) => {
      setNativeAd(nativeAd);
    },
    onAdLoadFailed: (nativeAd: LevelPlayNativeAd, error: IronSourceError) => {},
    onAdClicked: (nativeAd: LevelPlayNativeAd, adInfo: IronSourceAdInfo) => {},
    onAdImpression: (nativeAd: LevelPlayNativeAd, adInfo: IronSourceAdInfo) => {},
  };

  useEffect(() => {
    createNativeAd();
  }, []);

  // Initialize native ad object
  const createNativeAd = useCallback(() => {
    const levelPlayNativeAd = LevelPlayNativeAd.builder()
      .withPlacement('DefaultNativeAd') // Your placement name string
      .withListener(listener) // Your level play native ad listener
      .build();
    setNativeAd(levelPlayNativeAd);
  }, [])

  // Load native ad
  const loadAd = useCallback(() => {
    nativeAd?.loadAd();
  }, [nativeAd]);

  // Rest of the class

Refer to the example app for the more detailed implementation sample.

Note:

Make sure to read the official documents at ironSource Knowledge Center for proper usage.
Some config functions must be called before IronSource.init.
LevelPlayBannerListener is deprecated - Please use LevelPlayBannerAdViewListener with LevelPlayBannerAdView instead.

Manual Load RV

On ironSource Mediation, Rewarded Video Load is automatically requested upon init
To enable Rewarded Video Manual Load, call IronSource.setLevelPlayRewardedManualVideo([YOUR_LISTENER]) before init
Set the manual load rewarded video event listeners before calling IronSource.loadRewardedVideo()

const listener: LevelPlayRewardedVideoManualListener = {
  onAdOpened: (adInfo: IronSourceAdInfo) => {},
  onAdClosed: (adInfo: IronSourceAdInfo) => {},
  onAdRewarded: (placement: IronSourceRVPlacement, adInfo: IronSourceAdInfo) => {},
  onAdShowFailed: (error: IronSourceError, adInfo: IronSourceAdInfo) => {},
  onAdClicked: (placement: IronSourceRVPlacement, adInfo: IronSourceAdInfo) => {},
  onAdReady: (adInfo: IronSourceAdInfo) => {},
  onAdLoadFailed: () => {},
};
IronSource.setLevelPlayRewardedVideoManualListener(listener);

const loadRewardedVideo = async () => {
  try {
    await IronSource.loadRewardedVideo()
  } catch (e) {
    console.error(e)
  }
}

Functions Not Supported

Some functions are not supported.

initISDemandOnly
setLanguage
SegmentListener: onSegmentReceived
showISDemandOnlyRewardedVideo
loadISDemandOnlyRewardedVideo
isISDemandOnlyRewardedVideoAvailable
loadISDemandOnlyInterstitial
showISDemandOnlyInterstitial
isISDemandOnlyInterstitialReady

Mediation

Many networks require certain additional configuration.
Make sure to use compatible Adapter versions.

Android

Make sure to follow ironSource Knowledge Center document for additional setup.

Add adapter/sdk dependencies to PROJECT_ROOT/android/app/build.gradle
Add required settings to PROJECT_ROOT/android/app/src/main/AndroidManifest.xml

iOS

Make sure to follow ironSource Knowledge Center document for additional setup.

Add adapter/sdk pod dependencies to PROJECT_ROOT/ios/Podfile
Add required settings to PROJECT_ROOT/ios/APP_NAME/info.plist

Example App

Almost all the features are implemented on the example app. We recommend running it first to see how it works.

# The plugin project root
cd ironsource-mediation

# Install dependencies
npm install
# or
yarn install

# The example project
cd example

npm install
# or
yarn install

# Run the Android app
npm run android
# or
yarn run android

# Run the iOS app
npm run ios
# or
yarn run ios

Version history

You can find a summary of the ironSouce SDK version history here.

Contact US

For any question please contact us here.

License

https://developers.is.com/ironsource-mobile/general/ironsource-platform-online-terms-conditions/

ironsource-mediation

ironSource React-Native Plugin

Getting Started

Prerequisites

Installation

Platform Setup

Android

Gradle Dependencies Included

Gradle Dependencies Required

iOS

Pods Included

Additional Requirements

SKAdNetwork Support

App Transport Security Settings

App Tracking Transparency (ATT) Prompt

General Usage

Implement Listeners

LevelPlayRewardedVideoListener

LevelPlayInterstitialAdListener

LevelPlayBannerAdViewListener

LevelPlayNativeAdListener

Initialize the plugin

Show Ads Example

LevelPlayRewardedVideo

LevelPlayInterstitial

LevelPlayBanner

LevelPlayNativeAd

Manual Load RV

Functions Not Supported

Mediation

Android

iOS

Example App

Version history

Contact US

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads