@javascriptcommon/react-native-google-mobile-ads 16.3.3

package/src/RewardedAdEventType.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2016-present Invertase Limited & Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this library except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+export enum RewardedAdEventType {
+  /**
+   * An event fired when a rewarded ad has loaded.
+   *
+   * This type differs from `AdEventType.LOADED` as when a rewarded ad is loaded,
+   * an additional data payload is provided to the event handler containing the ad reward
+   * (assuming the user earns the reward).
+   *
+   * The reward contains a `type` and `amount`.
+   *
+   * #### Example
+   *
+   * ```js
+   * import { RewardedAdEventType } from 'react-native-google-mobile-ads';
+   *
+   * rewardedAd.addEventListener(RewardedAdEventType.LOADED, (reward) => {
+   *   console.log(`Rewarded Ad loaded with ${data.amount} ${data.type} as reward`);
+   *   // E.g. "Rewarded Ad loaded with 50 coins as reward"
+   *   rewardedAd.show();
+   * });
+   * ```
+   */
+  LOADED = 'rewarded_loaded',
+
+  /**
+   * An event fired when the user earned the reward for the video. If the user does not earn a reward,
+   * the `AdEventType.CLOSED` event will be fired with no rewarded event.
+   *
+   * The reward contains a `type` and `amount`.
+   *
+   * #### Example
+   *
+   * ```js
+   * import { RewardedAdEventType } from 'react-native-google-mobile-ads';
+   *
+   * rewardedAd.addEventListener(RewardedAdEventType.EARNED_REWARD, (reward) => {
+   *   console.log(`User earned ${data.amount} ${data.type}`);
+   *   // E.g. "User earned 50 coins"
+   * });
+   * ```
+   */
+  EARNED_REWARD = 'rewarded_earned_reward',
+}

package/src/TestIds.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2016-present Invertase Limited & Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this library except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { Platform } from 'react-native';
+
+export const TestIds = {
+  APP_OPEN: '',
+  ADAPTIVE_BANNER: '',
+  BANNER: '',
+  INTERSTITIAL: '',
+  REWARDED: '',
+  REWARDED_INTERSTITIAL: '',
+  NATIVE: '',
+  NATIVE_VIDEO: '',
+  GAM_APP_OPEN: '/21775744923/example/app-open',
+  GAM_BANNER: '/21775744923/example/fixed-size-banner',
+  GAM_INTERSTITIAL: '/21775744923/example/interstitial',
+  GAM_REWARDED: '/21775744923/example/rewarded',
+  GAM_REWARDED_INTERSTITIAL: '/21775744923/example/rewarded-interstitial',
+  GAM_NATIVE: '/21775744923/example/native',
+  GAM_NATIVE_VIDEO: '/21775744923/example/native-video',
+  ...Platform.select({
+    android: {
+      APP_OPEN: 'ca-app-pub-3940256099942544/9257395921',
+      ADAPTIVE_BANNER: 'ca-app-pub-3940256099942544/9214589741',
+      BANNER: 'ca-app-pub-3940256099942544/6300978111',
+      INTERSTITIAL: 'ca-app-pub-3940256099942544/1033173712',
+      INTERSTITIAL_VIDEO: 'ca-app-pub-3940256099942544/8691691433',
+      REWARDED: 'ca-app-pub-3940256099942544/5224354917',
+      REWARDED_INTERSTITIAL: 'ca-app-pub-3940256099942544/5354046379',
+      NATIVE: 'ca-app-pub-3940256099942544/2247696110',
+      NATIVE_VIDEO: 'ca-app-pub-3940256099942544/1044960115',
+    },
+    ios: {
+      APP_OPEN: 'ca-app-pub-3940256099942544/5575463023',
+      ADAPTIVE_BANNER: 'ca-app-pub-3940256099942544/2435281174',
+      BANNER: 'ca-app-pub-3940256099942544/2934735716',
+      INTERSTITIAL: 'ca-app-pub-3940256099942544/4411468910',
+      INTERSTITIAL_VIDEO: 'ca-app-pub-3940256099942544/5135589807',
+      REWARDED: 'ca-app-pub-3940256099942544/1712485313',
+      REWARDED_INTERSTITIAL: 'ca-app-pub-3940256099942544/6978759866',
+      NATIVE: 'ca-app-pub-3940256099942544/3986624511',
+      NATIVE_VIDEO: 'ca-app-pub-3940256099942544/2521693316',
+    },
+  }),
+};

