expo-facebook

Ask
questions
expo-facebook “Facebook Login Error: Argument of an incompatible class: clalss java.lang.String cannot be passed as an argument to parameter expecting interface abi39_0_0.org.unimodules.core.arguments.ReadableArguments.

🐛 Bug Report

Main Issue: expo-facebook on Facebook.initializeAsync() with only “autoLogAppEvents” set to true and appId set produces an error

On Facebook.initializeAsync(), the following error occurs:
Facebook Login Error: Argument of an incompatible class: clalss java.lang.String cannot be passed as an argument to parameter expecting interface abi39_0_0.org.unimodules.core.arguments.ReadableArguments.

Environment – output of expo diagnostics & the platform(s) you’re targeting

Expo CLI 3.27.13 environment info:
System:
OS: Linux 5.8 Arch Linux
Shell: 5.0.18 – /bin/bash
Binaries:
Node: 14.13.0 – /usr/bin/node
npm: 6.14.8 – /usr/bin/npm
npmPackages:
expo: ~39.0.2 => 39.0.3
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz => 0.63.2
react-native-web: ~0.13.12 => 0.13.14
npmGlobalPackages:
expo-cli: 3.27.13
Expo Workflow: managed

I am targeting Android.

Reproducible Demo

App.js, where APP_ID is the Facebook App ID

import React, { useState } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, Button, ActivityIndicator } from 'react-native';
import * as Facebook from 'expo-facebook';

export default function App() {

  const [isLoggedin, setLoggedinStatus] = useState(false);
  const [userData, setUserData] = useState(null);
  const [isImageLoading, setImageLoadStatus] = useState(false);

  const facebookLogIn = async () => {
    try {
      await Facebook.initializeAsync(
        {
          autoLogAppEvents: true,
          appId: APP_ID,
        }
      );

      const {
        type,
        token,
        expires,
        permissions,
        declinedPermissions,
      } = await Facebook.logInWithReadPermissionsAsync(APP_ID, {
        permissions: ['public_profile'],
      });
      if (type === 'success') {
        // Get the user's name using Facebook's Graph API
        fetch(`https://graph.facebook.com/me?access_token=${token}&fields=id,name,email,picture.height(500)`)
          .then(response => response.json())
          .then(data => {
            setLoggedinStatus(true);
            setUserData(data);
          })
          .catch(e => console.log(e))
      } else {
        // type === 'cancel'
      }
    } catch ({ message }) {
      alert(`Facebook Login Error: ${message}`);
    }
  }

  return (
    <View style={styles.button}>
      <Button 
        title='Sign In With Facebook'
        onPress={facebookLogIn}
      /> 
    </View>
  );
}

const styles = StyleSheet.create({
  button: {
    margin: 100,
    padding: 20
  }
})

App.json with Facebook App ID as APP_ID

{
  "expo": {
    "name": "FacebookLoginError",
    "slug": "FacebookLoginError",
    "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
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "facebookAutoInitEnabled": true,
  }
}

Steps to Reproduce

npm install expo-cli –global
expo init FacebookLoginError
expo install expo-facebook

Replace App.js and App.json with the code above.

Then run expo start and press the button to login.

Expected Behavior vs Actual Behavior

I expect the button to give me a more readable error. I am new to making issues here. If there is any problem with the way I have presented this issue, all advice is appreciated.

Latest posts