React Native 0.60.5 FacebookSDK iOS with Cocoapods
19-August-2019
This is my first article on Medium so pardon me if i’m missing anything, I will not take your much time so let’s start :)
React Native community is working hard to remove complexities in React Native. So the version 0.60.5 is all about it, where you don’t have to link libraries by running react-native link in command promt to link them, neither you have to link manually with a lot of hardwork which you used to do before React Native 0.60.5.
So today i’m going to implement React Native Facebook SDK for iOS on React Native 0.60.5, let’s start it.
First create a project by running, react-native init your-project-name
cd your-project-name , so now you have entered into your project now run yarn (if using yarn) or npm install to install Javascript packages
Now you need to install pod file for iOS so do cd ios and in your ios folder run pod install like mentioned in the below screenshot.
after successfully running pod go back to your project folder by typing cd ..
Now install React Native FacebookSDK library by running yarn add react-native-fbsdk or npm install react-native-fbsdk, after that go into your iOS via command promt again and run pod install it will now generate three files FBSDKCoreKit , FBSDKLoginKit and FBSDKShareKit automatically for you as mentioned in the below screenshot.
in React Native 0.60.5 you don’t need to add Framework Search Path hurray!
in React Native 0.60.5 it will add Header Search Paths for FBSDKCoreKit , FBSDKLoginKit and FBSDKShareKit automatically as mentioned below in the screenshot, Cocoa Pods is really making life easier for React Native Developers.
in React Native 0.60.5 you do not need to add this line pod ‘react-native-fbsdk’, :path => ‘../node_modules/react-native-fbsdk’ or any other line into your pod file ,the pod install will automatically handle this all for you as you can see in my screenshot below.
Now setup your Developer Facebook for FBSDK via this link https://developers.facebook.com/docs/apps/ or this link https://developers.facebook.com/apps/ and create your app which will look like the mentioned below screenshot of my app
Now go to Products => Facebook Login => Quickstart
Click on iOS
Now you have entered into your Development Environment kindly stick with SDK: Cocoapods, you will love it
Now don’t do anything just click on next, why i’m saying this? Because we have already installed pod files into our project.
Now go to the Second step of Set up Your Development Environment which will be asking you Bundle ID
Open your project in xcode click on the parent file of your project mine is ReactFB which you can see in the below screenshot, now after clicking on your project parent file the below screen will appear, in General => Identify => Bundle Identifier you can get it.
Now paste the Bundle ID into your Set up Your Development Environment Step Two which will look like the below screenshot.
Now Click on Save and then click on Continue.
Now Kindly click on Single Sign On option mentioned in the below screenshot and then click on Next
Step 4 of Set up Your Development Environment now configure your info.plist make sure you are doing it correctly else it will throw an error while running the project.
After setting up info.plist go to Build Settings => Other Linker Flags and do this which is mentioned in the below screenshot , well you don’t need to this because it is done by default but if it is not you must do this.
Step 5 of Set up Your Development Environment Connect App Delegate by doing same what i did in the above 2 screenshots.
Now it’s all done, For React Native we only have to follow 1–5 steps, now we will be making our own custom Button, below is the code for our Custom Button.
import React, {Component} from ‘react’;
import {View, TouchableOpacity, Text, StyleSheet} from ‘react-native’;
import {
AccessToken,
GraphRequest,
GraphRequestManager,
} from ‘react-native-fbsdk’;
export default class App extends Component {
constructor(props) {
super(props);
}
_fbData = () => {
AccessToken.getCurrentAccessToken()
.then(user => {
// alert(
// ‘Facebook accessToken:\n’ +
// user.accessToken +
// ‘\n\naccessTokenSource: ‘ +
// user.accessTokenSource +
// ‘\n\nuserID: ‘ +
// user.userID,
// );
console.log(user);
return user;
})
.then(user => {
const responseInfoCallback = (error, result) => {
if (error) {
console.log(error);
alert(‘Error fetching data: ‘ + error.toString());
} else {
console.log(result);
alert(
‘id: ‘ +
result.id +
‘\n\nname: ‘ +
result.name +
‘\n\nfirst_name: ‘ +
result.first_name +
‘\n\nlast_name: ‘ +
result.last_name +
‘\n\nemail: ‘ +
result.email,
);
}
};
const infoRequest = new GraphRequest(
‘/me’,
{
accessToken: user.accessToken,
parameters: {
fields: {
string: ‘email,name,first_name,last_name’,
},
},
},
responseInfoCallback,
);
// Start the graph request.
new GraphRequestManager().addRequest(infoRequest).start();
});
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => {
this._fbData();
}}
style={styles.label}>
<Text>Welcome to the Facebook SDK for React Native!</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: ‘column’,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
label: {
fontSize: 16,
fontWeight: ‘normal’,
marginBottom: 48,
},
});
copy and paste the above code into your App.js file same as it is and you are ready to go.
