logEventAsync not working on IOS

[motogod]

Please provide the following:

1. SDK Version: 43
2. Platforms(Android/iOS/web/all): iOS

I create a simple project to test, it works on Android, but not working on iOS (both of debug mode and release mode)

package.json:

{
  "name": "testfbtwo",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~43.0.2",
    "expo-facebook": "~12.0.3",
    "expo-status-bar": "~1.1.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

Here is my step:

1. expo init testfbtwo
2. expo install expo-facebook
3. edit app.json
4. set bundle id com.testfbtwo.app on Facebook dashboard
5. run the project, then click requestPermissionsAsync first and click Then Log an event after a few seconds

I set facebookScheme、facebookAppId、facebookDisplayName、facebookAutoLogAppEventsEnabled、facebookAdvertiserIDCollectionEnabled on app.json, also I set NSUserTrackingUsageDescription even I’m not sure it is necessary or not on event tracking

{
  "expo": {
    "name": "testfbtwo",
    "slug": "testfbtwo",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.testfbtwo.app",
      "buildNumber": "14",
      "infoPlist": {
        "NSUserTrackingUsageDescription": "need permissions"
      }
    },
    "android": {
      "package": "com.testfbtwo.app",
      "versionCode": 1,
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "facebookScheme": "fb1035322220370359",
    "facebookAppId": "1035322220370359",
    "facebookDisplayName": "testfbtwo",
    "facebookAutoLogAppEventsEnabled": true,
    "facebookAdvertiserIDCollectionEnabled": true
  }
}

Here is my App.js

import {StatusBar} from 'expo-status-bar';
import React, {useEffect} from 'react';
import {StyleSheet, Text, View, TouchableOpacity, Platform} from 'react-native';
import * as Facebook from 'expo-facebook';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <TouchableOpacity
        onPress={() => {
          Facebook.getPermissionsAsync().then(async (v) =>
            console.log('permissions v', v)
          );
        }}
      >
        <Text style={{fontSize: 20}}>getPermissionsAsync</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={async () => {
          alert('Initial');
          await Facebook.initializeAsync({
            appId: '1035322220370359',
            // version: Platform.select({web: 'v5.0'}),
          });

          if (Platform.OS === 'ios') {
            Facebook.requestPermissionsAsync().then(async (v) => {
              console.log('requestPermissionsAsync', v);
              const {status} = v;
              if (status === 'granted') {
                await Facebook.setAdvertiserTrackingEnabledAsync(true);
                await Facebook.setAutoLogAppEventsEnabledAsync(true);
                await Facebook.setAdvertiserIDCollectionEnabledAsync(true);
              }
            });
          }
        }}
      >
        <Text style={{fontSize: 20}}>requestPermissionsAsync first</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={async () => {
          alert('Send Event');
          if (Platform.OS === 'ios') {
            await Facebook.logEventAsync('testIOS');
          } else {
            await Facebook.logEventAsync('testAndroid');
          }
        }}
      >
        <Text style={{fontSize: 20}}>Then Log an event</Text>
      </TouchableOpacity>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Why event doesn’t display on Facebook dashboard on iOS ?
Is the expo-facebook issue ? Or I did something wrong ?

Any help would be appreciated. Thanks.

[adamjnav]

Hey @motogod, are you testing this within Expo Go? As stated here, there are some limitations compared to Android. Have you tried building a standalone app so that your testing uses your own personal configuration rather than the config baked into Expo Go on iOS?

Cheers,
Adam

[motogod]

@adamjnav Thanks for reply, I test this within Expo Go and run iOS simulator just click the website link, and yes, I have tried building a standalone app for testing, I use this appId com.testfbtwo.app for iOS bundle id on Facebook dashboard.

So may be the key point is this ?
all Facebook API calls in the **Expo Go from the iOS App Store will use Expo's own Facebook App ID

Here is my thought, can you help me figure it out ? Thanks.

1. I have to use host.exp.Exponent on dashboard even my project iOS bundle id is com.testfbtwo.app ?

2. If iOS bundle id’s setting on dashboard is correct, it works only when the App install from iOS App Store ?

3. I have to use this command expo build:ios -t simulator not just click run on iOS simulator on website debug cli, then It should be work on iOS ?

[motogod]

Thanks for help, after I fighting with the problem a few days. It’s working on iOS now.

Through my check, the bundle id is your iOS project bundle id, for me is com.testfbtwo.app, and the most important thing is build the project by the command expo build:ios -t simulator