react-native-applovin-max 5.7.2 → 6.0.1

package/src/TargetingData.ts

@@ -0,0 +1,214 @@
+import { NativeModules } from "react-native";
+import type { TargetingDataType } from "./types/TargetingData";
+
+const { AppLovinMAX } = NativeModules;
+
+type NativeTargetingDataType = {
+    setTargetingDataYearOfBirth(value: number): void;
+    getTargetingDataYearOfBirth(): Promise<number>;
+    setTargetingDataGender(value: string): void;
+    getTargetingDataGender(): Promise<string>;
+    setTargetingDataMaximumAdContentRating(value: number): void;
+    getTargetingDataMaximumAdContentRating(): Promise<number>;
+    setTargetingDataEmail(value: string | null): void;
+    getTargetingDataEmail(): Promise<string | null>;
+    setTargetingDataPhoneNumber(value: string | null): void;
+    getTargetingDataPhoneNumber(): Promise<string | null>;
+    setTargetingDataKeywords(value: string[] | null): void;
+    getTargetingDataKeywords(): Promise<string[] | null>;
+    setTargetingDataInterests(value: string[] | null): void;
+    getTargetingDataInterests(): Promise<string[] | null>;
+    clearAllTargetingData(): void;
+};
+
+const nativeMethods: NativeTargetingDataType = AppLovinMAX;
+
+/**
+ * This enumeration represents content ratings for the ads shown to users.
+ */
+export enum AdContentRating {
+    None = 0,
+    AllAudiences = 1,
+    EveryoneOverTwelve = 2,
+    MatureAudiences = 3,
+}
+
+/**
+ * This enumeration represents gender.
+ */
+export enum UserGender {
+    Unknown = 'U',
+    Female = 'F',
+    Male = 'M',
+    Other = 'O',
+}
+
+/**
+ * Defines additional data for the publisher to send to AppLovin.
+ *
+ * @see {@link https://support.applovin.com/hc/en-us/articles/13964925614733-Data-and-Keyword-Passing}
+ */
+export const TargetingData: TargetingDataType = {
+
+    /**
+     * Sets the year of birth of the user. Set this to 0 to clear this value.
+     */
+    set yearOfBirth(value: number | Promise<number>) {
+        if (typeof value === 'number') {
+            nativeMethods.setTargetingDataYearOfBirth(value);
+        } else {
+            printError("TargetingData.yearOfBirth", "number", typeof value);
+        }
+    },
+
+    /**
+     * Gets the year of birth of the user.
+     */
+    get yearOfBirth(): number | Promise<number> {
+        return nativeMethods.getTargetingDataYearOfBirth();
+    },
+
+    /**
+     * Sets the gender of the user. Set this to {@link UserGender.Unknown} to clear this value.
+     */
+    set gender(value: UserGender | Promise<UserGender>) {
+        if (value === UserGender.Unknown ||
+            value === UserGender.Female ||
+            value === UserGender.Male ||
+            value === UserGender.Other) {
+            nativeMethods.setTargetingDataGender(value);
+        } else {
+            printError("TargetingData.gender", "UserGender", typeof value);
+        }
+    },
+
+    /**
+     * Gets the gender of the user.
+     */
+    get gender(): UserGender | Promise<UserGender> {
+        return nativeMethods.getTargetingDataGender().then((value: string) => {
+            return value as UserGender;
+        });
+    },
+
+    /**
+     * Sets the maximum ad content rating shown to the user. The levels are based on IQG Media
+     * Ratings: 1=All Audiences, 2=Everyone Over 12, 3=Mature Audiences.  
+     * Set this to {@link AdContentRating.None} to clear this value.
+     */
+    set maximumAdContentRating(value: AdContentRating | Promise<AdContentRating>) {
+        if (value === AdContentRating.None ||
+            value === AdContentRating.AllAudiences ||
+            value === AdContentRating.EveryoneOverTwelve ||
+            value === AdContentRating.MatureAudiences) {
+            nativeMethods.setTargetingDataMaximumAdContentRating(value);
+        } else {
+            printError("TargetingData.maximumAdContentRating", "AdContentRating", typeof value);
+        }
+    },
+
+    /**
+     * Gets the maximum ad content rating shown to the user. The levels are based on IQG Media
+     * Ratings: 1=All Audiences, 2=Everyone Over 12, 3=Mature Audiences.
+     */
+    get maximumAdContentRating(): AdContentRating | Promise<AdContentRating> {
+        return nativeMethods.getTargetingDataMaximumAdContentRating().then((value: number) => {
+            return value as AdContentRating;
+        });
+    },
+
+    /**
+     * Sets the email of the user. Set this to null to clear this value.
+     */
+    set email(value: string | null | Promise<string | null>) {
+        if (value === null) {
+            nativeMethods.setTargetingDataEmail(null);
+        } else if (typeof value === 'string') {
+            nativeMethods.setTargetingDataEmail(value as string);
+        } else {
+            printError("TargetingData.email", "string or null", typeof value);
+        }
+    },
+
+    /**
+     * Gets the email of the user.
+     */
+    get email(): string | null | Promise<string | null> {
+        return nativeMethods.getTargetingDataEmail();
+    },
+
+    /**
+     * Sets the phone number of the user. Set this to null to clear this value.
+     */
+    set phoneNumber(value: string | null | Promise<string | null>) {
+        if (value === null) {
+            nativeMethods.setTargetingDataPhoneNumber(null);
+        } else if ( typeof value === 'string') {
+            nativeMethods.setTargetingDataPhoneNumber(value as string);
+        } else {
+            printError("TargetingData.phoneNumber", "string or null", typeof value);
+        }
+    },
+
+    /**
+     * Gets the phone number of the user.
+     */
+    get phoneNumber(): string | null | Promise<string | null> {
+        return nativeMethods.getTargetingDataPhoneNumber();
+    },
+
+    /**
+     * Sets the keywords describing the application. Set this to null to clear this value.
+     */
+    set keywords(value: string[] | null | Promise<string[]> | null) {
+        if (value === null) {
+            nativeMethods.setTargetingDataKeywords(null);
+        } else if (isStringArray(value)) {
+            nativeMethods.setTargetingDataKeywords(value as string[]);
+        } else {
+            printError("TargetingData.keywords", "string[] or null", typeof value);
+        }
+    },
+
+    /**
+     * Gets the keywords describing the application.
+     */
+    get keywords(): string[] | null | Promise<string[] | null> {
+        return nativeMethods.getTargetingDataKeywords();
+    },
+
+    /**
+     * Sets the interests of the user. Set this to null to clear this value.
+     */
+    set interests(value: string[] | null | Promise<string[] | null>) {
+        if (value === null) {
+            nativeMethods.setTargetingDataInterests(null);
+        } else if (isStringArray(value)) {
+            nativeMethods.setTargetingDataInterests(value as string[]);
+        } else {
+            printError("TargetingData.interests", "string[] or null", typeof value);
+        }
+    },
+
+    /**
+     * Gets the interests of the user.
+     */
+    get interests(): string[] | null | Promise<string[] | null> {
+        return nativeMethods.getTargetingDataInterests();
+    },
+
+    /**
+     * Clears all saved data from this class.
+     */
+    clearAll(): void {
+        nativeMethods.clearAllTargetingData();
+    },
+}
+
+const isStringArray = (strs: any): boolean => {
+    return Array.isArray(strs) && strs.every((value) => typeof value === 'string')
+}
+
+const printError = (fieldName: string, correctType: string, wrongType: string) => {
+    console.error("Cannot set value to " +  fieldName + " with unsupported type: " + wrongType  + ".  Value has to be of type " + correctType + ".");
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+export { default, AppLovinMAX } from "./AppLovinMAX";
+export { Privacy } from "./Privacy";
+export { TargetingData, AdContentRating, UserGender } from "./TargetingData";
+export { InterstitialAd } from "./InterstitialAd";
+export { RewardedAd } from "./RewardedAd";
+export { AppOpenAd } from "./AppOpenAd";
+export { BannerAd } from "./BannerAd";
+export { MRecAd } from "./MRecAd";
+export { AdView, AdFormat, AdViewPosition } from "./AdView";
+export { NativeAdView } from "./nativeAd/NativeAdView";
+export {
+    TitleView,
+    AdvertiserView,
+    BodyView,
+    CallToActionView,
+    IconView,
+    OptionsView,
+    MediaView,
+    StarRatingView,
+} from "./nativeAd/NativeAdViewComponents";
+export * from "./types";

package/src/nativeAd/NativeAdView.tsx

@@ -0,0 +1,162 @@
+import React, { forwardRef, useContext, useImperativeHandle, useRef, useState, useEffect, useCallback } from "react";
+import { NativeModules, requireNativeComponent, UIManager, findNodeHandle } from "react-native";
+import type { ViewProps } from "react-native";
+import { NativeAdViewContext, NativeAdViewProvider } from "./NativeAdViewProvider";
+import type { AdInfo, AdLoadFailedInfo, AdRevenueInfo } from "../types/AdInfo";
+import type { AdNativeEvent } from "../types/AdEvent";
+import type { NativeAd } from "../types/NativeAd";
+import type { NativeAdViewHandler, NativeAdViewProps } from "../types/NativeAdViewProps";
+import type { NativeAdViewType, NativeAdViewContextType } from "./NativeAdViewProvider";
+
+const { AppLovinMAX } = NativeModules;
+
+type NativeAdViewNativeEvents = {
+    onAdLoadedEvent(event: { nativeEvent: { nativeAd: NativeAd; adInfo: AdInfo; } }): void
+    onAdLoadFailedEvent(event: AdNativeEvent<AdLoadFailedInfo>): void
+    onAdClickedEvent(event: AdNativeEvent<AdInfo>): void
+    onAdRevenuePaidEvent(event: AdNativeEvent<AdRevenueInfo>): void
+};
+
+const NativeAdViewComponent = requireNativeComponent<NativeAdViewProps & ViewProps & NativeAdViewNativeEvents>('AppLovinMAXNativeAdView');
+
+/**
+ * The {@link NativeAdView} component that you use building a native ad. This loads a native ad and
+ * renders it with the asset views:
+ *
+ * - {@link IconView}
+ * - {@link TitleView}
+ * - {@link AdvertiserView}
+ * - {@link StarRatingView}
+ * - {@link BodyView}
+ * - {@link MediaView}
+ * - {@link CallToActionView}
+ *
+ * {@link NativeAdView} fills each asset view with the data of a native ad as soon as it loads the native
+ * ad, but you need to provide the layout and style of the asset views.
+ * {@link NativeAdView} can reload a new native ad by using the ref handler.
+ * 
+ * ### Example:
+ * ```js
+ * <NativeAdView
+ *   ref={nativeAdViewHandler}
+ *   adUnitId={adUnitId}
+ *   style={styles.nativead}
+ *   onAdLoaded={(adInfo: AdInfo) => { ... }}
+ * >
+ *   <View style={ ... }>
+ *     <IconView style={styles.icon} />
+ *     <TitleView style={styles.title} />
+ *     <AdvertiserView style={styles.advertiser} />
+ *     <StarRatingView style={styles.starRatingView} />
+ *     <OptionsView style={styles.optionsView} />
+ *     <BodyView style={styles.body} />
+ *     <MediaView style={styles.mediaView} />
+ *     <CallToActionView style={styles.callToAction} />
+ *   </View>
+ * </NativeAdView>
+ * ```
+ */
+export const NativeAdView = forwardRef<NativeAdViewHandler, NativeAdViewProps & ViewProps>((props, ref) => {
+    const [isInitialized, setIsInitialized] = useState<boolean>(false);
+
+    useEffect(() => {
+        // check that AppLovinMAX has been initialized
+        AppLovinMAX.isInitialized().then((result: boolean) => {
+            setIsInitialized(result);
+            if (!result) {
+                console.warn("ERROR: NativeAdView is mounted before the initialization of the AppLovin MAX React Native module");
+            }
+        });
+    }, []);
+
+    // Not ready to render NativeAdView
+    if (!isInitialized) {
+        return null;
+    }
+
+    return (
+        <NativeAdViewProvider>
+            <NativeAdViewImpl {...props} ref={ref} />
+        </NativeAdViewProvider>
+    );
+});
+
+const NativeAdViewImpl = forwardRef<NativeAdViewHandler, NativeAdViewProps & ViewProps>(({
+    adUnitId,
+    placement,
+    customData,
+    extraParameters,
+    localExtraParameters,
+    onAdLoaded,
+    onAdLoadFailed,
+    onAdClicked,
+    onAdRevenuePaid,
+    children,
+    style,
+    ...otherProps
+}, ref) => {
+
+    // context from NativeAdViewProvider
+    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) {
+            UIManager.dispatchViewManagerCommand(
+                findNodeHandle(nativeAdViewRef.current),
+                UIManager.getViewManagerConfig("AppLovinMAXNativeAdView").Commands.loadAd,
+                undefined
+            );
+        }
+    };
+
+    // expose a list of functions via the provided ref
+    useImperativeHandle(ref, () => ({ loadAd }), []);
+
+    // save the DOM element via the ref callback
+    const saveElement = useCallback((element: NativeAdViewType | null) => {
+        if (element) {
+            nativeAdViewRef.current = element;
+            setNativeAdView(element);
+        }
+    }, []);
+
+    const onAdLoadedEvent = (event: { nativeEvent: { nativeAd: NativeAd; adInfo: AdInfo; } }) => {
+        setNativeAd(event.nativeEvent.nativeAd);
+        if (onAdLoaded) onAdLoaded(event.nativeEvent.adInfo);
+    };
+
+    const onAdLoadFailedEvent = (event: AdNativeEvent<AdLoadFailedInfo>) => {
+        if (onAdLoadFailed) onAdLoadFailed(event.nativeEvent);
+    };
+
+    const onAdClickedEvent = (event: AdNativeEvent<AdInfo>) => {
+        if (onAdClicked) onAdClicked(event.nativeEvent);
+    };
+
+    const onAdRevenuePaidEvent = (event: AdNativeEvent<AdRevenueInfo>) => {
+        if (onAdRevenuePaid) onAdRevenuePaid(event.nativeEvent);
+    };
+
+    return (
+        <NativeAdViewComponent
+            ref={saveElement}
+            adUnitId={adUnitId}
+            placement={placement}
+            customData={customData}
+            extraParameters={extraParameters}
+            localExtraParameters={localExtraParameters}
+            onAdLoadedEvent={onAdLoadedEvent}
+            onAdLoadFailedEvent={onAdLoadFailedEvent}
+            onAdClickedEvent={onAdClickedEvent}
+            onAdRevenuePaidEvent={onAdRevenuePaidEvent}
+            style={style}
+            {...otherProps}
+        >
+            {children}
+        </NativeAdViewComponent>
+    );
+});

