[expo-facebook][SDK44] expo-facebook not working with expo-dev-client

Summary

If I follow this guide expo-facebook and I try to make it work with an expo-dev-client, it throws an error.

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android

SDK Version (managed workflow only)

44

Environment

expo-env-info 1.0.2 environment info: System: OS: Windows 10 10.0.19044 Binaries: Node: 14.17.1 - F:\Programs\nodejs\node.EXE Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.13 - F:\Programs\nodejs\npm.CMD npmPackages: expo: ~44.0.0 => 44.0.6 react: 17.0.1 => 17.0.1 react-dom: 17.0.1 => 17.0.1 react-native: 0.64.3 => 0.64.3 react-native-web: 0.17.1 => 0.17.1 Expo Workflow: managed

Reproducible demo

1. Create a new app (ts template)
2. Run expo install expo-dev-client
3. Run expo install expo-facebook
4. Create a new facebook app here
5. I added a couple keys to app.json like facebookScheme, facebookAppId and facebookDisplayName
6. Run eas build:configure
7. Replace App.tsx with the following code:

import "expo-dev-client";

import { StatusBar } from "expo-status-bar";
import { useEffect, useState } from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import * as Facebook from "expo-facebook";

export default function App() {
  const [result, setResult] = useState<Facebook.FacebookLoginResult>();

  const facebookLoginHandler = async () => {
    try {
      const _result = await Facebook.logInWithReadPermissionsAsync({
        permissions: ["public_profile"],
      });

      setResult(_result);
    } catch (err) {
      console.log("err", { err: JSON.stringify(err, null, 2) });
    }
  };

  useEffect(() => {
    async function initialize() {
      await Facebook.initializeAsync({
        appId: "APP_ID_FROM_FB_HERE",
        appName: "Expo test app",
      });
    }

    initialize();
  }, []);
  return (
    <View style={styles.container}>
      <Button onPress={facebookLoginHandler} title="Try login with facebook" />
      <Text>Result: {JSON.stringify(result, null, 2) ?? "No result"}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

1. Replace the appId from the Facebook app
2. Run `eas build --profile development --platform android --no-wait
3. Run eas credential, select the development profile, copy the SHA1 fingerprint, convert it base64 (here)[https://base64.guru/converter/encode/hex]
4. On the facebook app, add the android platform and paste the base64 signature and save the changes.
5. Install the app created on eas, run expo start --dev-client, scan the code and press the button to try to login.

Only error:

{
  \"nativeStackAndroid\": [
    {
      \"lineNumber\": 221,
      \"file\": \"LoginManager.java\",
      \"methodName\": \"onActivityResult\",
      \"class\": \"com.facebook.login.LoginManager\"
    },
    {
      \"lineNumber\": 181,
      \"file\": \"LoginManager.java\",
      \"methodName\": \"onActivityResult\",
      \"class\": \"com.facebook.login.LoginManager$1\"
    },
    {
      \"lineNumber\": 81,
      \"file\": \"CallbackManagerImpl.java\",
      \"methodName\": \"onActivityResult\",
      \"class\": \"com.facebook.internal.CallbackManagerImpl\"
    },
    {
      \"lineNumber\": 62,
      \"file\": \"FacebookModule.kt\",
      \"methodName\": \"onActivityResult\",
      \"class\": \"expo.modules.facebook.FacebookModule\"
    },
    {
      \"lineNumber\": 165,
      \"file\": \"UIManagerModuleWrapper.java\",
      \"methodName\": \"onActivityResult\",
      \"class\": \"expo.modules.adapters.react.services.UIManagerModuleWrapper$4\"
    },
    {
      \"lineNumber\": 305,
      \"file\": \"ReactContext.java\",
      \"methodName\": \"onActivityResult\",
      \"class\": \"com.facebook.react.bridge.ReactContext\"
    },
    {
      \"lineNumber\": 762,
      \"file\": \"ReactInstanceManager.java\",
      \"methodName\": \"onActivityResult\",
      \"class\": \"com.facebook.react.ReactInstanceManager\"
    },
    {
      \"lineNumber\": 90,
      \"file\": \"ReactDelegate.java\",
      \"methodName\": \"onActivityResult\",
      \"class\": \"com.facebook.react.ReactDelegate\"
    },
    {
      \"lineNumber\": 113,
      \"file\": \"ReactActivityDelegate.java\",
      \"methodName\": \"onActivityResult\",
      \"class\": \"com.facebook.react.ReactActivityDelegate\"
    },
    {
      \"lineNumber\": 103,
      \"file\": \"ReactActivityDelegateWrapper.kt\",
      \"methodName\": \"onActivityResult\",
      \"class\": \"expo.modules.ReactActivityDelegateWrapper\"
    },
    {
      \"lineNumber\": 69,
      \"file\": \"ReactActivity.java\",
      \"methodName\": \"onActivityResult\",
      \"class\": \"com.facebook.react.ReactActivity\"
    },
    {
      \"lineNumber\": 8651,
      \"file\": \"Activity.java\",
      \"methodName\": \"dispatchActivityResult\",
      \"class\": \"android.app.Activity\"
    },
    {
      \"lineNumber\": 5850,
      \"file\": \"ActivityThread.java\",
      \"methodName\": \"deliverResults\",
      \"class\": \"android.app.ActivityThread\"
    },
    {
      \"lineNumber\": 5896,
      \"file\": \"ActivityThread.java\",
      \"methodName\": \"handleSendResult\",
      \"class\": \"android.app.ActivityThread\"
    },
    {
      \"lineNumber\": 54,
      \"file\": \"ActivityResultItem.java\",
      \"methodName\": \"execute\",
      \"class\": \"android.app.servertransaction.ActivityResultItem\"
    },
    {
      \"lineNumber\": 45,
      \"file\": \"ActivityTransactionItem.java\",
      \"methodName\": \"execute\",
      \"class\": \"android.app.servertransaction.ActivityTransactionItem\"
    },
    {
      \"lineNumber\": 135,
      \"file\": \"TransactionExecutor.java\",
      \"methodName\": \"executeCallbacks\",
      \"class\": \"android.app.servertransaction.TransactionExecutor\"
    },
    {
      \"lineNumber\": 95,
      \"file\": \"TransactionExecutor.java\",
      \"methodName\": \"execute\",
      \"class\": \"android.app.servertransaction.TransactionExecutor\"
    },
    {
      \"lineNumber\": 2434,
      \"file\": \"ActivityThread.java\",
      \"methodName\": \"handleMessage\",
      \"class\": \"android.app.ActivityThread$H\"
    },
    {
      \"lineNumber\": 106,
      \"file\": \"Handler.java\",
      \"methodName\": \"dispatchMessage\",
      \"class\": \"android.os.Handler\"
    },
    {
      \"lineNumber\": 226,
      \"file\": \"Looper.java\",
      \"methodName\": \"loopOnce\",
      \"class\": \"android.os.Looper\"
    },
    {
      \"lineNumber\": 313,
      \"file\": \"Looper.java\",
      \"methodName\": \"loop\",
      \"class\": \"android.os.Looper\"
    },
    {
      \"lineNumber\": 8633,
      \"file\": \"ActivityThread.java\",
      \"methodName\": \"main\",
      \"class\": \"android.app.ActivityThread\"
    },
    {
      \"lineNumber\": -2,
      \"file\": \"Method.java\",
      \"methodName\": \"invoke\",
      \"class\": \"java.lang.reflect.Method\"
    },
    {
      \"lineNumber\": 567,
      \"file\": \"RuntimeInit.java\",
      \"methodName\": \"run\",
      \"class\": \"com.android.internal.os.RuntimeInit$MethodAndArgsCaller\"
    },
    {
      \"lineNumber\": 1135,
      \"file\": \"ZygoteInit.java\",
      \"methodName\": \"main\",
      \"class\": \"com.android.internal.os.ZygoteInit\"
    }
  ],
  \"userInfo\": null,
  \"message\": \"An error occurred while trying to log in to Facebook\",
  \"code\": \"ERR_FACEBOOK_LOGIN\",
  \"line\": 3311,
  \"column\": 45,
  \"sourceURL\": \"http://bi-ckq.lhersey.my-app.exp.direct/node_modules/expo/AppEntry.bundle?platform=android&dev=torm=android&dev=true&minify=false&app=com.test.test&modulesOnly=false&runModule=true\"
}

The SDK seems to be deprecated, I don’t know if it’s related.

Any help or workaround will be very helpful, thanks!

[mythosil]

@lHersey I ran into the same issue. Removing appName from Facebook.initializeAsync solved my issue. I hope this workaround works for you too.

I’m not perfectly sure, but this issue is related to this PR #16809 .

[lHersey]

@lHersey I ran into the same issue. Removing appName from Facebook.initializeAsync solved my issue. I hope this workaround works for you too.

I’m not perfectly sure, but this issue is related to this PR #16809 .

I can confirm this workaround fixes the issue! 😄 Thanks!