package/src/ads/AppOpenAd.ts

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2016-present Invertase Limited & Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this library except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { isString } from '../common';
+import { validateAdRequestOptions } from '../validateAdRequestOptions';
+import { MobileAd } from './MobileAd';
+import { AdEventType } from '../AdEventType';
+import { AdEventListener } from '../types/AdEventListener';
+import { AdEventsListener } from '../types/AdEventsListener';
+import { RequestOptions } from '../types/RequestOptions';
+import NativeAppOpenModule from '../specs/modules/NativeAppOpenModule';
+
+export class AppOpenAd extends MobileAd {
+  protected static _appOpenRequest = 0;
+
+  static createForAdRequest(adUnitId: string, requestOptions?: RequestOptions) {
+    if (!isString(adUnitId)) {
+      throw new Error("AppOpenAd.createForAdRequest(*) 'adUnitId' expected an string value.");
+    }
+
+    let options = {};
+    try {
+      options = validateAdRequestOptions(requestOptions);
+    } catch (e) {
+      if (e instanceof Error) {
+        throw new Error(`AppOpenAd.createForAdRequest(_, *) ${e.message}.`);
+      }
+    }
+
+    const requestId = AppOpenAd._appOpenRequest++;
+    return new AppOpenAd(
+      'app_open',
+      requestId,
+      adUnitId,
+      NativeAppOpenModule.appOpenLoad.bind(this),
+      NativeAppOpenModule.appOpenShow.bind(this),
+      options,
+    );
+  }
+
+  addAdEventsListener<T extends AdEventType>(listener: AdEventsListener<T>): () => void {
+    return this._addAdEventsListener(listener);
+  }
+
+  addAdEventListener<T extends AdEventType>(type: T, listener: AdEventListener<T>) {
+    return this._addAdEventListener(type, listener);
+  }
+}

package/src/ads/BannerAd.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2016-present Invertase Limited & Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this library except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import React, { createRef } from 'react';
+import { BannerAdProps } from '../types/BannerAdProps';
+import { BaseAd } from './BaseAd';
+import GoogleMobileAdsBannerView, {
+  Commands,
+} from '../specs/components/GoogleMobileAdsBannerViewNativeComponent';
+
+export class BannerAd extends React.Component<BannerAdProps> {
+  private ref = createRef<React.ComponentRef<typeof GoogleMobileAdsBannerView>>();
+
+  load() {
+    if (this.ref.current) {
+      Commands.load(this.ref.current);
+    }
+  }
+
+  render() {
+    return <BaseAd ref={this.ref} sizes={[this.props.size]} {...this.props} />;
+  }
+}

package/src/ads/BaseAd.tsx

