react-native-applovin-max 7.1.1 → 8.0.1

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

@@ -1,3 +1,5 @@
+import type { ErrorCode } from '../ErrorCode';
+
 /**
  * Represents an ad that has been served by AppLovin MAX.
  */
@@ -30,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;
 
@@ -70,7 +72,7 @@ export type AdLoadFailedInfo = {
     /**
      * The error code for the error.
      */
-    code: string | null;
+    code: ErrorCode;
 
     /**
      * The error message for the error.
@@ -105,7 +107,7 @@ export type AdDisplayFailedInfo = AdInfo & {
     /**
      * The error code for the error.
      */
-    code: string | null;
+    code: ErrorCode;
 
     /**
      * The error message for the error.
@@ -237,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;
 };
@@ -271,7 +273,7 @@ export type AdErrorInfo = {
     /**
      * The error code for the error.
      */
-    code: number;
+    code: ErrorCode;
 
     /**
      * The error message for the error.

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.
      *
@@ -15,18 +11,6 @@ export type PrivacyType = {
      */
     hasUserConsent(): Promise<boolean>;
 
-    /**
-     * Marks the user as age-restricted (i.e. under 16).
-     *
-     * @param isAgeRestrictedUser true if the user is age restricted (i.e. under 16).
-     */
-    setIsAgeRestrictedUser(isAgeRestrictedUser: boolean): void;
-
-    /**
-     * Checks if the user is age-restricted.
-     */
-    isAgeRestrictedUser(): Promise<boolean>;
-
     /**
      * Sets whether or not the user opted out of the sale of their personal information.
      *