Expo Facebook Login failing

Hi guys, I’m a newby on expo react native and I’m trying to follow some tutorials on how to integrate facebook login into my expo project.

this is my App.js source code:

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

const myAppID = "1965214653688273";

export default function App() {
  const [user, setUser] = useState();
  const signUpFacebook = async() => {
    try {
        await Facebook.initializeAsync(myAppID);
        const {
          type,
          token,
        } = await Facebook.logInWithReadPermissionsAsync({
          permissions: ["public_profile","email"],
          behavior: "browser",
        });

        if(type === "success") {
          const response = await fetch (`https://graph.facebook.com/me?fields=id,name,picture.type(large),email&access_token=${token}`);
          const data = await response.json();
          setUser(data);
        } else {
          // type === "cancel"
        }
    }catch({message})
    {
      alert(`Facebook Login Error: ${message}`);
    }
  }

  return(
    <View style={styles.container}>
      { user ? (
          <View style={styles.fotoContainer}>
            <Image style={styles.image} source={{uri: user.picture.data.url}}/>
            <Text style={styles.text}>{user.name}</Text>
            <Text style={styles.text}>{user.email}</Text>
          </View>
        ) : (
          <Button title="Login" onPress={signUpFacebook} />
        )}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f4f4f4",
    alignItems: "center",
    justifyContent: "center",
  },
  fotoContainer: {},
  image: {width:200, height:200},
  text: {fontSize:18, textAlign:"center"},
});

Once I click in “Login” button I get the following error message:

Facebook Login Error: undefined is not an object (evaluating ‘_ExponentFacebook.default.initializeAsync’)

This is the package.json file:

{
  "name": "Test_FBLogin",
  "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"
  },
  "dependencies": {
    "@react-navigation/native-stack": "^6.7.0",
    "expo": "~46.0.8",
    "expo-facebook": "^12.2.0",
    "expo-status-bar": "~1.4.0",
    "react": "18.0.0",
    "react-native": "0.69.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

I tried different approaches but all resulted into the same error message, do you have any idea what might be causing this error/behavior?

Hey @tigomigo,

The library expo-facebook was removed from Expo SDK 46 and won’t work with the latest SDK and the Expo Go app. Here is the post when the announcement was made: Expo SDK 46. Today we’re announcing the release of… | by Brent Vatne | Aug, 2022 | Exposition

Instead, we recommend using react-native-fbsdk-next.

You will have to follow further instructions to use this library by using a Development Build since this library since react-native-fbsdk-next requires custom native code and won’t work with Expo Go client app. You can read the instructions to use it as a config plugin and configure it in react-native-fbsdk-next Expo installation section.

1 Like