Struggles with React Native Link

Adding Facebook’s Login SDK to a React Native / Firebase App:

** Note: React Native v0.60 now includes auto linking which may potentially solve this issue

I struggled with this specific piece of functionality on and off for a month due to a lack of documentation and a bunch of different build errors. What turned out to be the issue was, that as of the time I was creating this app, the command react-native link was not interacting properly with the react-native-fbsdk. I had to find a manual work around for this using the Facebook documentation and piecing together different debugging solutions from various sources. Below are the steps I took to incorporate the SDK with no errors and full functionality

Major Errors I Encountered:

Cannot read property loginWithReadPermissions of undefined — This was because the SDK was not linking correctly and therefore Login Manager would not work correctly.

Final Step by Step Tutorial

npm i react-native-fbsdk

NOTE: DO NOT RUN:

react-native link react-native-fbsdk

this will lead to errors and this tutorial is to work around those errors

Once this is done follow these step by step instructions

  1. Create a new Facebook App on the Facebook Developers Site
  2. Enable Facebook Sign In on your Firebase project and add your new App ID and App Secret from the previous step
  3. Download the Facebook SDK here into your Documents folder and unzip it
  4. Create a directory in the ios folder of your application called Frameworks
  5. Copy the following frameworks from the Facebook SDK folder to your new Frameworks folder — 1. Bolts.framework 2. FBSDKCoreKit.framework 3. FBSDKLoginKit.framework 4. FBSDKShareKit.framework
  6. Add the following code to your Info.plist right above the last </dict> tag and make sure to swap out the curly braces for your actual App ID and display name
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fb{fb-app-id}</string>
</array>
</dict>
</array>
<key>FacebookAppID</key>
<string>{fb-app-id}</string>
<key>FacebookDisplayName</key>
<string>{fb-display-name}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-share-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
</array>

7. Add the following code to your AppDelegate.m under didFinishLaunchingWithOptions

[[FBSDKApplicationDelegate sharedInstance] application:application
didFinishLaunchingWithOptions:launchOptions];

If you are unsure where this is see the picture:

8. Add the following code to your AppDelegate.m right before the final @end

- (BOOL)application:(UIApplication *)application 
openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication
annotation:(id)annotation {
BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application
openURL:url
sourceApplication:sourceApplication
annotation:annotation
];
// Add any custom logic here.
return handled;
}

9. Add the following code to your Login page

import { LoginButton, AccessToken } from "react-native-fbsdk";<LoginButton
publishPermissions={["email"]}
onLoginFinished={
(error, result) => {
if (error) {
alert("Login failed with error: " + error.message);
} else if (result.isCancelled) {
alert("Login was cancelled");
} else {
alert("Login was successful with permissions: " + result.grantedPermissions)
}
}
}
onLogoutFinished={() => alert("User logged out")}/>

10. Now here comes the Xcode part to manually link the SDK to your project. Find your project’s .xcodeproj file and open it in Xcode.

11. Click and drag the the files from your Frameworks folder to your Framework folder in Xcode making sure to click copy if needed in the dialog box that pops up

Final Frameworks Folder Xcode

12. Go into your node_modules folder and find the folder labeled `react-native-fbsdk` in there go into your ios folder and copy the RCTFBSDK.xcodeproj to your Libraries folder in Xcode making sure to click copy if needed in the dialog box that pops up so you end up with this:

Final Libraries Folder in Xcode

13. Go to your project’s Build Phases — found by clicking your project name in the project navigator and under Link Binary With Libraries add the libRCTFBSDK.a library.

Now build your project and watch the magic happen!!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store