Please provide the following:
- SDK Version: 38
- Platforms(Android/iOS/web/all): Android
Hi everyone, I’m having some problems with Facebook login on Android.
Expo client app crashes after login both on real device and the emulator, on iOS everything is fine.
I followed the instructions found in the expo-facebook documentation and I can’t find nothing wrong inside my project.
This is my code
import React, { useState } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, ActivityIndicator, Dimensions } from 'react-native';
import * as Facebook from 'expo-facebook';
var { height, width } = Dimensions.get("window");
export default function FacebookAuth() {
const [isLoggedin, setLoggedinStatus] = useState(false);
const [userData, setUserData] = useState(null);
const [isImageLoading, setImageLoadStatus] = useState(false);
facebookLogIn = async () => {
try {
const {
type,
token,
expires,
permissions,
declinedPermissions,
} = await Facebook.logInWithReadPermissionsAsync('xxxxxxxx', {
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}`);
}
}
logout = () => {
setLoggedinStatus(false);
setUserData(null);
setImageLoadStatus(false);
}
return (
isLoggedin ?
userData ?
<View style={styles.container}>
<View style={styles.userBox}>
<View style={styles.profileImage}>
<Image
style={{ flex: 1, borderRadius: 100 }}
source={{ uri: userData.picture.data.url }}
onLoadEnd={() => setImageLoadStatus(true)}
/>
<ActivityIndicator size="large" color="#0000ff" animating={!isImageLoading} style={{ position: "absolute" }} />
</View>
<View style={{ flex: 1 }}>
<Text style={styles.textUserBoldStyle}>{userData.name.toUpperCase()}</Text>
<Text style={styles.textUserRegularStyle}>Utente n° 99999</Text>
</View>
<TouchableOpacity style={styles.logoutBtn} onPress={logout}>
<Text style={{ color: "#fff" }}>Logout</Text>
</TouchableOpacity>
</View>
</View>
:
null
:
<View style={styles.container}>
<TouchableOpacity style={styles.loginBtn} onPress={facebookLogIn}>
<Text style={{ color: "#fff" }}>Login with Facebook</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
loginBtn: {
backgroundColor: '#4267b2',
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 20
},
logoutBtn: {
backgroundColor: '#bababa',
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 20,
position: "absolute",
bottom: 0,
height: '20%'
},
userBox: {
flex: 1,
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
},
textUserBoldStyle: {
color: "#000",
fontFamily: "MontserratBold",
fontSize: height * 0.018,
},
textUserRegularStyle: {
color: "#121212",
fontFamily: "MontserratRegular",
fontSize: height * 0.013,
},
profileImage: {
marginLeft: 30,
marginRight: 20,
marginVertical: height * 0.04,
width: "20%",
height: undefined,
aspectRatio: 1,
alignSelf: "center",
backgroundColor: "yellow",
borderRadius: 100,
},
});
This is my app.json
{
"expo": {
"name": "GOWASH",
"slug": "GOWASH",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"facebookScheme": "xxxxx",
"facebookAppId": "xxxxxx",
"facebookDisplayName": "xxxxx",
"splash": {
"image": "./assets/3x/Asset3x.png",
"resizeMode": "contain"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"web": {
"favicon": "./assets/favicon.png"
},
"android" : {
"permissions": ["ACCESS_COARSE_LOCATION", "ACCESS_FINE_LOCATION"]
}
}
}