@@ -0,0 +1,185 @@
+/*
+ * Copyright (c) 2016-present Invertase Limited & Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this library except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { DimensionValue, NativeSyntheticEvent, Platform } from 'react-native';
+import { isFunction } from '../common';
+import { RevenuePrecisions } from '../common/constants';
+import { NativeError } from '../internal/NativeError';
+import GoogleMobileAdsBannerView from '../specs/components/GoogleMobileAdsBannerViewNativeComponent';
+import type { NativeEvent } from '../specs/components/GoogleMobileAdsBannerViewNativeComponent';
+import { BannerAdSize, GAMBannerAdSize } from '../BannerAdSize';
+import { validateAdRequestOptions } from '../validateAdRequestOptions';
+import { GAMBannerAdProps } from '../types/BannerAdProps';
+import { debounce } from '../common/debounce';
+
+const sizeRegex = /([0-9]+)x([0-9]+)/;
+
+export const BaseAd = React.forwardRef<
+  React.ComponentRef<typeof GoogleMobileAdsBannerView>,
+  GAMBannerAdProps
+>(
+  (
+    { unitId, sizes, maxHeight, width, requestOptions, manualImpressionsEnabled, ...props },
+    ref,
+  ) => {
+    const [dimensions, setDimensions] = useState<(number | DimensionValue)[]>([0, 0]);
+
+    const debouncedSetDimensions = debounce(setDimensions, 100);
+
+    useEffect(() => {
+      if (!unitId) {
+        throw new Error("BannerAd: 'unitId' expected a valid string unit ID.");
+      }
+    }, [unitId]);
+
+    useEffect(() => {
+      if (
+        sizes.length === 0 ||
+        !sizes.every(
+          size => size in BannerAdSize || size in GAMBannerAdSize || sizeRegex.test(size),
+        )
+      ) {
+        throw new Error("BannerAd: 'size(s)' expected a valid BannerAdSize or custom size string.");
+      }
+    }, [sizes]);
+
+    const validatedRequestOptions = useMemo(() => {
+      if (requestOptions) {
+        try {
+          return validateAdRequestOptions(requestOptions);
+        } catch (e) {
+          if (e instanceof Error) {
+            throw new Error(`BannerAd: ${e.message}`);
+          }
+        }
+      }
+      return {};
+    }, [requestOptions]);
+
+    function onNativeEvent(event: NativeSyntheticEvent<NativeEvent>) {
+      const nativeEvent = event.nativeEvent as
+        | {
+            type: 'onAdLoaded' | 'onSizeChange';
+            width: number;
+            height: number;
+          }
+        | { type: 'onAdOpened' | 'onAdClosed' | 'onAdImpression' | 'onAdClicked' }
+        | {
+            type: 'onAdFailedToLoad';
+            code: string;
+            message: string;
+          }
+        | {
+            type: 'onAppEvent';
+            name: string;
+            data?: string;
+          }
+        | {
+            type: 'onPaid';
+            currency: string;
+            precision: RevenuePrecisions;
+            value: number;
+          };
+      const { type } = nativeEvent;
+
+      if (isFunction(props[type])) {
+        let eventHandler, eventPayload;
+        switch (type) {
+          case 'onAdLoaded':
+          case 'onSizeChange':
+            eventPayload = {
+              width: nativeEvent.width,
+              height: nativeEvent.height,
+            };
+            if ((eventHandler = props[type])) eventHandler(eventPayload);
+            break;
+          case 'onAdFailedToLoad':
+            eventPayload = NativeError.fromEvent(nativeEvent, 'googleMobileAds');
+            if ((eventHandler = props[type])) eventHandler(eventPayload);
+            break;
+          case 'onAppEvent':
+            eventPayload = {
+              name: nativeEvent.name,
+              data: nativeEvent.data,
+            };
+            if ((eventHandler = props[type])) eventHandler(eventPayload);
+            break;
+          case 'onPaid':
+            const handler = props[type];
+            if (handler) {
+              handler({
+                currency: nativeEvent.currency,
+                precision: nativeEvent.precision,
+                value: nativeEvent.value,
+              });
+            }
+            break;
+          default:
+            if ((eventHandler = props[type])) eventHandler();
+        }
+      }
+
+      if (type === 'onAdLoaded' || type === 'onSizeChange') {
+        const width = Math.ceil(nativeEvent.width);
+        const height = Math.ceil(nativeEvent.height);
+
+        if (width && height && JSON.stringify([width, height]) !== JSON.stringify(dimensions)) {
+          /**
+           * On Android, it seems the ad size is not always the definitive on the first onAdLoaded event.
+           * So if we change the size here with an incorrect value, then we relayout the ad on native side
+           * and it might cause an incorrect size to be set.
+           *
+           * To reproduce this issue, go to the example app, on the "GAMBanner Fluid" example
+           * and reload the ad several times
+           *
+           * on my low-end Samsung A10s, it always took less than 100ms in debug mode to get the correct size
+           * hence the 100ms debounce
+           */
+          if (sizes.includes(GAMBannerAdSize.FLUID) && Platform.OS === 'android') {
+            debouncedSetDimensions([width, height]);
+          } else {
+            setDimensions([width, height]);
+          }
+        }
+      }
+    }
+
+    const style = sizes.includes(GAMBannerAdSize.FLUID)
+      ? {
+          width: '100%' as DimensionValue,
+          height: dimensions[1],
+        }
+      : {
+          width: dimensions[0],
+          height: dimensions[1],
+        };
+
+    return (
+      <GoogleMobileAdsBannerView
+        ref={ref}
+        sizeConfig={{ sizes, maxHeight, width }}
+        style={style}
+        unitId={unitId}
+        request={JSON.stringify(validatedRequestOptions)}
+        manualImpressionsEnabled={!!manualImpressionsEnabled}
+        onNativeEvent={onNativeEvent}
+      />
+    );
+  },
+);
+BaseAd.displayName = 'BaseAd';

