react-native-yieldlove
TypeScript icon, indicating that this package has built-in type declarations

2.2.0 • Public • Published

react-native-yieldlove

Yieldlove SDK for React Native

Installation

Using npm

$ npm install react-native-yieldlove --save

Using yarn

$ yarn add react-native-yieldlove

Configuring

react-native >= 0.60.0

iOS

The package is automatically linked when building the app. All you need to do is:

$ cd ios && pod install

Android

Add our ad-integration SDK into your app's build.gradle file:

allprojects {
	repositories {
	  ...
		maven { url 'https://slabs-yieldlove-ad-integration.s3.eu-central-1.amazonaws.com/android' }
	}
}

Usage

Contact to your account manager to obtain your application name (APPLICATION_NAME) and call strings (INTERSTITIAL_CALL_STRING and BANNER_CALL_STRING). Each call string represents a single slot.

import { Yieldlove, YieldloveBannerAd } from 'react-native-yieldlove';

// before using any other method from Yieldlove and/or rendering YieldloveBannerAd you have to set the application name
Yieldlove.setApplicationName(APPLICATION_NAME);

// optional global custom targeting
Yieldlove.setCustomTargeting({fruit: 'apple', colour: 'pink'});

// optional global content url
Yieldlove.setContentUrl("https://www.example.com/content/global.html")

// loading & showing interstitial ad
Yieldlove.loadInterstitial({
  callString: INTERSTITIAL_CALL_STRING,
  options: {
    contentUrl: 'https://www.example.com/content/interstitial.html',
    customTargeting: {
      fruit: 'banana',
      day: 'saturday'
    }
  },
  onAdLoaded: () => {
    Yieldlove.showInterstitial().catch(error => console.log(error));
  }
});

// rendering banner ad
// ...
<YieldloveBannerAd
  callString={BANNER_CALL_STRING}
  options={{
    customTargeting: {
      fruit: 'orange',
      day: 'monday'
    },
    contentUrl: 'https://www.example.com/content/banner.html'
  }}
  onAdLoaded={({nativeEvent}) => {
    // can use to change the style
    const { width, height } = nativeEvent;
    this.setState({ width, height });
  }}
/>

API

YieldloveBannerAd

Prop Mandatory Description
callString true Valid call string.
options false See AdOptions API below
onAdLoaded false Event handler function for "onAdLoaded" event. nativeEvent contains width: number and height: number of the loaded ad.
onAdFailedToLoad false Event handler function for "onAdFailedToLoad" event.
onAdOpened false Event handler function for "onAdOpened" event. Not supported on iOS.
onAdClosed false Event handler function for "onAdClosed" event. Not supported on iOS.
onAdClicked false Callback function for "onAdClicked" event.
onAdImpression false Callback function for "onAdImpression" event.
style false Style attributes for the view, as expected in a standard View.

Yieldlove

setApplicationName: (applicationName: string) => void

Set this at the start of your app to initialize Yieldlove SDK.

setDebug: (isDebugModeEnabled: boolean) => void

Enable debug logs from native libraries.

setCustomTargeting: (customTargeting: { [key: string]: string }) => void

Set global (default) custom targeting.

setContentUrl: (contentUrl: string) => void

Set global (default) content URL for targeting purposes.

clearConfigurationCache: () => void

For each application name, extended configuration is downloaded and cached on the user's device for a period of time. This function clears the cache. As a result, the next call to setApplicationName will always download a new copy of the configuration.

loadInterstitial: (options: LoadInterstitialParams, ) => void

Load interstitial ad. Available options:

Prop Mandatory Description
callString true Valid call string.
options false See AdOptions below
onAdLoaded false Callback function for "onAdLoaded" event.
onAdFailedToLoad false Callback function for "onAdFailedToLoad" event. Expects single argument object which contains code: string and message: string describing the error.

showInterstitial: () => Promise<void>

Present loaded interstitial ad. Can reject with an error if the ad could not be presented (e.g. when trying to call showInterstitial before ad was actually loaded).

AdOptions

Prop Mandatory Type Description
contentUrl false string Content URL for targeting purposes. Will override the global content URL.
customTargeting false { [key: string]: string } An object containing key-value pairs used for custom targeting. Will merge with global custom targeting. A key redefined here take precedence over the globally defined one.

Error Events

The nativeEvent for the onAdFailedToLoad event handler contains code: number and message: string describing the error. Any error means no ad was delivered and rendered.

See ErrorCode enum to see the current list of supported codes. More may be added in future releases.

ErrorEvent

The nativeEvent implements the following interface:

Name Type Description
code ErrorCode (number) Platform independent code that classifies the error
message string Message describing the error

ErrorCode enum

Name Value (number) Description
UNKNOWN 1 The error is unknown or unclassified
AD_SERVER_INTERNAL_REQUEST 2 Something happened internally; for instance, an invalid response was received from the ad server.
AD_SERVER_INVALID_REQUEST 3 The ad request was invalid; for instance, the ad unit ID was incorrect.
AD_SERVER_NETWORK_ERROR 4 The ad request was unsuccessful due to network connectivity.
AD_SERVER_NO_FILL 5 The ad request was successful, but no ad was returned due to lack of ad inventory.

Testing ads

Please contact your account manager to get your test configuration.

Troubleshooting

Android

DexArchiveMergerException

If you get an error like this:

D8: Cannot fit requested classes in a single dex file (# methods: 68776 > 65536)
com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:
The number of method references in a .dex file cannot exceed 64K.
Learn how to resolve this issue at https://developer.android.com/tools/building/multidex.html

adding multiDexEnabled true to the defaultConfig in android/app/build.gradle should fix it:

android {
    ...

    defaultConfig {
        ...
        multiDexEnabled true
   }
   ...
}

iOS

The Google Mobile Ads SDK was initialized without an application ID

If you receive a crash on application start with the message The Google Mobile Ads SDK was initialized without an application ID. You may need to update your Info.plist. The log message should contain a URL you can visit for instructions. If not, visit Get Started: Update your Info.plist.

Linking issues

If you have issues linking your project check out this StackOverflow thread on how to fix it.

Having trouble running Cocoapods on Apple's Mac M1 architecture? See How to run CocoaPods on Apple Silicon (M1)

If you don't want use Cocoapods, you can always link the library manually.

react-native <= 0.59.x

For both iOS and Android, try:

$ react-native link react-native-yieldlove
$ cd ios && pod install

Package Sidebar

Install

npm i react-native-yieldlove

Weekly Downloads

54

Version

2.2.0

License

MIT

Unpacked Size

98.5 kB

Total Files

69

Last publish

Collaborators

  • docech
  • samshankland
  • muppy
  • markustessmann
  • yieldlove.com
  • sewerynzalupka