How to Update rnfirebase admob to support iOS 14 AppTrackingTransparency

user_7399478 0
Viewed 1100

Google AdMob has announced preparations for iOS 14+ recently. There will be a requirement for AppTrackingTransparency permission. However, there is no roadmap for react-native developers that use AdMob through rnfirebase. My react-native project currently has a dependency on react-native-firebase version v6.7.1:

"dependencies": {
    "@react-native-firebase/admob": "^6.7.1",
    "@react-native-firebase/app": "^6.7.1",
    ...

I simply use InterstitialAd and BannerAd in my app:

import { InterstitialAd, TestIds, AdEventType, 
    BannerAd, BannerAdSize} from '@react-native-firebase/admob';

What should be my roadmap to upgrade my project to support iOS 14+?

ios14 react-native-firebase react-native admob
1 Answers

There are multiple steps that should be followed in order to make this update:

Update react-native-firebase dependencies

First of all, you should update your react-native-firebase dependencies in your package.json to the latest version since there is a pre-request "Google Mobile Ads SDK 7.64.0 or higher":

"@react-native-firebase/admob": "^11.3.2",
"@react-native-firebase/app": "^11.3.2",

and then run npm install or yarn install command.

Add react-native-permissions dependency

Secondly, you should add a react-native-permissions dependency to your package.json so that later you will use this dependency to check & request AppTrackingTransparency permission:

"react-native-permissions": "^3.0.2",

and then run npm install or yarn install command.

Update Info.plist

Then, you should add the newly required NSUserTrackingUsageDescription key&value and SKAdNetworkItems information that are explained on Admob's Prepare for iOS 14+ document to your Info.plist file:

<key>NSUserTrackingUsageDescription</key>
<string>This identifier will be used to deliver personalized ads to you.</string>
<key>SKAdNetworkItems</key>
<array>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>cstr6suwn9.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>4fzdc2evr5.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>2fnua5tdw4.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>ydx93a7ass.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>5a6flpkh64.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>p78axxw29g.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>v72qych5uu.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>c6k4g5qg8m.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>s39g8k73mm.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>3qy4746246.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>3sh42y64q3.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>f38h382jlk.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>hs6bdukanm.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>prcb7njmu6.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>wzmmz9fp6w.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>yclnxrl5pm.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>4468km3ulz.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>t38b2kh725.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>7ug5zh24hu.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>9rd848q2bz.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>n6fk4nfna4.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>kbd757ywx3.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>9t245vhmpl.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>2u9pt9hc89.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>8s468mfl3y.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>av6w8kgt66.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>klf5c3l5u5.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>ppxm28t8ap.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>424m5254lk.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>uw77j35x4d.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>e5fvkxwrpn.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>zq492l623r.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>3qcr597p9d.skadnetwork</string>
    </dict>
</array>

Update Podfile

Then, you should update your PodFile by adding the following lines:

permissions_path = '../node_modules/react-native-permissions/ios'

pod 'Permission-AppTrackingTransparency', :path => "#{permissions_path}/AppTrackingTransparency"

and then run pod install or pod install --repo-update command on the ios directory of your project (You may delete the old Pods directory and Podfile.lock file before this operation).

Add AppTrackingTransparency permission in your react-native code

Finally, you should add check & request APP_TRACKING_TRANSPARENCY permission to your react-native code somewhere before your AdMob ad requests:

import {check, request, PERMISSIONS, RESULTS} from 'react-native-permissions';

//......

check(PERMISSIONS.IOS.APP_TRACKING_TRANSPARENCY)
  .then((result) => {
    switch (result) {
      case RESULTS.UNAVAILABLE:
        console.log('This feature is not available (on this device / in this context)');
        break;
      case RESULTS.DENIED:
        console.log('The permission has not been requested / is denied but requestable');
        request(PERMISSIONS.IOS.APP_TRACKING_TRANSPARENCY).then((reqResult) => {
            switch (reqResult) {
                case RESULTS.GRANTED:
                    console.log('The permission request is granted');
                    // now you can make ad requests
                    break;
                case RESULTS.BLOCKED:
                    console.log('The permission request is denied and not requestable anymore');
                    break;
            }
        });
        break;
      case RESULTS.LIMITED:
        console.log('The permission is limited: some actions are possible');
        break;
      case RESULTS.GRANTED:
        console.log('The permission is granted');
        // now you can make ad requests
        break;
      case RESULTS.BLOCKED:
        console.log('The permission is denied and not requestable anymore');
        break;
    }
  })
  .catch((error) => {
    // …
  });

You can then make your ad requests if you get RESULTS.GRANTED result from check or request method calls.

Final note: Don't forget to clean your Xcode project after all these changes before running.

user_73994780
Related