fix: support for iOS 14+ with setAdvertiserTrackingEnabled; remove rectangle banner on iOS

README.md

@@ -241,7 +241,7 @@ Banners are available in 3 sizes:
 
 - `standard` (BANNER_HEIGHT_50)
 - `large` (BANNER_HEIGHT_90)
-- `rectangle` (RECTANGLE_HEIGHT_250)
+- `rectangle` (RECTANGLE_HEIGHT_250) – currently Android only
 
 ```js
 import { BannerView } from 'react-native-fbads';
@@ -384,8 +384,21 @@ Requests permission to track the user. Requires an [`NSUserTrackingUsageDescript
 
 ```js
 const trackingStatus = await AdSettings.requestTrackingPermission();
-if (trackingStatus === 'authorized' || trackingStatus === 'unavailable')
+if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
   AdSettings.setAdvertiserIDCollectionEnabled(true);
+  AdSettings.setAdvertiserTrackingEnabled(true);
+}
+```
+
+### setAdvertiserTrackingEnabled
+
+Enables or disables personalized ads tracking on iOS 14+. See Facebook docs on [Advertising Tracking Enabled For Audience Network](https://developers.facebook.com/docs/audience-network/guides/advertising-tracking-enabled)
+
+> Requires iOS 14. On Android and iOS versions below 14, this will always be no-op.
+> **Important: FB won't display adds unless this is set to `true`.**
+
+```js
+AdSettings.setAdvertiserTrackingEnabled(true);
 ```
 
 ### setAdvertiserIDCollectionEnabled

example/ios/example.xcodeproj/project.pbxproj

@@ -463,7 +463,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
+			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
 		};
 		2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */ = {
 			isa = PBXShellScriptBuildPhase;

example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -2,37 +2,52 @@
   "images" : [
     {
       "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "20x20"
     },
     {
       "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "20x20"
     },
     {
       "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "29x29"
     },
     {
       "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "29x29"
     },
     {
       "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "40x40"
     },
     {
       "idiom" : "iphone",
-      "size" : "60x60",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "40x40"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "60x60"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "60x60"
+    },
+    {
+      "idiom" : "ios-marketing",
+      "scale" : "1x",
+      "size" : "1024x1024"
     }
   ],
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
-}
+}

example/ios/example/Info.plist

@@ -38,7 +38,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string/>
+	<string></string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -53,6 +53,8 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>NSUserTrackingUsageDescription</key>
+	<string>Testing purposes</string>
 	<key>UIAppFonts</key>
 	<array>
 		<string>AntDesign.ttf</string>

example/src/BannerAds/index.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, Platform} from 'react-native';
 import {Container} from 'native-base';
 import {BannerView} from 'react-native-fbads';
 import {bannerAdPlacementId} from '../Variables';
@@ -24,14 +24,16 @@ export default class BannerAd extends Component {
             onError={(err) => console.log('error', err)}
           />
         </View>
-        <View style={styles.bannerContainer}>
-          <BannerView
-            placementId={bannerAdPlacementId}
-            type="rectangle"
-            onPress={() => console.log('click')}
-            onError={(err) => console.log('error', err)}
-          />
-        </View>
+        {Platform.OS !== 'ios' ? (
+          <View style={styles.bannerContainer}>
+            <BannerView
+              placementId={bannerAdPlacementId}
+              type="rectangle"
+              onPress={() => console.log('click')}
+              onError={(err) => console.log('error', err)}
+            />
+          </View>
+        ) : null}
       </Container>
     );
   }

example/src/NativeAds/index.js

@@ -1,26 +1,25 @@
-import React, { Component } from 'react';
-import { NativeAdsManager, AdSettings } from 'react-native-fbads';
-import { Container } from 'native-base';
-import { nativeAdPlacementId } from '../Variables/index';
-import NativeAdView from './NativeAdView';
+import React, {Component} from 'react';
+import {NativeAdsManager, AdSettings} from 'react-native-fbads';
+import {Container} from 'native-base';
+import {nativeAdPlacementId} from '../Variables';
 
-AdSettings.clearTestDevices();
-AdSettings.setLogLevel('debug');
-AdSettings.addTestDevice(AdSettings.currentDeviceHash);
+import NativeAdView from './NativeAdView';
 
-const adsManager = new NativeAdsManager(nativeAdPlacementId);
+export default class NativeAd extends Component {
+  adsManager = new NativeAdsManager(nativeAdPlacementId);
 
-export default class NativeAd extends Component<Props> {
   render() {
     return (
       <Container
         style={{
           justifyContent: 'center',
           backgroundColor: '#fff',
           padding: 20,
-        }}
-      >
-        <NativeAdView adsManager={adsManager} adChoicePosition="bottomRight" />
+        }}>
+        <NativeAdView
+          adsManager={this.adsManager}
+          adChoicePosition="bottomRight"
+        />
       </Container>
     );
   }

example/src/index.js

@@ -2,10 +2,27 @@ import React, {Component} from 'react';
 import {StyleSheet, Dimensions, TouchableHighlight} from 'react-native';
 import {Container, Text} from 'native-base';
 import {Actions} from 'react-native-router-flux';
+import {AdSettings} from 'react-native-fbads';
 
 const {width} = Dimensions.get('window');
 
 export default class Main extends Component {
+  async componentDidMount() {
+    AdSettings.setLogLevel('debug');
+    AdSettings.addTestDevice(AdSettings.currentDeviceHash);
+    const requestedStatus = await AdSettings.requestTrackingPermission();
+
+    if (requestedStatus === 'authorized' || requestedStatus === 'unavailable') {
+      AdSettings.setAdvertiserIDCollectionEnabled(true);
+      // Both calls are not related to each other
+      // FB won't deliver any ads if this is set to false or not called at all.
+      AdSettings.setAdvertiserTrackingEnabled(true);
+    }
+  }
+
+  componentWillUnmount() {
+    AdSettings.clearTestDevices();
+  }
   render() {
     return (
       <Container style={styles.container}>

ios/ReactNativeAdsFacebook/EXAdSettingsManager.m

@@ -130,6 +130,12 @@ - (void)setBridge:(RCTBridge *)bridge
 }
 
 
+RCT_EXPORT_METHOD(setAdvertiserTrackingEnabled:(BOOL)enabled)
+{
+    [FBAdSettings setAdvertiserTrackingEnabled:enabled];
+}
+
+
 - (void)bridgeDidForeground:(NSNotification *)notification
 {
   [FBAdSettings setMixedAudience:_isChildDirected];

src/AdSettings.ts

@@ -10,7 +10,12 @@ type SDKLogLevel =
   | 'error'
   | 'notification';
 
-export type TrackingStatus = 'unavailable' | 'denied' | 'authorized' | 'restricted' | 'not-determined';
+export type TrackingStatus =
+  | 'unavailable'
+  | 'denied'
+  | 'authorized'
+  | 'restricted'
+  | 'not-determined';
 
 export default {
   /**
@@ -83,5 +88,15 @@ export default {
    */
   setAdvertiserIDCollectionEnabled(enabled: boolean): void {
     CTKAdSettingsManager.setAdvertiserIDCollectionEnabled(enabled);
-  }
+  },
+
+  /**
+   * Enable or disable ads tracking. Only works for iOS 14+. In order to ask user for tracking permission (@see `requestTrackingPermission()`).
+   */
+  setAdvertiserTrackingEnabled(enabled: boolean): void {
+    if (Platform.OS !== 'ios') {
+      return;
+    }
+    CTKAdSettingsManager.setAdvertiserTrackingEnabled(enabled);
+  },
 };