react-native-applovin-max 8.2.0 → 9.0.0

package/src/BannerAd.ts

@@ -1,11 +1,9 @@
-import { NativeModules } from 'react-native';
 import { addEventListener, removeEventListener } from './EventEmitter';
 import type { AdInfo, AdLoadFailedInfo } from './types/AdInfo';
 import type { LocalExtraParameterValue } from './types/AdProps';
 import type { BannerAdType } from './types/BannerAd';
 import type { AdViewPosition } from './AdView';
-
-const { AppLovinMAX } = NativeModules;
+import AppLovinMAX from './specs/NativeAppLovinMAXModule';
 
 const {
     ON_BANNER_AD_LOADED_EVENT,

package/src/ErrorCode.ts

@@ -1,6 +1,4 @@
-import { NativeModules } from 'react-native';
-
-const { AppLovinMAX } = NativeModules;
+import AppLovinMAX from './specs/NativeAppLovinMAXModule';
 
 const {
     MAX_ERROR_CODE_UNSPECIFIED,

package/src/EventEmitter.ts

@@ -1,8 +1,7 @@
-import { NativeModules, NativeEventEmitter } from 'react-native';
+import { NativeEventEmitter } from 'react-native';
 import type { EventSubscription } from 'react-native';
 import type { AdEventObject, AdEventListener } from './types/AdEvent';
-
-const { AppLovinMAX } = NativeModules;
+import AppLovinMAX from './specs/NativeAppLovinMAXModule';
 
 // Note that this is a singleton in ES6 module
 const emitter = new NativeEventEmitter(AppLovinMAX);

package/src/InterstitialAd.ts

@@ -1,10 +1,8 @@
-import { NativeModules } from 'react-native';
 import { addEventListener, removeEventListener } from './EventEmitter';
 import type { AdDisplayFailedInfo, AdInfo, AdLoadFailedInfo } from './types/AdInfo';
 import type { LocalExtraParameterValue } from './types/AdProps';
 import type { InterstitialAdType } from './types/InterstitialAd';
-
-const { AppLovinMAX } = NativeModules;
+import AppLovinMAX from './specs/NativeAppLovinMAXModule';
 
 const {
     ON_INTERSTITIAL_LOADED_EVENT,
@@ -25,7 +23,7 @@ const loadAd = (adUnitId: string): void => {
 };
 
 const showAd = (adUnitId: string, placement?: string | null, customData?: string | null): void => {
-    AppLovinMAX.showInterstitial(adUnitId, placement ?? null, customData ?? null);
+    AppLovinMAX.showInterstitial(adUnitId, placement ?? undefined, customData ?? undefined);
 };
 
 const setExtraParameter = (adUnitId: string, key: string, value: string | null): void => {

package/src/MRecAd.ts

@@ -1,11 +1,9 @@
-import { NativeModules } from 'react-native';
 import { addEventListener, removeEventListener } from './EventEmitter';
 import type { AdInfo, AdLoadFailedInfo } from './types/AdInfo';
 import type { LocalExtraParameterValue } from './types/AdProps';
 import type { MRecAdType } from './types/MRecAd';
 import type { AdViewPosition } from './AdView';
-
-const { AppLovinMAX } = NativeModules;
+import AppLovinMAX from './specs/NativeAppLovinMAXModule';
 
 const { ON_MREC_AD_LOADED_EVENT, ON_MREC_AD_LOAD_FAILED_EVENT, ON_MREC_AD_CLICKED_EVENT, ON_MREC_AD_COLLAPSED_EVENT, ON_MREC_AD_EXPANDED_EVENT, ON_MREC_AD_REVENUE_PAID } =
     AppLovinMAX.getConstants();

package/src/Privacy.ts

@@ -1,6 +1,4 @@
-import { NativeModules } from 'react-native';
 import type { PrivacyType } from './types/Privacy';
-
-const { AppLovinMAX } = NativeModules;
+import AppLovinMAX from './specs/NativeAppLovinMAXModule';
 
 export const Privacy: PrivacyType = AppLovinMAX;

package/src/RewardedAd.ts

@@ -1,10 +1,8 @@
-import { NativeModules } from 'react-native';
 import { addEventListener, removeEventListener } from './EventEmitter';
 import type { AdDisplayFailedInfo, AdInfo, AdLoadFailedInfo, AdRewardInfo } from './types/AdInfo';
 import type { LocalExtraParameterValue } from './types/AdProps';
 import type { RewardedAdType } from './types/RewardedAd';
-
-const { AppLovinMAX } = NativeModules;
+import AppLovinMAX from './specs/NativeAppLovinMAXModule';
 
 const {
     ON_REWARDED_AD_LOADED_EVENT,
@@ -26,7 +24,7 @@ const loadAd = (adUnitId: string): void => {
 };
 
 const showAd = (adUnitId: string, placement?: string | null, customData?: string | null): void => {
-    AppLovinMAX.showRewardedAd(adUnitId, placement ?? null, customData ?? null);
+    AppLovinMAX.showRewardedAd(adUnitId, placement ?? undefined, customData ?? undefined);
 };
 
 const setExtraParameter = (adUnitId: string, key: string, value: string | null): void => {

package/src/Utils.ts

@@ -0,0 +1,26 @@
+import type { LocalExtraParameterValue } from './types/AdProps';
+
+export const makeExtraParametersArray = (input?: Record<string, string | null>) => (input ? Object.entries(input).map(([key, value]) => ({ key, value })) : []);
+
+type LocalExtraParameterType = 'str' | 'bool';
+
+type LocalExtraParameterValueMap = {
+    str: string | null;
+    bool: boolean | null;
+};
+
+export const makeLocalExtraParametersArray = <T extends LocalExtraParameterType>(
+    input: Record<string, LocalExtraParameterValue> | undefined,
+    type: T
+): { key: string; value: LocalExtraParameterValueMap[T] }[] => {
+    if (!input) return [];
+
+    return Object.entries(input)
+        .filter(([_, value]) => {
+            if (value === null) return true;
+            if (type === 'str') return typeof value === 'string';
+            if (type === 'bool') return typeof value === 'boolean';
+            return false;
+        })
+        .map(([key, value]) => ({ key, value: value as LocalExtraParameterValueMap[T] }));
+};

package/src/nativeAd/NativeAdView.tsx

@@ -1,24 +1,14 @@
 import * as React from 'react';
 import { forwardRef, useContext, useImperativeHandle, useRef, useState, useEffect, useCallback } from 'react';
-import { NativeModules, requireNativeComponent, UIManager, findNodeHandle, View } from 'react-native';
-import type { ViewProps } from 'react-native';
+import { findNodeHandle, View } from 'react-native';
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+import AppLovinMAX from '../specs/NativeAppLovinMAXModule';
+import NativeAdViewComponent, { Commands } from '../specs/AppLovinMAXNativeAdViewNativeComponent';
+import type { AdInfoEvent, AdLoadFailedEvent } from '../specs/AppLovinMAXNativeAdViewNativeComponent';
 import { NativeAdViewContext, NativeAdViewProvider } from './NativeAdViewProvider';
-import type { AdInfo, AdLoadFailedInfo } from '../types/AdInfo';
-import type { AdNativeEvent } from '../types/AdEvent';
-import type { NativeAd } from '../types/NativeAd';
+import type { NativeAdViewContextType } from './NativeAdViewProvider';
 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<AdInfo>): void;
-};
-
-const NativeAdViewComponent = requireNativeComponent<NativeAdViewProps & ViewProps & NativeAdViewNativeEvents>('AppLovinMAXNativeAdView');
+import { makeExtraParametersArray, makeLocalExtraParametersArray } from '../Utils';
 
 /**
  * The {@link NativeAdView} component that you use building a native ad. This loads a native ad and
@@ -61,15 +51,13 @@ export const NativeAdView = forwardRef<NativeAdViewHandler, NativeAdViewProps &
     const [isInitialized, setIsInitialized] = useState<boolean>(false);
 
     useEffect(() => {
-        const checkInitialization = async () => {
+        (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.');
             }
-        };
-
-        checkInitialization();
+        })();
     }, []);
 
     // Avoid rendering the NativeAdView if the SDK is not initialized
@@ -84,76 +72,88 @@ export const NativeAdView = forwardRef<NativeAdViewHandler, NativeAdViewProps &
     );
 });
 
+const handleNativeAdViewEvent = <T extends AdInfoEvent | AdLoadFailedEvent>(event: NativeSyntheticEvent<T>, callback?: (adInfo: T) => void) => {
+    if (!callback) return;
+
+    let adInfo: any = { ...event.nativeEvent };
+
+    if ('nativeAd' in event.nativeEvent) {
+        adInfo.nativeAd = {
+            ...event.nativeEvent.nativeAd,
+            isIconImageAvailable: event.nativeEvent.nativeAd?.isIconImageAvailable ?? false,
+            isOptionsViewAvailable: event.nativeEvent.nativeAd?.isOptionsViewAvailable ?? false,
+            isMediaViewAvailable: event.nativeEvent.nativeAd?.isMediaViewAvailable ?? false,
+        };
+    }
+
+    callback(adInfo);
+};
+
 const NativeAdViewImpl = forwardRef<NativeAdViewHandler, NativeAdViewProps & ViewProps>(function NativeAdViewImpl(
     { adUnitId, placement, customData, extraParameters, localExtraParameters, onAdLoaded, onAdLoadFailed, onAdClicked, onAdRevenuePaid, children, style, ...otherProps },
     ref
 ) {
     // Context provides functions to manage native ad and native ad view state
-    const { setNativeAd, setNativeAdView } = useContext(NativeAdViewContext) as NativeAdViewContextType;
+    const { titleRef, advertiserRef, bodyRef, callToActionRef, imageRef, optionViewRef, mediaViewRef, setNativeAd } = useContext(NativeAdViewContext) as NativeAdViewContextType;
 
-    const nativeAdViewRef = useRef<NativeAdViewType | null>(null);
+    const nativeAdViewRef = useRef<React.ElementRef<typeof NativeAdViewComponent> | undefined>();
 
     // Load a new ad
     const loadAd = useCallback(() => {
-        const nativeAdView = nativeAdViewRef.current;
-        if (nativeAdView) {
-            const viewManagerConfig = UIManager.getViewManagerConfig('AppLovinMAXNativeAdView');
-            if (viewManagerConfig?.Commands && typeof viewManagerConfig.Commands.loadAd === 'number') {
-                UIManager.dispatchViewManagerCommand(findNodeHandle(nativeAdView), viewManagerConfig.Commands.loadAd, []);
-            }
-        }
+        nativeAdViewRef.current && Commands.loadAd(nativeAdViewRef.current);
     }, []);
 
     useImperativeHandle(ref, () => ({ loadAd }), [loadAd]);
 
-    // Save the DOM element reference
-    const saveElement = useCallback(
-        (element: NativeAdViewType | null) => {
-            if (element) {
-                nativeAdViewRef.current = element;
-                setNativeAdView(element);
-            }
-        },
-        [setNativeAdView]
-    );
+    const updateAssetView = useCallback((assetViewRef: React.RefObject<View>, type: string) => {
+        if (!nativeAdViewRef.current || !assetViewRef.current) return;
+
+        const node = findNodeHandle(assetViewRef.current);
+        if (node) {
+            Commands.updateAssetView(nativeAdViewRef.current, node, type);
+        }
+    }, []);
 
     const onAdLoadedEvent = useCallback(
-        (event: { nativeEvent: { nativeAd: NativeAd; adInfo: AdInfo } }) => {
-            setNativeAd(event.nativeEvent.nativeAd);
-            onAdLoaded?.(event.nativeEvent.adInfo);
-        },
-        [onAdLoaded, setNativeAd]
-    );
+        (event: NativeSyntheticEvent<AdInfoEvent>) => {
+            const nativeAdImpl = event.nativeEvent.nativeAdImpl;
+
+            if (nativeAdImpl) {
+                setNativeAd({ ...nativeAdImpl });
+
+                if (nativeAdImpl.title) updateAssetView(titleRef, 'TitleView');
+                if (nativeAdImpl.advertiser) updateAssetView(advertiserRef, 'AdvertiserView');
+                if (nativeAdImpl.body) updateAssetView(bodyRef, 'BodyView');
+                if (nativeAdImpl.callToAction) updateAssetView(callToActionRef, 'CallToActionView');
+                if (nativeAdImpl.url || nativeAdImpl.image || nativeAdImpl.imageSource) updateAssetView(imageRef, 'IconView');
+                if (nativeAdImpl.isOptionsViewAvailable) updateAssetView(optionViewRef, 'OptionsView');
+                if (nativeAdImpl.isMediaViewAvailable) updateAssetView(mediaViewRef, 'MediaView');
+            }
 
-    const onAdLoadFailedEvent = useCallback(
-        (event: AdNativeEvent<AdLoadFailedInfo>) => {
-            onAdLoadFailed?.(event.nativeEvent);
-        },
-        [onAdLoadFailed]
-    );
+            if (nativeAdViewRef.current) {
+                Commands.renderNativeAd(nativeAdViewRef.current);
+            }
 
-    const onAdClickedEvent = useCallback(
-        (event: AdNativeEvent<AdInfo>) => {
-            onAdClicked?.(event.nativeEvent);
+            handleNativeAdViewEvent(event, onAdLoaded);
         },
-        [onAdClicked]
+        [setNativeAd, onAdLoaded, updateAssetView, titleRef, advertiserRef, bodyRef, callToActionRef, imageRef, optionViewRef, mediaViewRef]
     );
 
-    const onAdRevenuePaidEvent = useCallback(
-        (event: AdNativeEvent<AdInfo>) => {
-            onAdRevenuePaid?.(event.nativeEvent);
-        },
-        [onAdRevenuePaid]
-    );
+    const onAdLoadFailedEvent = useCallback((event: NativeSyntheticEvent<AdLoadFailedEvent>) => handleNativeAdViewEvent(event, onAdLoadFailed), [onAdLoadFailed]);
+
+    const onAdClickedEvent = useCallback((event: NativeSyntheticEvent<AdInfoEvent>) => handleNativeAdViewEvent(event, onAdClicked), [onAdClicked]);
+
+    const onAdRevenuePaidEvent = useCallback((event: NativeSyntheticEvent<AdInfoEvent>) => handleNativeAdViewEvent(event, onAdRevenuePaid), [onAdRevenuePaid]);
 
     return (
         <NativeAdViewComponent
-            ref={saveElement}
+            ref={(element) => (nativeAdViewRef.current = element ?? undefined)}
             adUnitId={adUnitId}
             placement={placement}
             customData={customData}
-            extraParameters={extraParameters}
-            localExtraParameters={localExtraParameters}
+            extraParameters={makeExtraParametersArray(extraParameters)}
+            strLocalExtraParameters={makeLocalExtraParametersArray(localExtraParameters, 'str')}
+            boolLocalExtraParameters={makeLocalExtraParametersArray(localExtraParameters, 'bool')}
             onAdLoadedEvent={onAdLoadedEvent}
             onAdLoadFailedEvent={onAdLoadFailedEvent}
             onAdClickedEvent={onAdClickedEvent}

package/src/nativeAd/NativeAdViewComponents.tsx

@@ -1,77 +1,50 @@
 import * as React from 'react';
-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 { useContext, useMemo } from 'react';
+import { Text, Image, View, TouchableOpacity, StyleSheet, Platform } from 'react-native';
+import type { ViewProps, ImageProps, TextStyle, TextProps } from 'react-native';
 import { NativeAdViewContext } from './NativeAdViewProvider';
-import type { NativeAd } from '../types/NativeAd';
-
-// 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);
-
-    const setNativeProps = useCallback(() => {
-        if (!nativeAd[nativeAdProp] || !ref.current) return;
-        nativeAdView?.setNativeProps({
-            [nativePropKey]: findNodeHandle(ref.current),
-        });
-    }, [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');
-
+    const { titleRef, nativeAd } = useContext(NativeAdViewContext);
     return (
         <Text {...props} ref={titleRef}>
-            {nativeAd.title || null}
+            {nativeAd.title ?? ''}
         </Text>
     );
 };
 
 export const AdvertiserView = (props: TextProps) => {
-    const advertiserRef = useRef<Text | null>(null);
-    const nativeAd = useNativeAdViewProps('advertiser', advertiserRef, 'advertiserView');
-
+    const { advertiserRef, nativeAd } = useContext(NativeAdViewContext);
     return (
         <Text {...props} ref={advertiserRef}>
-            {nativeAd.advertiser || null}
+            {nativeAd.advertiser ?? ''}
         </Text>
     );
 };
 
 export const BodyView = (props: TextProps) => {
-    const bodyRef = useRef<Text | null>(null);
-    const nativeAd = useNativeAdViewProps('body', bodyRef, 'bodyView');
-
+    const { bodyRef, nativeAd } = useContext(NativeAdViewContext);
     return (
         <Text {...props} ref={bodyRef}>
-            {nativeAd.body || null}
+            {nativeAd.body ?? ''}
         </Text>
     );
 };
 
 export const CallToActionView = (props: TextProps) => {
-    const callToActionRef = useRef<Text | null>(null);
-    const nativeAd = useNativeAdViewProps('callToAction', callToActionRef, 'callToActionView');
-
+    const { callToActionRef, nativeAd } = useContext(NativeAdViewContext);
     // TouchableOpacity disables clicking on certain Android devices.
     if (Platform.OS === 'android') {
         return (
             <Text {...props} ref={callToActionRef}>
-                {nativeAd.callToAction || null}
+                {nativeAd.callToAction ?? ''}
             </Text>
         );
     } else {
         return (
             <TouchableOpacity>
                 <Text {...props} ref={callToActionRef}>
-                    {nativeAd.callToAction || null}
+                    {nativeAd.callToAction ?? ''}
                 </Text>
             </TouchableOpacity>
         );
@@ -79,39 +52,38 @@ export const CallToActionView = (props: TextProps) => {
 };
 
 export const IconView = (props: Omit<ImageProps, 'source'>) => {
-    const imageRef = useRef<Image | null>(null);
-    const nativeAd = useNativeAdViewProps('image', imageRef, 'iconView');
+    const { imageRef, nativeAd } = useContext(NativeAdViewContext);
+    const defaultIcon = require('./img/blank_icon.png');
 
-    return nativeAd.url ? (
-        <Image {...props} ref={imageRef} source={{ uri: nativeAd.url }} />
-    ) : nativeAd.image ? (
-        <Image {...props} ref={imageRef} source={0} />
-    ) : (
-        <View {...props} />
-    );
+    const imageSource = (() => {
+        if (nativeAd?.url) {
+            return { uri: nativeAd.url };
+        }
+        if (nativeAd?.imageSource) {
+            return { uri: `data:image/jpeg;base64,${nativeAd.imageSource}` };
+        }
+        return defaultIcon;
+    })();
+
+    return <Image {...props} ref={imageRef} source={imageSource} />;
 };
 
 export const OptionsView = (props: ViewProps) => {
-    const viewRef = useRef<View | null>(null);
-    useNativeAdViewProps('isOptionsViewAvailable', viewRef, 'optionsView');
-
-    return <View {...props} ref={viewRef} />;
+    const { optionViewRef } = useContext(NativeAdViewContext);
+    return <View {...props} ref={optionViewRef} />;
 };
 
 export const MediaView = (props: ViewProps) => {
-    const viewRef = useRef<View | null>(null);
-    useNativeAdViewProps('isMediaViewAvailable', viewRef, 'mediaView');
-
-    return <View {...props} ref={viewRef} />;
+    const { mediaViewRef } = useContext(NativeAdViewContext);
+    return <View {...props} ref={mediaViewRef} />;
 };
 
 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 starTextStyle = useMemo(() => StyleSheet.flatten(style) as TextStyle, [style]);
+    const starColor = starTextStyle.color ?? '#ffe234';
+    const starSize = starTextStyle.fontSize ?? 10;
     const { nativeAd } = useContext(NativeAdViewContext);
 
     // Memoize the star rendering process

package/src/nativeAd/NativeAdViewProvider.tsx

@@ -1,17 +1,26 @@
 import * as React from 'react';
-import { useState, createContext } from 'react';
+import { useState, createContext, useRef } from 'react';
 import type { ReactNode } from 'react';
-import type { NativeMethods } from 'react-native';
+import type { Image, NativeMethods, Text, View } from 'react-native';
 import type { NativeAd } from '../types/NativeAd';
-import type { NativeAdViewProps } from '../types/NativeAdViewProps';
+import type { NativeProps } from '../specs/AppLovinMAXNativeAdViewNativeComponent';
 
-export type NativeAdViewType = React.Component<NativeAdViewProps> & NativeMethods;
+export type NativeAdViewType = React.Component<NativeProps> & NativeMethods;
+
+type TextRef = React.ElementRef<typeof Text>;
+type ImageRef = React.ElementRef<typeof Image>;
+type ViewRef = React.ElementRef<typeof View>;
 
 export type NativeAdViewContextType = {
+    titleRef: React.RefObject<TextRef>;
+    advertiserRef: React.RefObject<TextRef>;
+    bodyRef: React.RefObject<TextRef>;
+    callToActionRef: React.RefObject<TextRef>;
+    imageRef: React.RefObject<ImageRef>;
+    optionViewRef: React.RefObject<ViewRef>;
+    mediaViewRef: React.RefObject<ViewRef>;
     nativeAd: NativeAd;
-    nativeAdView: NativeAdViewType | null;
     setNativeAd: React.Dispatch<React.SetStateAction<NativeAd>>;
-    setNativeAdView: React.Dispatch<React.SetStateAction<NativeAdViewType | null>>;
 };
 
 const defaultNativeAd: NativeAd = {
@@ -20,24 +29,40 @@ const defaultNativeAd: NativeAd = {
 };
 
 export const NativeAdViewContext = createContext<NativeAdViewContextType>({
+    titleRef: { current: null },
+    advertiserRef: { current: null },
+    bodyRef: { current: null },
+    callToActionRef: { current: null },
+    imageRef: { current: null },
+    optionViewRef: { current: null },
+    mediaViewRef: { current: null },
     nativeAd: defaultNativeAd,
-    nativeAdView: null,
     setNativeAd: () => {},
-    setNativeAdView: () => {},
 });
 
 export const NativeAdViewProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const titleRef = useRef<TextRef | null>(null);
+    const advertiserRef = useRef<TextRef | null>(null);
+    const bodyRef = useRef<TextRef | null>(null);
+    const callToActionRef = useRef<TextRef | null>(null);
+    const imageRef = useRef<ImageRef | null>(null);
+    const optionViewRef = useRef<ViewRef | null>(null);
+    const mediaViewRef = useRef<ViewRef | null>(null);
     const [nativeAd, setNativeAd] = useState<NativeAd>(defaultNativeAd);
-    const [nativeAdView, setNativeAdView] = useState<NativeAdViewType | null>(null);
 
     const providerValue = React.useMemo(
         () => ({
+            titleRef,
+            advertiserRef,
+            bodyRef,
+            callToActionRef,
+            imageRef,
+            optionViewRef,
+            mediaViewRef,
             nativeAd,
-            nativeAdView,
             setNativeAd,
-            setNativeAdView,
         }),
-        [nativeAd, nativeAdView]
+        [nativeAd]
     );
 
     return <NativeAdViewContext.Provider value={providerValue}>{children}</NativeAdViewContext.Provider>;

package/src/specs/AppLovinMAXAdViewNativeComponent.ts

@@ -0,0 +1,96 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import type { Double, DirectEventHandler, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+export type AdInfoEvent = Readonly<{
+    adUnitId: string;
+    adFormat: string;
+    adViewId?: Double;
+    networkName: string;
+    networkPlacement: string;
+    creativeId?: string | null;
+    placement?: string | null;
+    revenue: Double;
+    revenuePrecision: string;
+    latencyMillis: Double;
+    dspName?: string | null;
+    size: Readonly<{
+        width: Double;
+        height: Double;
+    }>;
+}>;
+
+export type AdLoadFailedEvent = Readonly<{
+    adUnitId: string;
+    adViewId?: Double;
+    code: Double;
+    message?: string | null;
+    mediatedNetworkErrorCode: Double;
+    mediatedNetworkErrorMessage: string;
+    adLoadFailureInfo?: string | null;
+}>;
+
+export type AdDisplayFailedEvent = Readonly<{
+    adUnitId: string;
+    adFormat: string;
+    adViewId?: Double;
+    networkName: string;
+    networkPlacement: string;
+    creativeId?: string | null;
+    placement?: string | null;
+    revenue: Double;
+    revenuePrecision: string;
+    latencyMillis: Double;
+    dspName?: string | null;
+    size: Readonly<{
+        width: Double;
+        height: Double;
+    }>;
+    code: Double;
+    message?: string | null;
+    mediatedNetworkErrorCode: Double;
+    mediatedNetworkErrorMessage: string;
+}>;
+
+export interface NativeProps extends ViewProps {
+    adUnitId: string;
+    adFormat?: string;
+    adViewId?: WithDefault<Double, 0>;
+    placement?: string | null;
+    customData?: string | null;
+    adaptiveBannerEnabled?: WithDefault<boolean, true>;
+    autoRefresh?: WithDefault<boolean, true>;
+    loadOnMount?: WithDefault<boolean, true>;
+    extraParameters?: ReadonlyArray<{
+        key: string;
+        value: string | null;
+    }>;
+    strLocalExtraParameters?: ReadonlyArray<{
+        key: string;
+        value: string | null;
+    }>;
+    boolLocalExtraParameters?: ReadonlyArray<{
+        key: string;
+        value: boolean | null;
+    }>;
+    onAdLoadedEvent: DirectEventHandler<AdInfoEvent>;
+    onAdLoadFailedEvent: DirectEventHandler<AdLoadFailedEvent>;
+    onAdDisplayFailedEvent: DirectEventHandler<AdDisplayFailedEvent>;
+    onAdClickedEvent: DirectEventHandler<AdInfoEvent>;
+    onAdExpandedEvent: DirectEventHandler<AdInfoEvent>;
+    onAdCollapsedEvent: DirectEventHandler<AdInfoEvent>;
+    onAdRevenuePaidEvent: DirectEventHandler<AdInfoEvent>;
+}
+
+type AppLovinMAXAdViewNativeComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+    loadAd: (viewRef: React.ElementRef<AppLovinMAXAdViewNativeComponentType>) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+    supportedCommands: ['loadAd'],
+});
+
+export default codegenNativeComponent<NativeProps>('AppLovinMAXAdView') as HostComponent<NativeProps>;