How to get user info (email, name, etc.) from the react-native-fbsdk?
That will help you, this is worked for me
import React, { Component } from 'react';
import { View } from 'react-native';
import { LoginManager,LoginButton,AccessToken,GraphRequest,GraphRequestManager} from 'react-native-fbsdk';
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<LoginButton
publishPermissions={["publish_actions"]}
onLoginFinished={
(error, result) => {
if (error) {
alert("login has error: " + result.error);
} else if (result.isCancelled) {
alert("login is cancelled.");
} else {
AccessToken.getCurrentAccessToken().then(
(data) => {
const infoRequest = new GraphRequest(
'/me?fields=name,picture',
null,
this._responseInfoCallback
);
// Start the graph request.
new GraphRequestManager().addRequest(infoRequest).start();
}
)
}
}
}
onLogoutFinished={() => alert("logout.")}/>
</View>
);
}
//Create response callback.
_responseInfoCallback = (error, result) => {
if (error) {
alert('Error fetching data: ' + error.toString());
} else {
alert('Result Name: ' + result.name);
}
}
}
For Detail visit here it will help you more. Facebook Login React
The accepted answer uses fetch
but the SDK is capable of doing this request as well... So in case anyone is wondering, this is how it can be done with the SDK.
let req = new GraphRequest('/me', {
httpMethod: 'GET',
version: 'v2.5',
parameters: {
'fields': {
'string' : 'email,name,friends'
}
}
}, (err, res) => {
console.log(err, res);
});
For more details, See https://github.com/facebook/react-native-fbsdk#graph-requests
You could do something like this (which is a boiled down version of what I'm doing in my app):
<LoginButton
publishPermissions={['publish_actions']}
readPermissions={['public_profile']}
onLoginFinished={
(error, result) => {
if (error) {
console.log('login has error: ', result.error)
} else if (result.isCancelled) {
console.log('login is cancelled.')
} else {
AccessToken.getCurrentAccessToken().then((data) => {
const { accessToken } = data
initUser(accessToken)
})
}
}
}
onLogoutFinished={logout} />
// initUser function
initUser(token) {
fetch('https://graph.facebook.com/v2.5/me?fields=email,name,friends&access_token=' + token)
.then((response) => response.json())
.then((json) => {
// Some user object has been set up somewhere, build that user here
user.name = json.name
user.id = json.id
user.user_friends = json.friends
user.email = json.email
user.username = json.name
user.loading = false
user.loggedIn = true
user.avatar = setAvatar(json.id)
})
.catch(() => {
reject('ERROR GETTING DATA FROM FACEBOOK')
})
}
import React, { Component } from 'react';
import { View } from 'react-native';
import { LoginButton, AccessToken } from 'react-native-fbsdk';
export default class FBLogin extends Component {
initUser = (token) => {
fetch('https://graph.facebook.com/v2.5/me?fields=email,first_name,last_name,friends&access_token=' + token)
.then((response) => {
response.json().then((json) => {
const ID = json.id
console.log("ID " + ID);
const EM = json.email
console.log("Email " + EM);
const FN = json.first_name
console.log("First Name " + FN);
})
})
.catch(() => {
console.log('ERROR GETTING DATA FROM FACEBOOK')
})
}
render() {
return (
<View>
<LoginButton
publishPermissions={['publish_actions']}
readPermissions={['public_profile']}
onLoginFinished={
(error, result) => {
if (error) {
console.log('login has error: ', result.error)
} else if (result.isCancelled) {
console.log('login is cancelled.')
} else {
AccessToken.getCurrentAccessToken().then((data) => {
const { accessToken } = data
// console.log(accessToken);
this.initUser(accessToken)
})
}
}
}
onLogoutFinished={() => {
console.log('Logout');
}}
/>
</View>
);
}
};