package/src/ads/GAMBannerAd.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2016-present Invertase Limited & Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this library except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import React, { createRef } from 'react';
+import { GAMBannerAdProps } from '../types/BannerAdProps';
+import { BaseAd } from './BaseAd';
+import GoogleMobileAdsBannerView, {
+  Commands,
+} from '../specs/components/GoogleMobileAdsBannerViewNativeComponent';
+
+export class GAMBannerAd extends React.Component<GAMBannerAdProps> {
+  private ref = createRef<React.ComponentRef<typeof GoogleMobileAdsBannerView>>();
+
+  recordManualImpression() {
+    if (this.ref.current) {
+      Commands.recordManualImpression(this.ref.current);
+    }
+  }
+
+  load() {
+    if (this.ref.current) {
+      Commands.load(this.ref.current);
+    }
+  }
+
+  render() {
+    return <BaseAd ref={this.ref} {...this.props} />;
+  }
+}

package/src/ads/GAMInterstitialAd.ts

@@ -0,0 +1,45 @@
+import { AdEventType } from '../AdEventType';
+import { GAMAdEventType } from '../GAMAdEventType';
+import { AdEventListener } from '../types/AdEventListener';
+import { AdEventsListener } from '../types/AdEventsListener';
+import { RequestOptions } from '../types/RequestOptions';
+import { InterstitialAd } from './InterstitialAd';
+
+export class GAMInterstitialAd extends InterstitialAd {
+  /**
+   * Creates a new GAMInterstitialAd instance.
+   *
+   * #### Example
+   *
+   * ```js
+   * import { GAMInterstitialAd, AdEventType, TestIds } from 'react-native-google-mobile-ads';
+   *
+   * const interstitialAd = await GAMInterstitialAd.createForAdRequest(TestIds.GAM_INTERSTITIAL, {
+   *   requestAgent: 'CoolAds',
+   * });
+   *
+   * interstitialAd.addAdEventListener(AdEventType.Loaded, () => {
+   *   interstitialAd.show();
+   * });
+   *
+   * interstitialAd.load();
+   * ```
+   *
+   * @param adUnitId The Ad Unit ID for the Interstitial. You can find this on your Google Mobile Ads dashboard.
+   * @param requestOptions Optional RequestOptions used to load the ad.
+   */
+  static createForAdRequest(adUnitId: string, requestOptions?: RequestOptions) {
+    return super.createForAdRequest(adUnitId, requestOptions) as GAMInterstitialAd;
+  }
+
+  addAdEventsListener<T extends AdEventType | GAMAdEventType>(listener: AdEventsListener<T>) {
+    return this._addAdEventsListener(listener);
+  }
+
+  addAdEventListener<T extends AdEventType | GAMAdEventType>(
+    type: T,
+    listener: AdEventListener<T>,
+  ) {
+    return this._addAdEventListener(type, listener);
+  }
+}

package/src/ads/InterstitialAd.ts