package/src/nativeAd/NativeAdViewComponents.tsx

@@ -0,0 +1,185 @@
+import React, { useContext, useRef, useEffect, type ReactNode } from "react";
+import { findNodeHandle, Text, Image, View, TouchableOpacity, StyleSheet } from "react-native";
+import type { ViewProps, ImageProps, TextStyle, StyleProp } from "react-native";
+import { NativeAdViewContext } from "./NativeAdViewProvider";
+
+export const TitleView = (props: ViewProps) => {
+    const titleRef = useRef(null);
+    const { nativeAd, nativeAdView } = useContext(NativeAdViewContext);
+
+    useEffect(() => {
+        if (!nativeAd.title || !titleRef.current) return;
+
+        nativeAdView?.setNativeProps({
+            titleView: findNodeHandle(titleRef.current),
+        });
+    }, [nativeAd]);
+
+    return (
+        <Text {...props} ref={titleRef}>
+            {nativeAd.title || null}
+        </Text>
+    );
+};
+
+export const AdvertiserView = (props: ViewProps) => {
+    const advertiserRef = useRef(null);
+    const { nativeAd, nativeAdView } = useContext(NativeAdViewContext);
+
+    useEffect(() => {
+        if (!nativeAd.advertiser || !advertiserRef.current) return;
+
+        nativeAdView?.setNativeProps({
+            advertiserView: findNodeHandle(advertiserRef.current),
+        });
+    }, [nativeAd]);
+
+    return (
+        <Text {...props} ref={advertiserRef}>
+            {nativeAd.advertiser || null}
+        </Text>
+    );
+};
+
+export const BodyView = (props: ViewProps) => {
+    const bodyRef = useRef(null);
+    const { nativeAd, nativeAdView } = useContext(NativeAdViewContext);
+
+    useEffect(() => {
+        if (!nativeAd.body || !bodyRef.current) return;
+
+        nativeAdView?.setNativeProps({
+            bodyView: findNodeHandle(bodyRef.current),
+        });
+    }, [nativeAd]);
+
+    return (
+        <Text {...props} ref={bodyRef}>
+            {nativeAd.body || null}
+        </Text>
+    );
+};
+
+export const CallToActionView = (props: ViewProps) => {
+    const callToActionRef = useRef(null);
+    const { nativeAd, nativeAdView } = useContext(NativeAdViewContext);
+
+    useEffect(() => {
+        if (!nativeAd.callToAction || !callToActionRef.current) return;
+
+        nativeAdView?.setNativeProps({
+            callToActionView: findNodeHandle(callToActionRef.current),
+        });
+    }, [nativeAd]);
+
+    return (
+        <TouchableOpacity {...props}>
+            <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 || !imageRef.current) return;
+
+        nativeAdView?.setNativeProps({
+            iconView: findNodeHandle(imageRef.current),
+        });
+    }, [nativeAd]);
+
+    return (
+        nativeAd.url ? <Image {...props} source={{ uri: nativeAd.url }} /> :
+            nativeAd.image ? <Image {...props} ref={imageRef} source={0} /> :
+                <View {...props} />
+    );
+};
+
+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]);
+
+    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]);
+
+    return (
+        <View {...props} ref={viewRef} />
+    );
+};
+
+export const StarRatingView = (props: ViewProps) => {
+    const { style, ...restProps } = props;
+
+    const maxStarCount = 5;
+    const starColor = StyleSheet.flatten(style as StyleProp<TextStyle> || {}).color ?? "#ffe234";
+    const starSize = StyleSheet.flatten(style as StyleProp<TextStyle> || {}).fontSize ?? 10;
+
+    const { nativeAd } = useContext(NativeAdViewContext);
+
+    const FilledStar = () => {
+        return (
+            // black star in unicode
+            <Text style={{ fontSize: starSize, color: starColor }}>{String.fromCodePoint(0x2605)}</Text>
+        );
+    };
+
+    const EmptyStar = () => {
+        return (
+            // white star in unicode
+            <Text style={{ fontSize: starSize, color: starColor }}>{String.fromCodePoint(0x2606)}</Text>
+        );
+    };
+
+    return (
+        <View {...restProps} style={[style, { flexDirection: 'row', alignItems: 'center' }]}>
+            {(() => {
+                let stars: ReactNode[] = [];
+                for (let index = 0; index < maxStarCount; index++) {
+                    if (nativeAd.starRating) {
+                        const width = (nativeAd.starRating - index) * starSize;
+                        stars.push(
+                            <View key={index}>
+                                <EmptyStar />
+                                {
+                                    (nativeAd.starRating > index) &&
+                                    <View style={{ width: width, overflow: 'hidden', position: 'absolute' }}>
+                                        <FilledStar />
+                                    </View>
+                                }
+                            </View>
+                        );
+                    } else {
+                        stars.push(<Text key={index} style={{ fontSize: starSize }}> </Text>);
+                    }
+                }
+                return stars;
+            })()}
+        </View>
+    );
+};

