react-native-applovin-max 8.0.0 → 8.0.2

package/src/RewardedAd.ts

@@ -37,69 +37,69 @@ const setLocalExtraParameter = (adUnitId: string, key: string, value: LocalExtra
     AppLovinMAX.setRewardedAdLocalExtraParameter(adUnitId, { [key]: value });
 };
 
-const addAdLoadedEventListener = (listener: (adInfo: AdInfo) => void) => {
-    addEventListener(ON_REWARDED_AD_LOADED_EVENT, (adInfo: AdInfo) => listener(adInfo));
+const addAdLoadedEventListener = (listener: (adInfo: AdInfo) => void): void => {
+    addEventListener(ON_REWARDED_AD_LOADED_EVENT, listener);
 };
 
-const removeAdLoadedEventListener = () => {
+const removeAdLoadedEventListener = (): void => {
     removeEventListener(ON_REWARDED_AD_LOADED_EVENT);
 };
 
-const addAdLoadFailedEventListener = (listener: (errorInfo: AdLoadFailedInfo) => void) => {
-    addEventListener(ON_REWARDED_AD_LOAD_FAILED_EVENT, (errorInfo: AdLoadFailedInfo) => listener(errorInfo));
+const addAdLoadFailedEventListener = (listener: (errorInfo: AdLoadFailedInfo) => void): void => {
+    addEventListener(ON_REWARDED_AD_LOAD_FAILED_EVENT, listener);
 };
 
-const removeAdLoadFailedEventListener = () => {
+const removeAdLoadFailedEventListener = (): void => {
     removeEventListener(ON_REWARDED_AD_LOAD_FAILED_EVENT);
 };
 
-const addAdClickedEventListener = (listener: (adInfo: AdInfo) => void) => {
-    addEventListener(ON_REWARDED_AD_CLICKED_EVENT, (adInfo: AdInfo) => listener(adInfo));
+const addAdClickedEventListener = (listener: (adInfo: AdInfo) => void): void => {
+    addEventListener(ON_REWARDED_AD_CLICKED_EVENT, listener);
 };
 
-const removeAdClickedEventListener = () => {
+const removeAdClickedEventListener = (): void => {
     removeEventListener(ON_REWARDED_AD_CLICKED_EVENT);
 };
 
-const addAdDisplayedEventListener = (listener: (adInfo: AdInfo) => void) => {
-    addEventListener(ON_REWARDED_AD_DISPLAYED_EVENT, (adInfo: AdInfo) => listener(adInfo));
+const addAdDisplayedEventListener = (listener: (adInfo: AdInfo) => void): void => {
+    addEventListener(ON_REWARDED_AD_DISPLAYED_EVENT, listener);
 };
 
-const removeAdDisplayedEventListener = () => {
+const removeAdDisplayedEventListener = (): void => {
     removeEventListener(ON_REWARDED_AD_DISPLAYED_EVENT);
 };
 
-const addAdFailedToDisplayEventListener = (listener: (errorInfo: AdDisplayFailedInfo) => void) => {
-    addEventListener(ON_REWARDED_AD_FAILED_TO_DISPLAY_EVENT, (errorInfo: AdDisplayFailedInfo) => listener(errorInfo));
+const addAdFailedToDisplayEventListener = (listener: (errorInfo: AdDisplayFailedInfo) => void): void => {
+    addEventListener(ON_REWARDED_AD_FAILED_TO_DISPLAY_EVENT, listener);
 };
 
-const removeAdFailedToDisplayEventListener = () => {
+const removeAdFailedToDisplayEventListener = (): void => {
     removeEventListener(ON_REWARDED_AD_FAILED_TO_DISPLAY_EVENT);
 };
 
-const addAdHiddenEventListener = (listener: (adInfo: AdInfo) => void) => {
-    addEventListener(ON_REWARDED_AD_HIDDEN_EVENT, (adInfo: AdInfo) => listener(adInfo));
+const addAdHiddenEventListener = (listener: (adInfo: AdInfo) => void): void => {
+    addEventListener(ON_REWARDED_AD_HIDDEN_EVENT, listener);
 };
 
-const removeAdHiddenEventListener = () => {
+const removeAdHiddenEventListener = (): void => {
     removeEventListener(ON_REWARDED_AD_HIDDEN_EVENT);
 };
 
-const addAdRevenuePaidListener = (listener: (adInfo: AdRevenueInfo) => void) => {
-    addEventListener(ON_REWARDED_AD_REVENUE_PAID, (adInfo: AdRevenueInfo) => listener(adInfo));
+const addAdRevenuePaidListener = (listener: (adInfo: AdRevenueInfo) => void): void => {
+    addEventListener(ON_REWARDED_AD_REVENUE_PAID, listener);
 };
 
-const removeAdRevenuePaidListener = () => {
+const removeAdRevenuePaidListener = (): void => {
     removeEventListener(ON_REWARDED_AD_REVENUE_PAID);
 };
 
 // Rewarded specific APIs
 
-const addAdReceivedRewardEventListener = (listener: (adInfo: AdRewardInfo) => void) => {
-    addEventListener(ON_REWARDED_AD_RECEIVED_REWARD_EVENT, (adInfo: AdRewardInfo) => listener(adInfo));
+const addAdReceivedRewardEventListener = (listener: (adInfo: AdRewardInfo) => void): void => {
+    addEventListener(ON_REWARDED_AD_RECEIVED_REWARD_EVENT, listener);
 };
 
-const removeAdReceivedRewardEventListener = () => {
+const removeAdReceivedRewardEventListener = (): void => {
     removeEventListener(ON_REWARDED_AD_RECEIVED_REWARD_EVENT);
 };
 

package/src/nativeAd/NativeAdView.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { forwardRef, useContext, useImperativeHandle, useRef, useState, useEffect, useCallback } from 'react';
-import { NativeModules, requireNativeComponent, UIManager, findNodeHandle } from 'react-native';
+import { NativeModules, requireNativeComponent, UIManager, findNodeHandle, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import { NativeAdViewContext, NativeAdViewProvider } from './NativeAdViewProvider';
 import type { AdInfo, AdLoadFailedInfo, AdRevenueInfo } from '../types/AdInfo';
@@ -61,18 +61,20 @@ export const NativeAdView = forwardRef<NativeAdViewHandler, NativeAdViewProps &
     const [isInitialized, setIsInitialized] = useState<boolean>(false);
 
     useEffect(() => {
-        // check that AppLovinMAX has been initialized
-        AppLovinMAX.isInitialized().then((result: boolean) => {
+        const checkInitialization = async () => {
+            const result = await AppLovinMAX.isInitialized();
             setIsInitialized(result);
             if (!result) {
-                console.warn('NativeAdView is mounted before the initialization of the AppLovin MAX React Native module');
+                console.warn('NativeAdView is mounted before the initialization of the AppLovin MAX React Native module.');
             }
-        });
+        };
+
+        checkInitialization();
     }, []);
 
-    // Not ready to render NativeAdView
+    // Avoid rendering the NativeAdView if the SDK is not initialized
     if (!isInitialized) {
-        return null;
+        return <View {...props} />;
     }
 
     return (
@@ -86,15 +88,14 @@ const NativeAdViewImpl = forwardRef<NativeAdViewHandler, NativeAdViewProps & Vie
     { adUnitId, placement, customData, extraParameters, localExtraParameters, onAdLoaded, onAdLoadFailed, onAdClicked, onAdRevenuePaid, children, style, ...otherProps },
     ref
 ) {
-    // context from NativeAdViewProvider
+    // Context provides functions to manage native ad and native ad view state
     const { setNativeAd, setNativeAdView } = useContext(NativeAdViewContext) as NativeAdViewContextType;
 
-    // keep the nativeAdView ref
     const nativeAdViewRef = useRef<NativeAdViewType | null>(null);
 
-    // invoke the native ad loader
-    const loadAd = () => {
-        if (nativeAdViewRef) {
+    // Load a new ad
+    const loadAd = useCallback(() => {
+        if (nativeAdViewRef.current) {
             UIManager.dispatchViewManagerCommand(
                 findNodeHandle(nativeAdViewRef.current),
                 // @ts-ignore: Issue in RN ts defs
@@ -102,12 +103,11 @@ const NativeAdViewImpl = forwardRef<NativeAdViewHandler, NativeAdViewProps & Vie
                 undefined
             );
         }
-    };
+    }, []);
 
-    // expose a list of functions via the provided ref
-    useImperativeHandle(ref, () => ({ loadAd }), []);
+    useImperativeHandle(ref, () => ({ loadAd }), [loadAd]);
 
-    // save the DOM element via the ref callback
+    // Save the DOM element reference
     const saveElement = useCallback(
         (element: NativeAdViewType | null) => {
             if (element) {
@@ -118,22 +118,34 @@ const NativeAdViewImpl = forwardRef<NativeAdViewHandler, NativeAdViewProps & Vie
         [setNativeAdView]
     );
 
-    const onAdLoadedEvent = (event: { nativeEvent: { nativeAd: NativeAd; adInfo: AdInfo } }) => {
-        setNativeAd(event.nativeEvent.nativeAd);
-        if (onAdLoaded) onAdLoaded(event.nativeEvent.adInfo);
-    };
+    const onAdLoadedEvent = useCallback(
+        (event: { nativeEvent: { nativeAd: NativeAd; adInfo: AdInfo } }) => {
+            setNativeAd(event.nativeEvent.nativeAd);
+            onAdLoaded?.(event.nativeEvent.adInfo);
+        },
+        [onAdLoaded, setNativeAd]
+    );
 
-    const onAdLoadFailedEvent = (event: AdNativeEvent<AdLoadFailedInfo>) => {
-        if (onAdLoadFailed) onAdLoadFailed(event.nativeEvent);
-    };
+    const onAdLoadFailedEvent = useCallback(
+        (event: AdNativeEvent<AdLoadFailedInfo>) => {
+            onAdLoadFailed?.(event.nativeEvent);
+        },
+        [onAdLoadFailed]
+    );
 
-    const onAdClickedEvent = (event: AdNativeEvent<AdInfo>) => {
-        if (onAdClicked) onAdClicked(event.nativeEvent);
-    };
+    const onAdClickedEvent = useCallback(
+        (event: AdNativeEvent<AdInfo>) => {
+            onAdClicked?.(event.nativeEvent);
+        },
+        [onAdClicked]
+    );
 
-    const onAdRevenuePaidEvent = (event: AdNativeEvent<AdRevenueInfo>) => {
-        if (onAdRevenuePaid) onAdRevenuePaid(event.nativeEvent);
-    };
+    const onAdRevenuePaidEvent = useCallback(
+        (event: AdNativeEvent<AdRevenueInfo>) => {
+            onAdRevenuePaid?.(event.nativeEvent);
+        },
+        [onAdRevenuePaid]
+    );
 
     return (
         <NativeAdViewComponent

package/src/nativeAd/NativeAdViewComponents.tsx

@@ -1,21 +1,31 @@
 import * as React from 'react';
-import { useContext, useRef, useEffect } from 'react';
-import type { ReactNode } from 'react';
-import { findNodeHandle, Text, Image, View, TouchableOpacity, StyleSheet } from 'react-native';
+import { useContext, useRef, useEffect, useCallback, useMemo } from 'react';
+import { findNodeHandle, Text, Image, View, TouchableOpacity, StyleSheet, Platform } from 'react-native';
 import type { ViewProps, ImageProps, TextStyle, StyleProp, TextProps } from 'react-native';
 import { NativeAdViewContext } from './NativeAdViewProvider';
+import type { NativeAd } from '../types/NativeAd';
 
-export const TitleView = (props: TextProps) => {
-    const titleRef = useRef(null);
+// Custom hook to handle setting native ad view properties and return nativeAd
+const useNativeAdViewProps = (nativeAdProp: keyof NativeAd, ref: React.RefObject<any>, nativePropKey: string) => {
     const { nativeAd, nativeAdView } = useContext(NativeAdViewContext);
 
-    useEffect(() => {
-        if (!nativeAd.title || !titleRef.current) return;
-
+    const setNativeProps = useCallback(() => {
+        if (!nativeAd[nativeAdProp] || !ref.current) return;
         nativeAdView?.setNativeProps({
-            titleView: findNodeHandle(titleRef.current),
+            [nativePropKey]: findNodeHandle(ref.current),
         });
-    }, [nativeAd, nativeAdView]);
+    }, [nativeAd, nativeAdProp, nativeAdView, ref, nativePropKey]);
+
+    useEffect(() => {
+        setNativeProps();
+    }, [setNativeProps]);
+
+    return nativeAd;
+};
+
+export const TitleView = (props: TextProps) => {
+    const titleRef = useRef<Text | null>(null);
+    const nativeAd = useNativeAdViewProps('title', titleRef, 'titleView');
 
     return (
         <Text {...props} ref={titleRef}>
@@ -25,16 +35,8 @@ export const TitleView = (props: TextProps) => {
 };
 
 export const AdvertiserView = (props: TextProps) => {
-    const advertiserRef = useRef(null);
-    const { nativeAd, nativeAdView } = useContext(NativeAdViewContext);
-
-    useEffect(() => {
-        if (!nativeAd.advertiser || !advertiserRef.current) return;
-
-        nativeAdView?.setNativeProps({
-            advertiserView: findNodeHandle(advertiserRef.current),
-        });
-    }, [nativeAd, nativeAdView]);
+    const advertiserRef = useRef<Text | null>(null);
+    const nativeAd = useNativeAdViewProps('advertiser', advertiserRef, 'advertiserView');
 
     return (
         <Text {...props} ref={advertiserRef}>
@@ -44,16 +46,8 @@ export const AdvertiserView = (props: TextProps) => {
 };
 
 export const BodyView = (props: TextProps) => {
-    const bodyRef = useRef(null);
-    const { nativeAd, nativeAdView } = useContext(NativeAdViewContext);
-
-    useEffect(() => {
-        if (!nativeAd.body || !bodyRef.current) return;
-
-        nativeAdView?.setNativeProps({
-            bodyView: findNodeHandle(bodyRef.current),
-        });
-    }, [nativeAd, nativeAdView]);
+    const bodyRef = useRef<Text | null>(null);
+    const nativeAd = useNativeAdViewProps('body', bodyRef, 'bodyView');
 
     return (
         <Text {...props} ref={bodyRef}>
@@ -63,37 +57,30 @@ export const BodyView = (props: TextProps) => {
 };
 
 export const CallToActionView = (props: TextProps) => {
-    const callToActionRef = useRef(null);
-    const { nativeAd, nativeAdView } = useContext(NativeAdViewContext);
-
-    useEffect(() => {
-        if (!nativeAd.callToAction || !callToActionRef.current) return;
+    const callToActionRef = useRef<Text | null>(null);
+    const nativeAd = useNativeAdViewProps('callToAction', callToActionRef, 'callToActionView');
 
-        nativeAdView?.setNativeProps({
-            callToActionView: findNodeHandle(callToActionRef.current),
-        });
-    }, [nativeAd, nativeAdView]);
-
-    return (
-        <TouchableOpacity>
+    // TouchableOpacity disables clicking on certain Android devices.
+    if (Platform.OS === 'android') {
+        return (
             <Text {...props} ref={callToActionRef}>
                 {nativeAd.callToAction || null}
             </Text>
-        </TouchableOpacity>
-    );
+        );
+    } else {
+        return (
+            <TouchableOpacity>
+                <Text {...props} ref={callToActionRef}>
+                    {nativeAd.callToAction || null}
+                </Text>
+            </TouchableOpacity>
+        );
+    }
 };
 
 export const IconView = (props: Omit<ImageProps, 'source'>) => {
-    const imageRef = useRef(null);
-    const { nativeAd, nativeAdView } = useContext(NativeAdViewContext);
-
-    useEffect(() => {
-        if (!(nativeAd.image || nativeAd.url) || !imageRef.current) return;
-
-        nativeAdView?.setNativeProps({
-            iconView: findNodeHandle(imageRef.current),
-        });
-    }, [nativeAd, nativeAdView]);
+    const imageRef = useRef<Image | null>(null);
+    const nativeAd = useNativeAdViewProps('image', imageRef, 'iconView');
 
     return nativeAd.url ? (
         <Image {...props} ref={imageRef} source={{ uri: nativeAd.url }} />
@@ -105,30 +92,15 @@ export const IconView = (props: Omit<ImageProps, 'source'>) => {
 };
 
 export const OptionsView = (props: ViewProps) => {
-    const viewRef = useRef(null);
-    const { nativeAd, nativeAdView } = useContext(NativeAdViewContext);
-
-    useEffect(() => {
-        if (!nativeAd.isOptionsViewAvailable || !viewRef.current) return;
-        nativeAdView?.setNativeProps({
-            optionsView: findNodeHandle(viewRef.current),
-        });
-    }, [nativeAd, nativeAdView]);
+    const viewRef = useRef<View | null>(null);
+    useNativeAdViewProps('isOptionsViewAvailable', viewRef, 'optionsView');
 
     return <View {...props} ref={viewRef} />;
 };
 
 export const MediaView = (props: ViewProps) => {
-    const viewRef = useRef(null);
-    const { nativeAd, nativeAdView } = useContext(NativeAdViewContext);
-
-    useEffect(() => {
-        if (!nativeAd.isMediaViewAvailable || !viewRef.current) return;
-
-        nativeAdView?.setNativeProps({
-            mediaView: findNodeHandle(viewRef.current),
-        });
-    }, [nativeAd, nativeAdView]);
+    const viewRef = useRef<View | null>(null);
+    useNativeAdViewProps('isMediaViewAvailable', viewRef, 'mediaView');
 
     return <View {...props} ref={viewRef} />;
 };
@@ -142,33 +114,35 @@ export const StarRatingView = (props: ViewProps) => {
 
     const { nativeAd } = useContext(NativeAdViewContext);
 
+    // Memoize the star rendering process
+    const stars = useMemo(() => {
+        if (!nativeAd.starRating) {
+            return Array.from({ length: maxStarCount }).map((_, index) => (
+                <Text key={index} style={{ fontSize: starSize }}>
+                    {' '}
+                </Text>
+            ));
+        }
+
+        return Array.from({ length: maxStarCount }).map((_, index) => {
+            const starRating = nativeAd.starRating!;
+            const width = (starRating - index) * starSize;
+            return (
+                <View key={index}>
+                    <Text style={{ fontSize: starSize, color: starColor }}>{String.fromCodePoint(0x2606)}</Text>
+                    {starRating > index && (
+                        <View style={[{ width: width }, styles.starRating]}>
+                            <Text style={{ fontSize: starSize, color: starColor }}>{String.fromCodePoint(0x2605)}</Text>
+                        </View>
+                    )}
+                </View>
+            );
+        });
+    }, [nativeAd.starRating, starColor, starSize]);
+
     return (
         <View {...restProps} style={[style, styles.starRatingContainer]}>
-            {(() => {
-                const stars: ReactNode[] = [];
-                for (let index = 0; index < maxStarCount; index++) {
-                    if (nativeAd.starRating) {
-                        const width = (nativeAd.starRating - index) * starSize;
-                        stars.push(
-                            <View key={index}>
-                                <Text style={{ fontSize: starSize, color: starColor }}>{String.fromCodePoint(0x2606)}</Text>
-                                {nativeAd.starRating > index && (
-                                    <View style={[{ width: width }, styles.starRating]}>
-                                        <Text style={{ fontSize: starSize, color: starColor }}>{String.fromCodePoint(0x2605)}</Text>
-                                    </View>
-                                )}
-                            </View>
-                        );
-                    } else {
-                        stars.push(
-                            <Text key={index} style={{ fontSize: starSize }}>
-                                {' '}
-                            </Text>
-                        );
-                    }
-                }
-                return stars;
-            })()}
+            {stars}
         </View>
     );
 };

package/src/nativeAd/NativeAdViewProvider.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useState, createContext } from 'react';
+import type { ReactNode } from 'react';
 import type { NativeMethods } from 'react-native';
 import type { NativeAd } from '../types/NativeAd';
 import type { NativeAdViewProps } from '../types/NativeAdViewProps';
@@ -10,29 +11,34 @@ export type NativeAdViewContextType = {
     nativeAd: NativeAd;
     nativeAdView: NativeAdViewType | null;
     setNativeAd: React.Dispatch<React.SetStateAction<NativeAd>>;
-    setNativeAdView: React.Dispatch<React.SetStateAction<NativeAdViewType>>;
+    setNativeAdView: React.Dispatch<React.SetStateAction<NativeAdViewType | null>>;
+};
+
+const defaultNativeAd: NativeAd = {
+    isOptionsViewAvailable: false,
+    isMediaViewAvailable: false,
 };
 
 export const NativeAdViewContext = createContext<NativeAdViewContextType>({
-    nativeAd: { isOptionsViewAvailable: false, isMediaViewAvailable: false },
+    nativeAd: defaultNativeAd,
     nativeAdView: null,
     setNativeAd: () => {},
     setNativeAdView: () => {},
 });
 
-export const NativeAdViewProvider: React.FC<{ children: React.ReactNode }> = (props) => {
-    const [nativeAd, setNativeAd] = useState({
-        isOptionsViewAvailable: false,
-        isMediaViewAvailable: false,
-    });
-    const [nativeAdView, setNativeAdView] = useState(Object);
+export const NativeAdViewProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const [nativeAd, setNativeAd] = useState<NativeAd>(defaultNativeAd);
+    const [nativeAdView, setNativeAdView] = useState<NativeAdViewType | null>(null);
 
-    const providerValue = {
-        nativeAd,
-        nativeAdView,
-        setNativeAd,
-        setNativeAdView,
-    };
+    const providerValue = React.useMemo(
+        () => ({
+            nativeAd,
+            nativeAdView,
+            setNativeAd,
+            setNativeAdView,
+        }),
+        [nativeAd, nativeAdView]
+    );
 
-    return <NativeAdViewContext.Provider value={providerValue}>{props.children}</NativeAdViewContext.Provider>;
+    return <NativeAdViewContext.Provider value={providerValue}>{children}</NativeAdViewContext.Provider>;
 };

package/src/types/AdInfo.ts

@@ -32,7 +32,7 @@ export type AdInfo = {
 
     /**
      *  The ad’s revenue amount. In the case where no revenue amount exists, or it is not available
-     *  yet, return 0.
+     *  yet, returns 0.
      */
     revenue: number;
 
@@ -239,7 +239,7 @@ export type AdWaterfallInfo = {
     networkResponses: AdNetworkResponseInfo[];
 
     /**
-     * The total latency in seconds for this waterfall to finish processing.
+     * The total latency in milliseconds for this waterfall to finish processing.
      */
     latencyMillis: number;
 };

package/src/types/NativeAd.ts

@@ -1,5 +1,5 @@
 /**
- * Represents a native ad for rendering `NativeAdView`.  Internal use only.
+ * Represents a native ad for rendering in {@link NativeAdView}. This type is intended for internal use only.
  */
 export type NativeAd = {
     /**
@@ -30,12 +30,12 @@ export type NativeAd = {
     /**
      * The URL string of the icon.
      */
-    url?: string | null;
+    url?: string;
 
     /**
      * The star rating of the native ad.
      */
-    starRating?: number | null;
+    starRating?: number;
 
     /**
      * Whether or not the Options view is available.

package/src/types/Privacy.ts

@@ -1,8 +1,4 @@
 export type PrivacyType = {
-    /**********************************************************************************/
-    /* Privacy */
-    /**********************************************************************************/
-
     /**
      * Sets whether or not the user provided consent for information-sharing with AppLovin.
      *