react-native-google-mobile-ads 5.1.1 → 6.0.0

package/src/ads/BannerAd.tsx

@@ -15,112 +15,10 @@
  *
  */
 
-import React, { useState, useEffect } from 'react';
-import { HostComponent, requireNativeComponent } from 'react-native';
-import { isFunction } from '../common';
-import { NativeError } from '../internal/NativeError';
-import { BannerAdSize } from '../BannerAdSize';
-import { validateAdRequestOptions } from '../validateAdRequestOptions';
+import React from 'react';
 import { BannerAdProps } from '../types/BannerAdProps';
-import { RequestOptions } from '../types/RequestOptions';
+import { BaseAd } from './BaseAd';
 
-type NativeEvent =
-  | {
-      type: 'onAdLoaded' | 'onSizeChange';
-      width: number;
-      height: number;
-    }
-  | { type: 'onAdOpened' | 'onAdClosed' }
-  | {
-      type: 'onAdFailedToLoad';
-      code: string;
-      message: string;
-    };
-
-const initialState = [0, 0];
-const sizeRegex = /([0-9]+)x([0-9]+)/;
-
-export function BannerAd({ unitId, size, requestOptions, ...props }: BannerAdProps) {
-  const [dimensions, setDimensions] = useState(initialState);
-
-  useEffect(() => {
-    if (!unitId) {
-      throw new Error("BannerAd: 'unitId' expected a valid string unit ID.");
-    }
-  }, [unitId]);
-
-  useEffect(() => {
-    if (!(size in BannerAdSize) && !sizeRegex.test(size)) {
-      throw new Error("BannerAd: 'size' expected a valid BannerAdSize or custom size string.");
-    }
-  }, [size]);
-
-  useEffect(() => {
-    if (!(size in BannerAdSize) && !sizeRegex.test(size)) {
-      throw new Error("BannerAd: 'size' expected a valid BannerAdSize or custom size string.");
-    }
-  }, [size]);
-
-  const parsedRequestOptions = JSON.stringify(requestOptions);
-
-  useEffect(() => {
-    if (requestOptions) {
-      try {
-        validateAdRequestOptions(requestOptions);
-      } catch (e) {
-        if (e instanceof Error) {
-          throw new Error(`BannerAd: ${e.message}`);
-        }
-      }
-    }
-  }, [parsedRequestOptions]);
-
-  function onNativeEvent({ nativeEvent }: { nativeEvent: NativeEvent }) {
-    const { type } = nativeEvent;
-
-    if (type !== 'onSizeChange' && isFunction(props[type])) {
-      let eventHandler;
-      if (type === 'onAdFailedToLoad') {
-        const eventPayload = NativeError.fromEvent(nativeEvent, 'googleMobileAds');
-        if ((eventHandler = props[type])) eventHandler(eventPayload);
-      } else if ((eventHandler = props[type])) eventHandler();
-    }
-
-    if ((type === 'onAdLoaded' || type === 'onSizeChange') && size !== 'FLUID') {
-      const { width, height } = nativeEvent;
-      if (width && height) setDimensions([width, height]);
-    }
-  }
-
-  let style;
-  if (size === 'FLUID') {
-    // @ts-ignore: Property 'style' does not exist on type error
-    style = props.style;
-  } else {
-    style = {
-      width: dimensions[0],
-      height: dimensions[1],
-    };
-  }
-
-  return (
-    <GoogleMobileAdsBannerView
-      size={size}
-      style={style}
-      unitId={unitId}
-      request={validateAdRequestOptions(requestOptions)}
-      onNativeEvent={onNativeEvent}
-    />
-  );
+export function BannerAd({ size, ...props }: BannerAdProps) {
+  return <BaseAd sizes={[size]} {...props} />;
 }
-
-const GoogleMobileAdsBannerView: HostComponent<{
-  size: BannerAdProps['size'];
-  style: {
-    width: number;
-    height: number;
-  };
-  unitId: string;
-  request: RequestOptions;
-  onNativeEvent: (event: { nativeEvent: NativeEvent }) => void;
-}> = requireNativeComponent('RNGoogleMobileAdsBannerView');

package/src/ads/BaseAd.tsx

@@ -0,0 +1,156 @@
+/* eslint-disable react/prop-types */
+/*
+ * 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 } from 'react';
+import { NativeMethods, requireNativeComponent } from 'react-native';
+import { isFunction } from '../common';
+import { NativeError } from '../internal/NativeError';
+import { BannerAdSize } from '../BannerAdSize';
+import { validateAdRequestOptions } from '../validateAdRequestOptions';
+import { GAMBannerAdProps } from '../types/BannerAdProps';
+import { RequestOptions } from '../types/RequestOptions';
+
+type NativeEvent =
+  | {
+      type: 'onAdLoaded' | 'onSizeChange';
+      width: number;
+      height: number;
+    }
+  | { type: 'onAdOpened' | 'onAdClosed' }
+  | {
+      type: 'onAdFailedToLoad';
+      code: string;
+      message: string;
+    }
+  | {
+      type: 'onAppEvent';
+      name: string;
+      data?: string;
+    };
+
+const sizeRegex = /([0-9]+)x([0-9]+)/;
+
+export const BaseAd = React.forwardRef<GoogleMobileAdsBannerView, GAMBannerAdProps>(
+  ({ unitId, sizes, requestOptions, manualImpressionsEnabled, ...props }, ref) => {
+    const [dimensions, setDimensions] = useState<(number | string)[]>([0, 0]);
+
+    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 || sizeRegex.test(size))
+      ) {
+        throw new Error("BannerAd: 'size(s)' expected a valid BannerAdSize or custom size string.");
+      }
+    }, [sizes]);
+
+    const parsedRequestOptions = JSON.stringify(requestOptions);
+
+    useEffect(() => {
+      if (requestOptions) {
+        try {
+          validateAdRequestOptions(requestOptions);
+        } catch (e) {
+          if (e instanceof Error) {
+            throw new Error(`BannerAd: ${e.message}`);
+          }
+        }
+      }
+    }, [parsedRequestOptions]);
+
+    function onNativeEvent({ nativeEvent }: { nativeEvent: NativeEvent }) {
+      const { type } = nativeEvent;
+
+      if (type !== 'onSizeChange' && isFunction(props[type])) {
+        let eventHandler, eventPayload;
+        switch (type) {
+          case 'onAdLoaded':
+            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;
+          default:
+            if ((eventHandler = props[type])) eventHandler();
+        }
+      }
+
+      if (type === 'onAdLoaded' || type === 'onSizeChange') {
+        const { width, height } = nativeEvent;
+        if (width && height) setDimensions([width, height]);
+      }
+    }
+
+    const style = sizes.includes(BannerAdSize.FLUID)
+      ? {
+          width: '100%',
+          height: dimensions[1],
+        }
+      : {
+          width: dimensions[0],
+          height: dimensions[1],
+        };
+
+    return (
+      <GoogleMobileAdsBannerView
+        ref={ref}
+        sizes={sizes}
+        style={style}
+        unitId={unitId}
+        request={validateAdRequestOptions(requestOptions)}
+        manualImpressionsEnabled={!!manualImpressionsEnabled}
+        onNativeEvent={onNativeEvent}
+      />
+    );
+  },
+);
+BaseAd.displayName = 'BaseAd';
+
+interface NativeBannerProps {
+  sizes: GAMBannerAdProps['sizes'];
+  style: {
+    width?: number | string;
+    height?: number | string;
+  };
+  unitId: string;
+  request: RequestOptions;
+  manualImpressionsEnabled: boolean;
+  onNativeEvent: (event: { nativeEvent: NativeEvent }) => void;
+}
+
+const GoogleMobileAdsBannerView = requireNativeComponent<NativeBannerProps>(
+  'RNGoogleMobileAdsBannerView',
+);
+export type GoogleMobileAdsBannerView = React.Component<NativeBannerProps> & NativeMethods;

package/src/ads/GAMBannerAd.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 { findNodeHandle, UIManager } from 'react-native';
+import { GAMBannerAdProps } from '../types/BannerAdProps';
+import { BaseAd, GoogleMobileAdsBannerView } from './BaseAd';
+
+export class GAMBannerAd extends React.Component<GAMBannerAdProps> {
+  private ref = createRef<GoogleMobileAdsBannerView>();
+
+  recordManualImpression() {
+    UIManager.dispatchViewManagerCommand(
+      findNodeHandle(this.ref.current),
+      'recordManualImpression',
+      undefined,
+    );
+  }
+
+  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

@@ -15,17 +15,14 @@
  *
  */
 
-import { isFunction, isString } from '../common';
+import { isString } from '../common';
 import { MobileAds } from '../MobileAds';
 import { validateAdRequestOptions } from '../validateAdRequestOptions';
-import { validateAdShowOptions } from '../validateAdShowOptions';
 import { MobileAd } from './MobileAd';
+import { AdEventType } from '../AdEventType';
 import { AdEventListener } from '../types/AdEventListener';
-import { AdShowOptions } from '../types/AdShowOptions';
+import { AdEventsListener } from '../types/AdEventsListener';
 import { RequestOptions } from '../types/RequestOptions';
-import { MobileAdInterface } from '../types/MobileAd.interface';
-
-let _interstitialRequest = 0;
 
 /**
  * A class for interacting and showing Interstitial Ads.
@@ -56,10 +53,8 @@ let _interstitialRequest = 0;
  * ```js
  * import { AdEventType } from 'react-native-google-mobile-ads';
  *
- * interstitial.onAdEvent((type) => {
- *   if (type === AdEventType.LOADED) {
- *     interstitial.show();
- *   }
+ * interstitialAd.addAdEventListener(AdEventType.Loaded, () => {
+ *   interstitialAd.show();
  * });
  *
  * interstitial.load();
@@ -68,7 +63,8 @@ let _interstitialRequest = 0;
  * 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 implements MobileAdInterface {
+export class InterstitialAd extends MobileAd {
+  protected static _interstitialRequest = 0;
   /**
    * Creates a new InterstitialAd instance.
    *
@@ -81,12 +77,8 @@ export class InterstitialAd extends MobileAd implements MobileAdInterface {
    *   requestAgent: 'CoolAds',
    * });
    *
-   * interstitialAd.onAdEvent((type, error) => {
-   *   console.log('New event: ', type, error);
-   *
-   *   if (type === AdEventType.LOADED) {
-   *     interstitialAd.show();
-   *   }
+   * interstitialAd.addAdEventListener(AdEventType.Loaded, () => {
+   *   interstitialAd.show();
    * });
    *
    * interstitialAd.load();
@@ -95,7 +87,7 @@ export class InterstitialAd extends MobileAd implements MobileAdInterface {
    * @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): InterstitialAd {
+  static createForAdRequest(adUnitId: string, requestOptions?: RequestOptions) {
     if (!isString(adUnitId)) {
       throw new Error("InterstitialAd.createForAdRequest(*) 'adUnitId' expected an string value.");
     }
@@ -109,48 +101,15 @@ export class InterstitialAd extends MobileAd implements MobileAdInterface {
       }
     }
 
-    const requestId = _interstitialRequest++;
+    const requestId = InterstitialAd._interstitialRequest++;
     return new InterstitialAd('interstitial', MobileAds(), requestId, adUnitId, options);
   }
 
-  load() {
-    // Prevent multiple load calls
-    if (this._loaded || this._isLoadCalled) {
-      return;
-    }
-
-    this._isLoadCalled = true;
-    this._googleMobileAds.native.interstitialLoad(
-      this._requestId,
-      this._adUnitId,
-      this._requestOptions,
-    );
-  }
-
-  onAdEvent(handler: AdEventListener) {
-    if (!isFunction(handler)) {
-      throw new Error("InterstitialAd.onAdEvent(*) 'handler' expected a function.");
-    }
-
-    return this._setAdEventHandler(handler);
+  addAdEventsListener<T extends AdEventType>(listener: AdEventsListener<T>) {
+    return this._addAdEventsListener(listener);
   }
 
-  show(showOptions?: AdShowOptions) {
-    if (!this._loaded) {
-      throw new Error(
-        'InterstitialAd.show() The requested InterstitialAd has not loaded and could not be shown.',
-      );
-    }
-
-    let options;
-    try {
-      options = validateAdShowOptions(showOptions);
-    } catch (e) {
-      if (e instanceof Error) {
-        throw new Error(`InterstitialAd.show(*) ${e.message}.`);
-      }
-    }
-
-    return this._googleMobileAds.native.interstitialShow(this._requestId, options);
+  addAdEventListener<T extends AdEventType>(type: T, listener: AdEventListener<T>) {
+    return this._addAdEventListener(type, listener);
   }
 }

package/src/ads/MobileAd.ts

@@ -16,26 +16,38 @@
  */
 
 import { EmitterSubscription } from 'react-native';
+import { isFunction, isOneOf } from '../common';
 import { NativeError } from '../internal/NativeError';
-import { RewardedAdEventType } from '../RewardedAdEventType';
 import { AdEventType } from '../AdEventType';
-import { AdEventListener } from '../types/AdEventListener';
+import { RewardedAdEventType } from '../RewardedAdEventType';
+import { AdEventListener, AdEventPayload } from '../types/AdEventListener';
+import { AdEventsListener } from '../types/AdEventsListener';
+import { AdShowOptions } from '../types/AdShowOptions';
 import { RequestOptions } from '../types/RequestOptions';
+import { MobileAdInterface } from '../types/MobileAd.interface';
 import { MobileAdsModuleInterface } from '../types/MobileAdsModule.interface';
 import { RewardedAdReward } from '../types/RewardedAdReward';
+import { GAMAdEventType } from '../GAMAdEventType';
+import { AppEvent } from '../types/AppEvent';
+import { validateAdShowOptions } from '../validateAdShowOptions';
+
+type EventType = AdEventType | RewardedAdEventType | GAMAdEventType;
+
+export abstract class MobileAd implements MobileAdInterface {
+  protected _type: 'app_open' | 'interstitial' | 'rewarded';
+  protected _googleMobileAds: MobileAdsModuleInterface;
+  protected _requestId: number;
+  protected _adUnitId: string;
+  protected _requestOptions: RequestOptions;
+  protected _loaded: boolean;
+  protected _isLoadCalled: boolean;
+  protected _adEventsListeners: Map<number, AdEventsListener<EventType>>;
+  protected _adEventListenersMap: Map<EventType, Map<number, AdEventListener<EventType>>>;
+  protected _adEventsListenerId: number;
+  protected _adEventListenerId: number;
+  protected _nativeListener: EmitterSubscription;
 
-export class MobileAd {
-  _type: 'app_open' | 'interstitial' | 'rewarded';
-  _googleMobileAds: MobileAdsModuleInterface;
-  _requestId: number;
-  _adUnitId: string;
-  _requestOptions: RequestOptions;
-  _loaded: boolean;
-  _isLoadCalled: boolean;
-  _onAdEventHandler: AdEventListener | null;
-  _nativeListener: EmitterSubscription;
-
-  constructor(
+  protected constructor(
     type: 'app_open' | 'interstitial' | 'rewarded',
     googleMobileAds: MobileAdsModuleInterface,
     requestId: number,
@@ -50,7 +62,18 @@ export class MobileAd {
 
     this._loaded = false;
     this._isLoadCalled = false;
-    this._onAdEventHandler = null;
+    this._adEventsListeners = new Map();
+    this._adEventListenersMap = new Map();
+    Object.values({
+      ...AdEventType,
+      ...RewardedAdEventType,
+      ...GAMAdEventType,
+      _: AdEventType.LOADED, // since AdEventType.LOADED is overwritten by RewardedAdEventType.LOADED
+    }).forEach(type => {
+      this._adEventListenersMap.set(type as EventType, new Map());
+    });
+    this._adEventListenerId = 0;
+    this._adEventsListenerId = 0;
 
     this._nativeListener = googleMobileAds.emitter.addListener(
       `google_mobile_ads_${type}_event:${adUnitId}:${requestId}`,
@@ -58,11 +81,11 @@ export class MobileAd {
     );
   }
 
-  _handleAdEvent(event: {
+  protected _handleAdEvent(event: {
     body: {
-      type: AdEventType | RewardedAdEventType;
+      type: EventType;
       error?: { code: string; message: string };
-      data?: RewardedAdReward;
+      data?: RewardedAdReward | AppEvent;
     };
   }) {
     const { type, error, data } = event.body;
@@ -76,26 +99,116 @@ export class MobileAd {
       this._isLoadCalled = false;
     }
 
-    if (this._onAdEventHandler) {
-      let nativeError;
-      if (error) {
-        nativeError = NativeError.fromEvent(error, 'googleMobileAds');
-      }
+    let payload: AdEventPayload<EventType> = data;
+    if (error) {
+      payload = NativeError.fromEvent(error, 'googleMobileAds');
+    }
+    this._adEventsListeners.forEach(listener => {
+      listener({
+        type,
+        payload,
+      });
+    });
+    this._getAdEventListeners(type).forEach(listener => {
+      listener(payload);
+    });
+  }
+
+  protected _addAdEventsListener<T extends EventType>(listener: AdEventsListener<T>) {
+    if (!isFunction(listener)) {
+      throw new Error(`${this._className}.addAdEventsListener(*) 'listener' expected a function.`);
+    }
+
+    const id = this._adEventsListenerId++;
+    this._adEventsListeners.set(id, listener as AdEventsListener<EventType>);
+    return () => {
+      this._adEventsListeners.delete(id);
+    };
+  }
+
+  protected _addAdEventListener<T extends EventType>(type: T, listener: AdEventListener<T>) {
+    if (
+      !(
+        isOneOf(type, Object.values(AdEventType)) ||
+        (isOneOf(type, Object.values(RewardedAdEventType)) && this._type === 'rewarded')
+      )
+    ) {
+      throw new Error(
+        `${this._className}.addAdEventListener(*) 'type' expected a valid event type value.`,
+      );
+    }
+    if (!isFunction(listener)) {
+      throw new Error(
+        `${this._className}.addAdEventListener(_, *) 'listener' expected a function.`,
+      );
+    }
+
+    const id = this._adEventListenerId++;
+    this._getAdEventListeners(type).set(id, listener);
+    return () => {
+      this._getAdEventListeners(type).delete(id);
+    };
+  }
+
+  protected _getAdEventListeners<T extends EventType>(type: T) {
+    return this._adEventListenersMap.get(type) as Map<number, AdEventListener<T>>;
+  }
+
+  protected get _className() {
+    return this.constructor.name;
+  }
+
+  public load() {
+    // Prevent multiple load calls
+    if (this._loaded || this._isLoadCalled) {
+      return;
+    }
 
-      this._onAdEventHandler(type, nativeError, data);
+    this._isLoadCalled = true;
+    const type = this._type === 'app_open' ? 'appOpen' : this._type;
+    const load = this._googleMobileAds.native[`${type}Load`];
+    load(this._requestId, this._adUnitId, this._requestOptions);
+  }
+
+  public show(showOptions?: AdShowOptions) {
+    if (!this._loaded) {
+      throw new Error(
+        `${this._className}.show() The requested ${this._className} has not loaded and could not be shown.`,
+      );
+    }
+
+    let options;
+    try {
+      options = validateAdShowOptions(showOptions);
+    } catch (e) {
+      if (e instanceof Error) {
+        throw new Error(`${this._className}.show(*) ${e.message}.`);
+      } else {
+        throw e;
+      }
     }
+
+    const type = this._type === 'app_open' ? 'appOpen' : this._type;
+    const show = this._googleMobileAds.native[`${type}Show`];
+    return show(this._requestId, this._adUnitId, options);
   }
 
-  _setAdEventHandler(handler: AdEventListener) {
-    this._onAdEventHandler = handler;
-    return () => (this._onAdEventHandler = null);
+  public abstract addAdEventsListener<T extends never>(listener: AdEventsListener<T>): () => void;
+
+  public abstract addAdEventListener<T extends never>(type: T, listener: AdEventListener<T>): void;
+
+  public removeAllListeners() {
+    this._adEventsListeners.clear();
+    this._adEventListenersMap.forEach((_, type, map) => {
+      map.set(type, new Map());
+    });
   }
 
-  get adUnitId() {
+  public get adUnitId() {
     return this._adUnitId;
   }
 
-  get loaded() {
+  public get loaded() {
     return this._loaded;
   }
 }