Day 10: The complete guide to using Facebook SDK in React Native App

#100DaysOfCode

React Native FBSDK allows for Facebook integration in React Native apps and it is a wrapper around the iOS and Android Facebook SDK.

I assumed setting it up to access FB APIs for login, Graph Search, Sharing etc would be fairly simple but damn I was wrong! It is fairly complicated to get it running and it doesn’t help that Facebook’s very own instruction page is wrong (their steps lead you to setup the SDK via cocoapods as well as Xcode’s build setting which confuses your app leading to build fails)!

Project: Setup Facebook SDK on a React Native app and create a login page that uses FBSDKLogin API.

All the code for this project can be found on my github

Note: For the purpose of this project, instructions below are specifically for iOS setup on Mac. Instructions for Android will vary.

Setup 1: Installation (Get ready with your coffee as its a long process!)

  • Assuming you have react-native app already setup, if not go ahead and set it up using this command:
react-native init YourApp
  • Install react-native-fbsdk packages from within your app.
npm install — save react-native-fbsdk
npm install — save react-native-fbsdklogin
  • Install CocoaPods, a dependency manager to make your life easier.
sudo gem install cocoapods
  • In your app “YourApp/ios” directory, create a Podfile by running:
pod init
  • Then add the following to the created Podfile
target 'YourApp' do
source 'https://github.com/CocoaPods/Specs.git'
pod 'React', :subspecs => ['Core', 'RCTImage', 'RCTNetwork', 'RCTText', 'RCTWebSocket'], :path => '../node_modules/react-native'
pod 'react-native-fbsdkcore', :path => '../node_modules/react-native-fbsdk/iOS/core'
pod 'react-native-fbsdklogin', :path => '../node_modules/react-native-fbsdk/iOS/login'
pod 'react-native-fbsdkshare', :path => '../node_modules/react-native-fbsdk/iOS/share'
end
  • Open your project in Xcode and remove all the files under Libraries/ directory to avoid conflict with dependency pulled via CocoaPods.
  • From the location of your Podfile run “pod install”. This will automatically download the Facebook SDK for iOS and create a new Xcode workspace containing all native files. From now on open YourApp.xcworkspace instead of YourApp.xcodeproj in Xcode.
  • Facebook suggests adding “$(inherited)” to “Other Linker Flags” in Xcode under your project’s build setting (as shown below) to avoid any building/linking issues.

Step 2: Setup a facebook app

  • Create a new facebook app using this link: New App
  • Select Settings in App Dashboard.
  • Click Add Platform and choose iOS.
  • Then provide your Bundle Identifier (com.YourApp) in the Bundle ID field. Enable Single Sign On and Save Changes.

Step 3: Configure the facebook app in Xcode

Now open in Xcode (created within your project directory by CocaoPods).

Follow strictly only STEPS 5- 7 from this link: https://developers.facebook.com/docs/ios/getting-started/

Step 4: Create Login screen in your react-native app

In your react-native app add a login screen with facebook login button as follows: First require the fbsdk and create a LoginButton

const FBSDK = require('react-native-fbsdk');
const {
LoginButton,
} = FBSDK;

Then add the LoginButton to your view as follows:

<LoginButton 
publishPermissions={[“publish_actions”]}
onLoginFinished={
(error, result) => {
(error) {
alert(“Login failed with error: “ + result.error);
} else if (result.isCancelled) {
alert(“Login was cancelled”);
} else {
alert(“Login was successful with permissions: “
+ result.grantedPermissions)
}
}
}
onLogoutFinished={() => alert(“User logged out”)}
/>

Full code for this project can be found in my github page.

Step 5: Run the app

In terminal, from within your app start npm server.

npm start

Then finally run the app in Xcode in a simulator of your choice. I ran it in iPhone 6s and it looks like below.

Day 10 of #100DaysOfCode DONE

If you enjoyed this, please click 👏 so that others can enjoy it as well. Follow me on Twitter @HariniLabs to get the latest updates or just to say Hi :)

PS: I curate a bi-weekly #WomenInTech newsletter for a dose of inspiration from the world of tech and yes men can signup too! Get it here :)