react-native-applovin-max 4.1.7 → 5.0.1

package/src/NativeAdComponents.js

@@ -1,5 +1,5 @@
 import React, {useContext, useRef, useEffect} from "react";
-import {findNodeHandle, UIManager, Text, Image, View, TouchableOpacity} from "react-native";
+import {findNodeHandle, Text, Image, View, TouchableOpacity} from "react-native";
 import {NativeAdViewContext} from "./NativeAdViewProvider";
 
 export const TitleView = (props) => {
@@ -7,20 +7,19 @@ export const TitleView = (props) => {
   const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
 
   useEffect(() => {
-    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+    if (!nativeAdView || !nativeAd.title) return;
 
     nativeAdView.setNativeProps({
       titleView: findNodeHandle(titleRef.current),
     });
   }, [nativeAd, nativeAdView]);
 
+  if (!nativeAdView) return null;
+
   return (
-    nativeAdView ?
-      <Text {...props} ref={titleRef}>
-        {nativeAd.title || null}
-      </Text>
-      :
-      null
+    <Text {...props} ref={titleRef}>
+      {nativeAd.title || null}
+    </Text>
   );
 };
 
@@ -29,20 +28,19 @@ export const AdvertiserView = (props) => {
   const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
 
   useEffect(() => {
-    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+    if (!nativeAdView || !nativeAd.advertiser) return;
 
     nativeAdView.setNativeProps({
       advertiserView: findNodeHandle(advertiserRef.current),
     });
   }, [nativeAd, nativeAdView]);
 
+  if (!nativeAdView) return null;
+
   return (
-    nativeAdView ?
-      <Text {...props} ref={advertiserRef}>
-        {nativeAd.advertiser || null}
-      </Text>
-      :
-      null
+    <Text {...props} ref={advertiserRef}>
+      {nativeAd.advertiser || null}
+    </Text>
   );
 };
 
@@ -51,20 +49,19 @@ export const BodyView = (props) => {
   const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
 
   useEffect(() => {
-    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+    if (!nativeAdView || !nativeAd.body) return;
 
     nativeAdView.setNativeProps({
       bodyView: findNodeHandle(bodyRef.current),
     });
   }, [nativeAd, nativeAdView]);
 
+  if (!nativeAdView) return null;
+
   return (
-    nativeAdView ?
-      <Text {...props} ref={bodyRef}>
-        {nativeAd.body || null}
-      </Text>
-      :
-      null
+    <Text {...props} ref={bodyRef}>
+      {nativeAd.body || null}
+    </Text>
   );
 };
 
@@ -73,22 +70,21 @@ export const CallToActionView = (props) => {
   const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
 
   useEffect(() => {
-    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+    if (!nativeAdView || !nativeAd.callToAction) return;
 
     nativeAdView.setNativeProps({
       callToActionView: findNodeHandle(callToActionRef.current),
     });
   }, [nativeAd, nativeAdView]);
 
+  if (!nativeAdView) return null;
+
   return (
-    nativeAdView ?
-      <TouchableOpacity {...props}>
-        <Text {...props} ref={callToActionRef}>
-          {nativeAd.callToAction || null}
-        </Text>
-      </TouchableOpacity>
-      :
-      null
+    <TouchableOpacity {...props}>
+      <Text {...props} ref={callToActionRef}>
+        {nativeAd.callToAction || null}
+      </Text>
+    </TouchableOpacity>
   );
 };
 
@@ -98,18 +94,17 @@ export const IconView = (props) => {
   const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
 
   useEffect(() => {
-    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+    if (!nativeAdView || !(nativeAd.url || nativeAd.image)) return;
 
     nativeAdView.setNativeProps({
       iconView: findNodeHandle(imageRef.current),
     });
   }, [nativeAd, nativeAdView]);
 
+  if (!nativeAdView) return null;
+
   return (
-    nativeAdView ?
-      <Image {...props} ref={imageRef} source={{uri: nativeAd.url || null}}/>
-      :
-      null
+    <Image {...props} ref={imageRef} source={{uri: nativeAd.url || null}}/>
   );
 };
 
@@ -119,18 +114,17 @@ export const OptionsView = (props) => {
   const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
 
   useEffect(() => {
-    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+    if (!nativeAdView || !nativeAd.isOptionsViewAvailable) return;
 
     nativeAdView.setNativeProps({
       optionsView: findNodeHandle(viewRef.current),
     });
   }, [nativeAd, nativeAdView]);
 
+  if (!nativeAdView) return null;
+
   return (
-    nativeAdView ?
-      <View {...props} ref={viewRef}/>
-      :
-      null
+    <View {...props} ref={viewRef}/>
   );
 };
 
@@ -140,17 +134,16 @@ export const MediaView = (props) => {
   const {nativeAd, nativeAdView} = useContext(NativeAdViewContext);
 
   useEffect(() => {
-    if (Object.keys(nativeAd).length === 0 || !nativeAdView) return;
+    if (!nativeAdView || !nativeAd.isMediaViewAvailable) return;
 
     nativeAdView.setNativeProps({
       mediaView: findNodeHandle(viewRef.current),
     });
   }, [nativeAd, nativeAdView]);
 
+  if (!nativeAdView) return null;
+
   return (
-    nativeAdView ?
-      <View {...props} ref={viewRef}/>
-      :
-      null
+    <View {...props} ref={viewRef}/>
   );
 };

package/src/NativeAdView.js

@@ -1,40 +1,19 @@
-import React, { forwardRef, useContext, useImperativeHandle, useRef, useCallback } from "react";
+import React, { forwardRef, useContext, useImperativeHandle, useRef, useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { NativeModules, requireNativeComponent, UIManager, findNodeHandle, View, StyleSheet } from "react-native";
+import { NativeModules, requireNativeComponent, UIManager, findNodeHandle } 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>
+    <NativeAdViewProvider>
+      <NativeAdView {...props} ref={ref}/>
+    </NativeAdViewProvider>
   );
 });
 
