react-native-applovin-max 3.3.1 → 4.0.0

package/src/NativeAdComponents.js

@@ -0,0 +1,156 @@
+import React, {useContext, useRef, useEffect} from "react";
+import {findNodeHandle, UIManager, Text, Image, View, TouchableOpacity} from "react-native";
+import {NativeAdViewContext} from "./NativeAdViewProvider";
+
+export const TitleView = (props) => {
+  const titleRef = useRef();
+  const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
+
+  useEffect(() => {
+    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+
+    nativeAdView.setNativeProps({
+      titleView: findNodeHandle(titleRef.current),
+    });
+  }, [nativeAd, nativeAdView]);
+
+  return (
+    nativeAdView ?
+      <Text {...props} ref={titleRef}>
+        {nativeAd.title || null}
+      </Text>
+      :
+      null
+  );
+};
+
+export const AdvertiserView = (props) => {
+  const advertiserRef = useRef();
+  const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
+
+  useEffect(() => {
+    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+
+    nativeAdView.setNativeProps({
+      advertiserView: findNodeHandle(advertiserRef.current),
+    });
+  }, [nativeAd, nativeAdView]);
+
+  return (
+    nativeAdView ?
+      <Text {...props} ref={advertiserRef}>
+        {nativeAd.advertiser || null}
+      </Text>
+      :
+      null
+  );
+};
+
+export const BodyView = (props) => {
+  const bodyRef = useRef();
+  const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
+
+  useEffect(() => {
+    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+
+    nativeAdView.setNativeProps({
+      bodyView: findNodeHandle(bodyRef.current),
+    });
+  }, [nativeAd, nativeAdView]);
+
+  return (
+    nativeAdView ?
+      <Text {...props} ref={bodyRef}>
+        {nativeAd.body || null}
+      </Text>
+      :
+      null
+  );
+};
+
+export const CallToActionView = (props) => {
+  const callToActionRef = useRef();
+  const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
+
+  useEffect(() => {
+    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+
+    nativeAdView.setNativeProps({
+      callToActionView: findNodeHandle(callToActionRef.current),
+    });
+  }, [nativeAd, nativeAdView]);
+
+  return (
+    nativeAdView ?
+      <TouchableOpacity {...props}>
+        <Text {...props} ref={callToActionRef}>
+          {nativeAd.callToAction || null}
+        </Text>
+      </TouchableOpacity>
+      :
+      null
+  );
+};
+
+export const IconView = (props) => {
+  const imageRef = useRef();
+
+  const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
+
+  useEffect(() => {
+    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+
+    nativeAdView.setNativeProps({
+      iconView: findNodeHandle(imageRef.current),
+    });
+  }, [nativeAd, nativeAdView]);
+
+  return (
+    nativeAdView ?
+      <Image {...props} ref={imageRef} source={{uri: nativeAd.url || null}}/>
+      :
+      null
+  );
+};
+
+export const OptionsView = (props) => {
+  const viewRef = useRef();
+
+  const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
+
+  useEffect(() => {
+    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+
+    nativeAdView.setNativeProps({
+      optionsView: findNodeHandle(viewRef.current),
+    });
+  }, [nativeAd, nativeAdView]);
+
+  return (
+    nativeAdView ?
+      <View {...props} ref={viewRef}/>
+      :
+      null
+  );
+};
+
+export const MediaView = (props) => {
+  const viewRef = useRef();
+
+  const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
+
+  useEffect(() => {
+    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+
+    nativeAdView.setNativeProps({
+      mediaView: findNodeHandle(viewRef.current),
+    });
+  }, [nativeAd, nativeAdView]);
+
+  return (
+    nativeAdView ?
+      <View {...props} ref={viewRef}/>
+      :
+      null
+  );
+};

package/src/NativeAdView.js