@@ -0,0 +1,122 @@
+/*
+ * Copyright (c) 2016-present Invertase Limited & Contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this library except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { isString } from '../common';
+import { validateAdRequestOptions } from '../validateAdRequestOptions';
+import { MobileAd } from './MobileAd';
+import { AdEventType } from '../AdEventType';
+import { AdEventListener } from '../types/AdEventListener';
+import { AdEventsListener } from '../types/AdEventsListener';
+import { RequestOptions } from '../types/RequestOptions';
+import NativeInterstitialModule from '../specs/modules/NativeInterstitialModule';
+
+/**
+ * A class for interacting and showing Interstitial Ads.
+ *
+ * An Interstitial advert can be pre-loaded and shown at a suitable point in your apps flow, such as at the end of a level
+ * in a game. An Interstitial is a full screen advert, laid on-top of your entire application which the user can interact with.
+ * Interactions are passed back via events which should be handled accordingly inside of your app.
+ *
+ * #### Example
+ *
+ * First create a new Interstitial instance, passing in your Ad Unit ID from the Google Mobile Ads configuration console, and any additional
+ * request options. The example below will present a test advert, and only request a non-personalized ad.
+ *
+ * ```js
+ * import { InterstitialAd, TestIds } from 'react-native-google-mobile-ads';
+ *
+ * const interstitial = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {
+ *     requestNonPersonalizedAdsOnly: true,
+ * });
+ *  ```
+ *
+ * Each advert needs to be loaded from Google Mobile Ads before being shown. It is recommended this is performed before the user
+ * reaches the checkpoint to show the advert, so it's ready to go. Before loading the advert, we need to setup
+ * event listeners to listen for updates from Google Mobile Ads, such as advert loaded or failed to load.
+ *
+ * Event types match the `AdEventType` interface. Once the advert has loaded, we can trigger it to show:
+ *
+ * ```js
+ * import { AdEventType } from 'react-native-google-mobile-ads';
+ *
+ * interstitialAd.addAdEventListener(AdEventType.Loaded, () => {
+ *   interstitialAd.show();
+ * });
+ *
+ * interstitial.load();
+ *  ```
+ *
+ * The advert will be presented to the user, and several more events can be triggered such as the user clicking the
+ * advert or closing it.
+ */
+export class InterstitialAd extends MobileAd {
+  protected static _interstitialRequest = 0;
+  /**
+   * Creates a new InterstitialAd instance.
+   *
+   * #### Example
+   *
+   * ```js
+   * import { InterstitialAd, AdEventType, TestIds } from 'react-native-google-mobile-ads';
+   *
+   * const interstitialAd = await InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {
+   *   requestAgent: 'CoolAds',
+   * });
+   *
+   * interstitialAd.addAdEventListener(AdEventType.Loaded, () => {
+   *   interstitialAd.show();
+   * });
+   *
+   * interstitialAd.load();
+   * ```
+   *
+   * @param adUnitId The Ad Unit ID for the Interstitial. You can find this on your Google Mobile Ads dashboard.
+   * @param requestOptions Optional RequestOptions used to load the ad.
+   */
+  static createForAdRequest(adUnitId: string, requestOptions?: RequestOptions) {
+    if (!isString(adUnitId)) {
+      throw new Error("InterstitialAd.createForAdRequest(*) 'adUnitId' expected an string value.");
+    }
+
+    let options = {};
+    try {
+      options = validateAdRequestOptions(requestOptions);
+    } catch (e) {
+      if (e instanceof Error) {
+        throw new Error(`InterstitialAd.createForAdRequest(_, *) ${e.message}.`);
+      }
+    }
+
+    const requestId = InterstitialAd._interstitialRequest++;
+    return new InterstitialAd(
+      'interstitial',
+      requestId,
+      adUnitId,
+      NativeInterstitialModule.interstitialLoad.bind(this),
+      NativeInterstitialModule.interstitialShow.bind(this),
+      options,
+    );
+  }
+
+  addAdEventsListener<T extends AdEventType>(listener: AdEventsListener<T>) {
+    return this._addAdEventsListener(listener);
+  }
+
+  addAdEventListener<T extends AdEventType>(type: T, listener: AdEventListener<T>) {
+    return this._addAdEventListener(type, listener);
+  }
+}