-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:
@@ -44,6 +23,8 @@ const AppLovinMAXNativeAdView = requireNativeComponent('AppLovinMAXNativeAdView'
 // 3. update of the nativeAd context by onNativeAdLoaded, which renders the ad components with nativeAd
 const NativeAdView = forwardRef((props, ref) => {
 
+  const {extraParameters, localExtraParameters, ...otherProps} = props;
+
   // context from NativeAdViewProvider
   const {nativeAd, nativeAdView, setNativeAd, setNativeAdView} = useContext(NativeAdViewContext);
 
@@ -65,20 +46,59 @@ const NativeAdView = forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({ loadAd }), []);
 
   // save the DOM element via the ref callback
-  const saveElement = useCallback((element) => {
+  const saveElement = (element) => {
     if (element) {
       nativeAdViewRef.current = element;
       setNativeAdView(element);
     }
-  }, [nativeAdViewRef]);
+  };
+
+  const onAdLoadedEvent = (event) => {
+    setNativeAd(event.nativeEvent.nativeAd);
+    if (props.onAdLoaded) props.onAdLoaded(event.nativeEvent.adInfo);
+  };
+
+  const onAdLoadFailedEvent = (event) => {
+    if (props.onAdLoadFailed) props.onAdLoadFailed(event.nativeEvent);
+  };
+
+  const onAdClickedEvent = (event) => {
+    if (props.onAdClicked) props.onAdClicked(event.nativeEvent);
+  };
+
+  const onAdRevenuePaidEvent = (event) => {
+    if (props.onAdRevenuePaid) props.onAdRevenuePaid(event.nativeEvent);
+  };
+
+  const sanitizeExtraParameters = (name, params) => {
+    if (!params) return params;
+
+    for (const key in params) {
+      const value = params[key];
+      
+      // `null` and `undefined` are valid values (e.g. for clearing previously-set values)
+      if (value == null || value == undefined) continue;
+
+      if (typeof value !== 'string') {
+        console.warn("AppLovinMAXNativeAdView only support string values: " + value + ", deleting value for key: " + key);
+        delete params[key];
+      }
+    }
 
-  // callback from the native module to set a loaded ad
-  const onAdLoaded = useCallback((event) => {
-    setNativeAd(event.nativeEvent);
-  }, []);
+    return params;
+  };
 
   return (
-    <AppLovinMAXNativeAdView {...props} ref={saveElement} onAdLoaded={onAdLoaded}>
+    <AppLovinMAXNativeAdView
+      ref={saveElement}
+      extraParameters={sanitizeExtraParameters('extraParameters', extraParameters)}
+      localExtraParameters={sanitizeExtraParameters('localExtraParameters', localExtraParameters)}
+      onAdLoadedEvent={onAdLoadedEvent}
+      onAdLoadFailedEvent={onAdLoadFailedEvent}
+      onAdClickedEvent={onAdClickedEvent}
+      onAdRevenuePaidEvent={onAdRevenuePaidEvent}
+      {...otherProps}
+    >
       {props.children}
     </AppLovinMAXNativeAdView>
   );
@@ -101,9 +121,34 @@ NativeAdView.propTypes = {
   customData: PropTypes.string,
 
   /**
-   * A dictionary value representing the extra parameters to set a list of key-value string pairs.
+   * A dictionary of extra parameters consisting of key-value string pairs.
    */
   extraParameters: PropTypes.object,
+
+  /**
+   * A dictionary of local extra parameters consisting of key-value string pairs.
+   */
+  localExtraParameters: PropTypes.object,
+
+  /**
+   * A callback fuction to be fired when a new ad has been loaded.
+   */
+  onAdLoaded: PropTypes.func,
+
+  /**
+   * A callback fuction to be fired when an ad could not be retrieved.
+   */
+  onAdLoadFailed: PropTypes.func,
+
+  /**
+   * A callback fuction to be fired when ad is clicked.
+   */
+  onAdClicked: PropTypes.func,
+
+  /**
+   * A callback fuction to be fired when the revenue event is detected.
+   */
+  onAdRevenuePaid: PropTypes.func,
 };
 
 // Add the child ad components

package/src/TargetingData.js

@@ -19,11 +19,17 @@ const UserGender = {
 const TargetingData = {
 
   set yearOfBirth(value) {
-    AppLovinMAX.setTargetingDataYearOfBirth(value);
+    AppLovinMAX.setTargetingDataYearOfBirth(value ? value : 0);
+  },
+
+  get yearOfBirth() {
+    return AppLovinMAX.getTargetingDataYearOfBirth();
   },
 
   set gender(value) {
-    if ( value === UserGender.Unknown ||
+    if ( !value ) {
+      AppLovinMAX.setTargetingDataGender(UserGender.Unknown);
+    } else if ( value === UserGender.Unknown ||
          value === UserGender.Female ||
          value === UserGender.Male ||
          value === UserGender.Other ) {
@@ -31,8 +37,14 @@ const TargetingData = {
     }
   },
 
+  get gender() {
+    return AppLovinMAX.getTargetingDataGender();
+  },
+
   set maximumAdContentRating(value) {
-    if ( value === AdContentRating.None ||
+    if ( !value ) {
+      AppLovinMAX.setTargetingDataMaximumAdContentRating(AdContentRating.None);
+    } else if ( value === AdContentRating.None ||
          value === AdContentRating.AllAudiences ||
          value === AdContentRating.EveryoneOverTwelve ||
          value === AdContentRating.MatureAudiences ) {
@@ -40,22 +52,42 @@ const TargetingData = {
     }
   },
 
+  get maximumAdContentRating() {
+    return AppLovinMAX.getTargetingDataMaximumAdContentRating();
+  },
+
   set email(value) {
     AppLovinMAX.setTargetingDataEmail(value);
   },
 
+  get email() {
+    return AppLovinMAX.getTargetingDataEmail();
+  },
+
   set phoneNumber(value) {
     AppLovinMAX.setTargetingDataPhoneNumber(value);
   },
 
+  get phoneNumber() {
+    return AppLovinMAX.getTargetingDataPhoneNumber();
+  },
+
   set keywords(value) {
     AppLovinMAX.setTargetingDataKeywords(value);
   },
 
+  get keywords() {
+    return AppLovinMAX.getTargetingDataKeywords();
+  },
+
   set interests(value) {
     AppLovinMAX.setTargetingDataInterests(value);
   },
 
+  get interests() {
+    return AppLovinMAX.getTargetingDataInterests();
+  },
+
   clearAll() {
     AppLovinMAX.clearAllTargetingData();
   }