@@ -0,0 +1,118 @@
+import React, { forwardRef, useContext, useImperativeHandle, useRef, useCallback } from "react";
+import PropTypes from "prop-types";
+import { NativeModules, requireNativeComponent, UIManager, findNodeHandle, View, StyleSheet } from "react-native";
+import { NativeAdViewContext, NativeAdViewProvider } from "./NativeAdViewProvider";
+import { TitleView, AdvertiserView, BodyView, CallToActionView, IconView, OptionsView, MediaView } from "./NativeAdComponents";
+
+const { AppLovinMAX } = NativeModules;
+
+// Returns NativeAdView if AppLovinMAX has been initialized, or returns an empty black view if
+// AppLovinMAX has not been initialized
+const NativeAdViewWrapper = forwardRef((props, ref) => {
+  const {style, ...rest} = props;
+  return (
+    AppLovinMAX.isInitialized() ?
+      <NativeAdViewProvider>
+        <NativeAdView {...props} ref={ref}/>
+      </NativeAdViewProvider>
+    :
+      <View style={[styles.container, style]} {...rest}>
+        {
+          console.warn('[AppLovinSdk] [AppLovinMAX] <NativeAdView/> has been mounted before AppLovin initialization')
+        } 
+      </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    backgroundColor: 'black',
+    borderColor: 'whitesmoke',
+    borderWidth: 1,
+  },
+});
+
+const AppLovinMAXNativeAdView = requireNativeComponent('AppLovinMAXNativeAdView', NativeAdView);
+
+// NativeAdView renders itself multiple times:
+// 1. initial render
+// 2. update of the nativeAdView context by saveElement, which locates and renders the all child 
+//    components including the user's components without nativeAd
+// 3. update of the nativeAd context by onNativeAdLoaded, which renders the ad components with nativeAd
+const NativeAdView = forwardRef((props, ref) => {
+
+  // context from NativeAdViewProvider
+  const {nativeAd, nativeAdView, setNativeAd, setNativeAdView} = useContext(NativeAdViewContext);
+
+  // keep the nativeAdView ref
+  const nativeAdViewRef = useRef();
+
+  // 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) => {
+    if (element) {
+      nativeAdViewRef.current = element;
+      setNativeAdView(element);
+    }
+  }, [nativeAdViewRef]);
+
+  // callback from the native module to set a loaded ad
+  const onAdLoaded = useCallback((event) => {
+    setNativeAd(event.nativeEvent);
+  }, []);
+
+  return (
+    <AppLovinMAXNativeAdView {...props} ref={saveElement} onAdLoaded={onAdLoaded}>
+      {props.children}
+    </AppLovinMAXNativeAdView>
+  );
+});
+
+NativeAdView.propTypes = {
+  /**
+   * A string value representing the ad unit id to load ads for.
+   */
+  adUnitId: PropTypes.string.isRequired,
+
+  /**
+   * A string value representing the placement name that you assign when you integrate each ad format, for granular reporting in ad events.
+   */
+  placement: PropTypes.string,
+
+  /**
+   * A string value representing the customData name that you assign when you integrate each ad format, for granular reporting in ad events.
+   */
+  customData: PropTypes.string,
+
+  /**
+   * A dictionary value representing the extra parameters to set a list of key-value string pairs.
+   */
+  extraParameters: PropTypes.object,
+};
+
+// Add the child ad components
+NativeAdViewWrapper.TitleView = TitleView;
+NativeAdViewWrapper.AdvertiserView = AdvertiserView;
+NativeAdViewWrapper.BodyView = BodyView;
+NativeAdViewWrapper.CallToActionView = CallToActionView;
+NativeAdViewWrapper.IconView = IconView;
+NativeAdViewWrapper.OptionsView = OptionsView;
+NativeAdViewWrapper.MediaView = MediaView;
+
+export default NativeAdViewWrapper;

package/src/NativeAdViewProvider.js

@@ -0,0 +1,19 @@
+import React, { useState, createContext } from "react";
+
+export const NativeAdViewContext = createContext();
+
+export const NativeAdViewProvider = props => {
+
+  const [nativeAd, setNativeAd] = useState({});
+  const [nativeAdView, setNativeAdView] = useState();
+
+  const providerValue = {
+    nativeAd, nativeAdView, setNativeAd, setNativeAdView,
+  };
+
+  return (
+    <NativeAdViewContext.Provider value={providerValue}>
+      {props.children}
+    </NativeAdViewContext.Provider>
+  );
+};

package/src/index.js

@@ -1,10 +1,11 @@
 import { NativeModules, NativeEventEmitter } from "react-native";
 import AdView, { AdFormat, AdViewPosition } from "./AppLovinMAXAdView";
 import { TargetingData as targetingData, AdContentRating, UserGender } from "./TargetingData";
+import NativeAdView from "./NativeAdView";
 
 const { AppLovinMAX } = NativeModules;
 
-const VERSION = "3.3.1";
+const VERSION = "4.0.0";
 
 /**
  * This enum represents whether or not the consent dialog should be shown for this user.
@@ -90,6 +91,7 @@ export default {
   ConsentDialogState,
   AdViewPosition,
   AdFormat,
+  NativeAdView,
   addEventListener,
   removeEventListener,
   // Use callback to avoid need for attaching listeners at top level on each re-render