react-native-applovin-max 5.7.2 → 6.0.0

package/src/nativeAd/NativeAdView.tsx

@@ -0,0 +1,161 @@
+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 for 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}
+ *
+ * Each asset view will be filled with the data of a native ad when loaded, but you need to provide
+ * the layout and style of the asset views.  A new native ad can be re-loaded via 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 } 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 = [];
+                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 };