React native expo implementing Apple App Tracking Transparency (ATT) for iOS 14.5

Viewed 4182

What is the best way of implementing the Apple App Transparency Tracker (ATT) feature on react native expo? My app keeps getting rejected by apple even after I add:

app.json file :

"infoPlist": {
  "NSUserTrackingUsageDescription": "App requires permission...."
}
4 Answers

On iOS 14 Apple introduced the App Tracking Transparency permission to access IDFA. You need to prompt the user whether it allows your app to use libraries that track them or not, adding it on infoPlist just allows you to use this API within your application.

Expo doesn't have this feature yet, but some libraries you can use to prompt the permission

Example: https://docs.expo.io/versions/v41.0.0/sdk/facebook/#facebookgetpermissionsasync

You can use other libraries , such as https://github.com/mrousavy/react-native-tracking-transparency

where you can request the App tracking like

    import { getTrackingStatus } from 'react-native-tracking-transparency';

    const trackingStatus = await getTrackingStatus();
    if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
      // enable tracking features
    }


    import { requestTrackingPermission } from 'react-native-tracking-transparency';
    
    const trackingStatus = await requestTrackingPermission();
    if (trackingStatus === 'authorized' || trackingStatus === 'unavailable') {
      // enable tracking features
    }

This might need an update in a near future, as expo releases a new SDK version with a solution for that.

EDIT

From Expo 44+

Expo now have a library for TrackTransparency: (https://docs.expo.dev/versions/latest/sdk/tracking-transparency/)

expo install expo-tracking-transparency

For bare applications: https://github.com/expo/expo/tree/main/packages/expo-tracking-transparency#installation-in-bare-react-native-projects

You can add it as a plugin at your app.json

{
  "expo": {
    "plugins": [
      [
        "expo-tracking-transparency",
        {
          "userTrackingPermission": "This identifier will be used to deliver personalized ads to you."
        }
      ]
    ]
  }
}

And now you can use like this:

import React, { useEffect } from 'react';
import { Text, StyleSheet, View } from 'react-native';
import { requestTrackingPermissionsAsync } from 'expo-tracking-transparency';

export default function App() {
  useEffect(() => {
    (async () => {
      const { status } = await requestTrackingPermissionsAsync();
      if (status === 'granted') {
        console.log('Yay! I have user permission to track data');
      }
    })();
  }, []);

  return (
    <View style={styles.container}>
      <Text>Tracking Transparency Module Example</Text>
    </View>
  );
}

You need to request Tracking permissions first (I used react-native-permissions):

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

export const requestPermissionTransparency = async () => {
  return await request(PERMISSIONS.IOS.APP_TRACKING_TRANSPARENCY)
}

useEffect(() => {
    ;(async () => {
      const result = await requestPermissionTransparency()
      if (result === RESULTS.GRANTED) {
        //You need to enable analytics (fb,google,etc...)
        await firebase.analytics().setAnalyticsCollectionEnabled(true)
        console.log('Firebase Analytics: ENABLED')
      }
    })()
  }, [])

Remember to add this file in the root project:

// <project-root>/firebase.json
{
  "react-native": {
    "analytics_auto_collection_enabled": false
  }
}

References: https://rnfirebase.io/analytics/usage

Related