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

package/src/ads/native-ad/NativeAdView.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, { useRef } from 'react';
+import { ViewProps } from 'react-native';
+import { NativeAd } from './NativeAd';
+import { NativeAdContext } from './NativeAdContext';
+import GoogleMobileAdsNativeView from '../../specs/components/GoogleMobileAdsNativeViewNativeComponent';
+
+export type NativeAdViewProps = ViewProps & {
+  nativeAd: NativeAd;
+};
+
+export const NativeAdView = (props: NativeAdViewProps) => {
+  const { nativeAd, children, ...viewProps } = props;
+  const ref = useRef<React.ComponentRef<typeof GoogleMobileAdsNativeView>>(null);
+  return (
+    <GoogleMobileAdsNativeView
+      {...viewProps}
+      ref={ref}
+      responseId={nativeAd.responseId}
+      removeClippedSubviews={false}
+    >
+      <NativeAdContext.Provider value={{ nativeAd, viewRef: ref }}>
+        {children}
+      </NativeAdContext.Provider>
+    </GoogleMobileAdsNativeView>
+  );
+};

package/src/ads/native-ad/NativeAsset.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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, { ReactElement, useContext, useEffect, useRef } from 'react';
+import { findNodeHandle } from 'react-native';
+import { NativeAdContext } from './NativeAdContext';
+import { Commands } from '../../specs/components/GoogleMobileAdsNativeViewNativeComponent';
+import { composeRefs, getElementRef } from '../../common/ref';
+
+export enum NativeAssetType {
+  ADVERTISER = 'advertiser',
+  BODY = 'body',
+  CALL_TO_ACTION = 'callToAction',
+  HEADLINE = 'headline',
+  PRICE = 'price',
+  STORE = 'store',
+  STAR_RATING = 'starRating',
+  ICON = 'icon',
+  IMAGE = 'image',
+}
+
+export type NativeAssetProps = {
+  assetType: NativeAssetType;
+  children: ReactElement;
+};
+
+export const NativeAsset = (props: NativeAssetProps) => {
+  const { assetType, children } = props;
+  const { viewRef } = useContext(NativeAdContext);
+  const ref = useRef<React.Component>(null);
+
+  useEffect(() => {
+    if (!viewRef.current) {
+      return;
+    }
+    const node = ref.current;
+    const reactTag = findNodeHandle(node);
+    if (reactTag) {
+      Commands.registerAsset(viewRef.current, assetType, reactTag);
+    }
+  }, [viewRef]);
+
+  if (!React.isValidElement(children)) {
+    return null;
+  }
+
+  const childrenRef = getElementRef(children);
+  return React.cloneElement(children, {
+    // @ts-ignore
+    ref: composeRefs(ref, childrenRef),
+  }) as ReactElement;
+};

package/src/ads/native-ad/NativeMediaView.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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, { useContext } from 'react';
+import { ViewProps } from 'react-native';
+import GoogleMobileAdsMediaView from '../../specs/components/GoogleMobileAdsMediaViewNativeComponent';
+import { NativeAsset } from './NativeAsset';
+import { NativeAdContext } from './NativeAdContext';
+
+export type NativeMediaViewProps = ViewProps & {
+  resizeMode?: 'cover' | 'contain' | 'stretch';
+};
+
+export const NativeMediaView = (props: NativeMediaViewProps) => {
+  const { resizeMode, style, ...viewProps } = props;
+  const { nativeAd } = useContext(NativeAdContext);
+  const { responseId, mediaContent } = nativeAd;
+
+  return (
+    // @ts-ignore
+    <NativeAsset assetType={'media'}>
+      <GoogleMobileAdsMediaView
+        {...viewProps}
+        responseId={responseId}
+        resizeMode={resizeMode}
+        style={[{ aspectRatio: mediaContent?.aspectRatio }, style]}
+      />
+    </NativeAsset>
+  );
+};

package/src/common/constants.ts

