
React Native FBSDK
https://github.com/facebook/react-native-fbsdk
Facebook Developers
Create app in facebook developers
https://developers.facebook.com/
android/app/src/main/AndroidManifest.xml
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
android/app/src/main/res/values/strings.xml
<string name="facebook_app_id">id_facebook</string>
<string name="fb_login_protocol_scheme">fb[id_facebook]</string>
Hash
keytool -exportcert -alias androiddebugkey -keystore debug.keystore | openssl sha1 -binary | openssl base64
Run
sudo react-native start --reset-cache
sudo react-native run-android
React native Login
import { AccessToken, LoginManager } from 'react-native-fbsdk';
constructor(props) {
super(props);
this.state = {
id_facebook:null,
picture:null,
name:null,
email:null,
token:null
};
}
function onPress from Button
_AuthFB()
{
const dhis = this
// Attempt a login using the Facebook login dialog asking for default permissions.
LoginManager.logInWithPermissions(["public_profile","email"]).then(
function(result) {
if (result.isCancelled) {
console.log("Login cancelled");
} else {
console.log(
"Login success with permissions: " +
result.grantedPermissions.toString()
);
dhis._setDataFB()
}
},
function(error) {
console.log("Login fail with error: " + error);
}
);
}
async _setDataFB()
{
// get token from facebook
const tokenData = await AccessToken.getCurrentAccessToken().then(
(data) => {
return data.accessToken.toString()
}
)
// get data about profile from api graph
const datajson = await this.apiGraphFace(tokenData)
if (datajson.success) {
// variable para enviar post
const data_fb = {
id_facebook: datajson.data.id,
email : datajson.data.email,
name : datajson.data.name,
picture: datajson.data.picture
}
this.setState(data_fb);
}
}
async apiGraphFace (token) {
const resface = await fetch('https://graph.facebook.com/v2.10/me?fields=id,name,email,picture.width(500)&access_token='+token)
.then((response) => response.json())
.then((json) => {
const data = {
data: json,
success: true
}
return data ;
})
.catch((error) => {
const data = {
message: error,
success: false
}
return data;
})
return resface;
}
Full Source code
import React, { Component } from 'react';
import { Text, Dimensions, View, TextInput, TouchableOpacity, Image } from 'react-native';
var { width } = Dimensions.get("window")
import { LoginManager, AccessToken } from 'react-native-fbsdk'
export default class Profile extends Component {
constructor(props) {
super(props);
this.state = {
id_facebook:null,
picture:null,
name:null,
email:null,
token:null
};
}
render() {
return (
<View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
{
this.state.id_facebook?
<View style={{justifyContent:'center'}}>
<Image source={{uri: this.state.picture.data.url}} style={{width:200,height:200}} />
<View style={{height:20}} />
<Text style={{fontSize:20,fontWeight:"bold"}}>{this.state.name}</Text>
<Text style={{fontSize:20}}>{this.state.email}</Text>
<View style={{height:20}} />
<Text >facebook ID</Text>
<Text >{this.state.id_facebook}</Text>
</View>
:
<TouchableOpacity
onPress={()=>this._authFB()}
style={{
backgroundColor:"#3b5998",
width:width-40,
alignItems:'center',
padding:10,
borderRadius:5
}}>
<Text style={{
fontSize:24,
fontWeight:'bold',
color:"white"
}}>
Login facebook
</Text>
</TouchableOpacity>
}
</View>
);
}
_authFB()
{
const dhis = this
LoginManager.logInWithPermissions(["public_profile"]).then(
function(result) {
if (result.isCancelled) {
console.log("Login cancelled");
} else {
console.log(
"Login success with permissions: " +
result.grantedPermissions.toString()
);
dhis._setDataFB()
}
},
function(error) {
console.log("Login fail with error: " + error);
}
);
}
async _setDataFB()
{
// get token from facebook
const tokenData = await AccessToken.getCurrentAccessToken().then(
(data) => {
return data.accessToken.toString()
}
)
// get data about profile from api graph
const datajson = await this.apiGraphFace(tokenData)
if (datajson.success) {
console.log(datajson.data);
// variable para enviar post
const data_fb = {
id_facebook: datajson.data.id,
email : datajson.data.email,
name : datajson.data.name,
picture: datajson.data.picture
}
this.setState(data_fb);
}
else {
console.log("Error get data");
}
}
async apiGraphFace (token) {
const resface = await fetch('https://graph.facebook.com/v2.10/me?fields=id,name,email,picture.width(500)&access_token='+token)
.then((response) => response.json())
.then((json) => {
const data = {
data: json,
success: true
}
return data ;
})
.catch((error) => {
const data = {
message: error,
success: false
}
return data;
})
return resface;
}
}
How did folder structure got changed. Can you please tell me the way how to change folder structe
I don’t understand,
What folder do you speak?
Sir,
I’m sincerely following your channel. A small request from me.
In food app you have explained UI (front end) very well.
Please provide some videos on food app backed. like how api.json is generated and folder structure on backed. Which is best backend server for food APP.
Thankyou,
Mahesh
ok
Hello, I’m really enjoying your tutorial
I think it’s the best i’ve seen
Just a little request:
How do you change the pictures and names of the products in the categories
Thank you