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?