@@ -0,0 +1,9 @@
+// See:
+// https://developers.google.com/admob/android/reference/com/google/android/gms/ads/AdValue.PrecisionType
+// https://developers.google.com/admob/ios/api/reference/Enums/GADAdValuePrecision
+export enum RevenuePrecisions {
+  UNKNOWN = 0,
+  ESTIMATED = 1,
+  PUBLISHER_PROVIDED = 2,
+  PRECISE = 3,
+}

package/src/common/debounce.ts

@@ -0,0 +1,15 @@
+export const debounce = <Arguments extends unknown[]>(
+  func: (...args: Arguments) => unknown,
+  waitFor: number,
+): ((...args: Arguments) => void) => {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+
+  const debounced = (...args: Arguments) => {
+    if (timeout !== null) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => func(...args), waitFor);
+  };
+
+  return debounced;
+};

package/src/common/index.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 * from './validate';
+import { isUndefined } from './validate';
+
+export function hasOwnProperty(target: unknown, property: PropertyKey) {
+  return Object.hasOwnProperty.call(target, property);
+}
+
+export function isPropertySet(target: unknown, property: PropertyKey) {
+  return (
+    hasOwnProperty(target, property) &&
+    !isUndefined((target as Record<PropertyKey, unknown>)[property])
+  );
+}

package/src/common/ref.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+
+type PossibleRef<T> = React.Ref<T> | undefined;
+interface ElementWithRef extends React.ReactElement {
+  ref?: PossibleRef<unknown>;
+}
+
+/**
+ * Access the ref using the method that doesn't yield a warning.
+ *
+ * Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
+ * After React 19 accessing `element.ref` does the opposite.
+ * https://github.com/facebook/react/pull/28348
+ */
+export function getElementRef(element: React.ReactElement): PossibleRef<unknown> {
+  // React <=18 in DEV
+  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get?.bind(element.props);
+  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return (element as ElementWithRef).ref;
+  }
+
+  // React 19 in DEV
+  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get?.bind(element);
+  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;
+  if (mayWarn) {
+    // @ts-ignore
+    return element.props.ref; // eslint-disable-line
+  }
+
+  // Not DEV
+  // @ts-ignore
+  return element.props.ref || (element as ElementWithRef).ref; // eslint-disable-line
+}
+
+export function composeRefs<T>(...refs: PossibleRef<T>[]) {
+  return (value: T) => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref !== null && ref !== undefined) {
+        ref.current = value;
+      }
+    });
+  };
+}

package/src/common/validate.ts