package/src/nativeAd/NativeAdViewProvider.tsx

@@ -0,0 +1,35 @@
+import React, { useState, createContext } from "react";
+import type { NativeMethods } from "react-native";
+import type { NativeAd } from "../types/NativeAd";
+import type { NativeAdViewProps } from "../types/NativeAdViewProps";
+
+export type NativeAdViewType = React.Component<NativeAdViewProps> & NativeMethods;
+
+export type NativeAdViewContextType = {
+    nativeAd: NativeAd;
+    nativeAdView: NativeAdViewType | null;
+    setNativeAd: React.Dispatch<React.SetStateAction<NativeAd>>;
+    setNativeAdView: React.Dispatch<React.SetStateAction<NativeAdViewType>>;
+};
+
+export const NativeAdViewContext = createContext<NativeAdViewContextType>({
+    nativeAd: { isOptionsViewAvailable: false, isMediaViewAvailable: false },
+    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);
+
+    const providerValue = {
+        nativeAd, nativeAdView, setNativeAd, setNativeAdView,
+    };
+
+    return (
+        <NativeAdViewContext.Provider value={providerValue}>
+            {props.children}
+        </NativeAdViewContext.Provider>
+    );
+};

package/src/types/AdEvent.ts

@@ -0,0 +1,26 @@
+import type {
+    AdInfo,
+    AdLoadFailedInfo,
+    AdDisplayFailedInfo,
+    AdRevenueInfo,
+    AdRewardInfo
+} from "./AdInfo";
+
+export type AdEventObject =
+    AdInfo |
+    AdLoadFailedInfo |
+    AdDisplayFailedInfo |
+    AdRevenueInfo |
+    AdRewardInfo;
+
+/**
+ * Defines a generic event listener for the pragrammatic methods to receive an event from the native
+ * module.
+ */
+export type AdEventListener<T extends AdEventObject> = (event: T) => void;
+
+/**
+ * Defines a generic event object for the UI components i.e. AdView and NativeAdView to receive an
+ * event from the native module.
+ */
+export type AdNativeEvent<T extends AdEventObject> = { nativeEvent: T };