@@ -0,0 +1,116 @@
+/*
+ * 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.
+ *
+ */
+
+/**
+ * Simple is null check.
+ *
+ * @param value
+ * @returns {boolean}
+ */
+export function isNull(value: unknown) {
+  return value === null;
+}
+
+/**
+ * Simple is object check.
+ *
+ * @param value
+ * @returns {boolean}
+ */
+export function isObject(value: unknown) {
+  return value ? typeof value === 'object' && !Array.isArray(value) && !isNull(value) : false;
+}
+
+/**
+ * Simple is function check
+ *
+ * @param value
+ * @returns {*|boolean}
+ */
+export function isFunction(value: unknown) {
+  return value ? typeof value === 'function' : false;
+}
+
+/**
+ * Simple is string check
+ * @param value
+ * @return {boolean}
+ */
+export function isString(value: unknown) {
+  return typeof value === 'string';
+}
+
+/**
+ * Simple is boolean check
+ *
+ * @param value
+ * @return {boolean}
+ */
+export function isBoolean(value: unknown) {
+  return typeof value === 'boolean';
+}
+
+/**
+ *
+ * @param value
+ * @returns {arg is Array<unknown>}
+ */
+export function isArray(value: unknown) {
+  return Array.isArray(value);
+}
+
+/**
+ *
+ * @param value
+ * @returns {boolean}
+ */
+export function isUndefined(value: unknown): value is undefined {
+  return typeof value === 'undefined';
+}
+
+/**
+ * URL test
+ * @param url
+ * @returns {boolean}
+ */
+const IS_VALID_URL_REGEX = /^(http|https):\/\/[^ "]+$/;
+export function isValidUrl(url: string) {
+  return IS_VALID_URL_REGEX.test(url);
+}
+
+/**
+ * Array includes
+ *
+ * @param value
+ * @param oneOf
+ * @returns {boolean}
+ */
+export function isOneOf(value: unknown, oneOf: unknown[] = []) {
+  if (!isArray(oneOf)) {
+    return false;
+  }
+  return oneOf.includes(value);
+}
+
+/**
+ * Simple is number check
+ * @param value
+ * @return {boolean}
+ */
+export function isNumber(value: unknown) {
+  return typeof value === 'number';
+}

package/src/declarations.d.ts

@@ -0,0 +1,3 @@
+declare module 'react-native/Libraries/Utilities/binaryToBase64' {
+  export default function binaryToBase64(data: ArrayBuffer | Uint8Array): string;
+}

package/src/hooks/useAppOpenAd.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 { useState } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+
+import { AppOpenAd } from '../ads/AppOpenAd';
+import { AdHookReturns } from '../types/AdStates';
+import { RequestOptions } from '../types/RequestOptions';
+
+import { useFullScreenAd } from './useFullScreenAd';
+
+/**
+ * React Hook for App Open Ad.
+ *
+ * @param adUnitId The Ad Unit ID for the App Open Ad. You can find this on your Google Mobile Ads dashboard. You can destroy ad instance by setting this value to null.
+ * @param requestOptions Optional RequestOptions used to load the ad.
+ */
+export function useAppOpenAd(
+  adUnitId: string | null,
+  requestOptions: RequestOptions = {},
+): Omit<AdHookReturns, 'reward' | 'isEarnedReward'> {
+  const [appOpenAd, setAppOpenAd] = useState<AppOpenAd | null>(null);
+
+  useDeepCompareEffect(() => {
+    setAppOpenAd(() => {
+      return adUnitId ? AppOpenAd.createForAdRequest(adUnitId, requestOptions) : null;
+    });
+  }, [adUnitId, requestOptions]);
+
+  return useFullScreenAd(appOpenAd);
+}

package/src/hooks/useForeground.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 { useEffect, useRef } from 'react';
+import { AppState } from 'react-native';
+
+/**
+ * A custom hook that invokes a callback when the app transitions to the foreground.
+ *
+ * @param {Function} callback - The function to be called when the app has come to the foreground.
+ */
+export function useForeground(callback: () => void) {
+  const appState = useRef(AppState.currentState);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      if (appState.current === 'background' && nextAppState === 'active') {
+        callback();
+      }
+      appState.current = nextAppState;
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+}

package/src/hooks/useFullScreenAd.ts

@@ -0,0 +1,112 @@
+/*
+ * 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 { useCallback, useEffect, useReducer } from 'react';
+
+import { AdEventType } from '../AdEventType';
+import { AppOpenAd } from '../ads/AppOpenAd';
+import { InterstitialAd } from '../ads/InterstitialAd';
+import { RewardedAd } from '../ads/RewardedAd';
+import { RewardedInterstitialAd } from '../ads/RewardedInterstitialAd';
+import { RewardedAdEventType } from '../RewardedAdEventType';
+import { AdStates, AdHookReturns } from '../types/AdStates';
+import { AdShowOptions } from '../types/AdShowOptions';
+import { RewardedAdReward } from '../types/RewardedAdReward';
+import type { PaidEvent } from '../types';
+
+const initialState: AdStates = {
+  isLoaded: false,
+  isOpened: false,
+  isClicked: false,
+  isClosed: false,
+  error: undefined,
+  reward: undefined,
+  isEarnedReward: false,
+};
+
+export function useFullScreenAd(
+  ad: AppOpenAd | InterstitialAd | RewardedAd | RewardedInterstitialAd | null,
+): AdHookReturns {
+  const [state, dispatch] = useReducer(
+    (prevState, newState) => ({ ...prevState, ...newState }) as AdStates,
+    initialState,
+  );
+  const isShowing = state.isOpened && !state.isClosed;
+
+  const load = useCallback(() => {
+    if (ad) {
+      dispatch(initialState);
+      ad.load();
+    }
+  }, [ad]);
+
+  const show = useCallback(
+    (showOptions?: AdShowOptions) => {
+      if (ad) {
+        // ad.show returns a promise but we don't await
+        // errors handled by library-consumer-provided functions
+        void ad.show(showOptions);
+      }
+    },
+    [ad],
+  );
+
+  useEffect(() => {
+    dispatch(initialState);
+    if (!ad) {
+      return;
+    }
+    const unsubscribe = (ad as RewardedAd).addAdEventsListener(({ type, payload }) => {
+      switch (type) {
+        case AdEventType.LOADED:
+          dispatch({ isLoaded: true });
+          break;
+        case AdEventType.OPENED:
+          dispatch({ isOpened: true });
+          break;
+        case AdEventType.PAID:
+          dispatch({ revenue: payload as unknown as PaidEvent });
+          break;
+        case AdEventType.CLOSED:
+          dispatch({ isClosed: true, isLoaded: false });
+          break;
+        case AdEventType.CLICKED:
+          dispatch({ isClicked: true });
+          break;
+        case AdEventType.ERROR:
+          dispatch({ error: payload as Error });
+          break;
+        case RewardedAdEventType.LOADED:
+          dispatch({ isLoaded: true, reward: payload as RewardedAdReward });
+          break;
+        case RewardedAdEventType.EARNED_REWARD:
+          dispatch({ isEarnedReward: true, reward: payload as RewardedAdReward });
+          break;
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [ad]);
+
+  return {
+    ...state,
+    isShowing,
+    load,
+    show,
+  };
+}

package/src/hooks/useInterstitialAd.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 { useState } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+
+import { InterstitialAd } from '../ads/InterstitialAd';
+import { AdHookReturns } from '../types/AdStates';
+import { RequestOptions } from '../types/RequestOptions';
+
+import { useFullScreenAd } from './useFullScreenAd';
+
+/**
+ * React Hook for Interstitial Ad.
+ *
+ * @param adUnitId The Ad Unit ID for the Interstitial Ad. You can find this on your Google Mobile Ads dashboard. You can destroy ad instance by setting this value to null.
+ * @param requestOptions Optional RequestOptions used to load the ad.
+ */
+export function useInterstitialAd(
+  adUnitId: string | null,
+  requestOptions: RequestOptions = {},
+): Omit<AdHookReturns, 'reward' | 'isEarnedReward'> {
+  const [interstitialAd, setInterstitialAd] = useState<InterstitialAd | null>(null);
+
+  useDeepCompareEffect(() => {
+    setInterstitialAd(() => {
+      return adUnitId ? InterstitialAd.createForAdRequest(adUnitId, requestOptions) : null;
+    });
+  }, [adUnitId, requestOptions]);
+
+  return useFullScreenAd(interstitialAd);
+}

package/src/hooks/useRewardedAd.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 { useState } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+
+import { RewardedAd } from '../ads/RewardedAd';
+import { AdHookReturns } from '../types/AdStates';
+import { RequestOptions } from '../types/RequestOptions';
+
+import { useFullScreenAd } from './useFullScreenAd';
+
+/**
+ * React Hook for Rewarded Ad.
+ *
+ * @param adUnitId The Ad Unit ID for the Rewarded Ad. You can find this on your Google Mobile Ads dashboard. You can destroy ad instance by setting this value to null.
+ * @param requestOptions Optional RequestOptions used to load the ad.
+ */
+export function useRewardedAd(
+  adUnitId: string | null,
+  requestOptions: RequestOptions = {},
+): AdHookReturns {
+  const [rewardedAd, setRewardedAd] = useState<RewardedAd | null>(null);
+
+  useDeepCompareEffect(() => {
+    setRewardedAd(() => {
+      return adUnitId ? RewardedAd.createForAdRequest(adUnitId, requestOptions) : null;
+    });
+  }, [adUnitId, requestOptions]);
+
+  return useFullScreenAd(rewardedAd);
+}