Latest set up instructions here

peterleilei86 commented 5 years ago

How to set up FBSDK for react native 60+

iOS

Install react-native-fbsdk

react-native install git+https://github.com/facebook/react-native-fbsdk.git

Note: command above will autolink react-native-fbsdk, so you need to unlink it by running the following command

react-native unlink react-native-fbsdk

Or install by Yarn

yarn add git+https://github.com/facebook/react-native-fbsdk.git

Install FBSDK frameworks

Install by Cocoapods

cd ios/
pod install
cd ..

Note: After frameworks are installed, open podfile.lock file in ios folder to see which version is installed.

Download Facebook SDK

Go to releases on facebook-objc-sdk repo and download the same version as the one downloaded by cocoapods above.
Choose FacebookSDK_Static.zip and extract all .framework file to ~/Documents/FacebbookSDK/ folder(create a folder and name it FacebookSDK if you dont have such folder in your ~/Documents folder)

Set up in Xcode

Open your project by double clicking [project name].xcworkspace file in ios folder. NOT [project name].xcodeproj file
Right click on Libraries and select Add Files to [project name], go to node_modules folder and select RCTFBSDK.xcodeproj file in the ios folder of react-native-fbsdk
Inside RCTFBSDK.xcodeproj, right click frameworks folder and select Add Files to RCTFBSDK.xcodeproj. Add FBSDK[Core, Login, Share]kit.framework files from ~/Documents/FacebookSDK/ Note: make sure all framework files are added in Link Binary with Libraries section under RCTFBSDK.xcodeproj

Modify Info.plist and AppDelegate.m

Follow step 3 and 4 in here

Issues you may run into

duplicate symbol
- Make sure there is nothing but libPods-[project name].a file in Link Binary with Libraries for your root project Don't get confused with Link Binary with Libraries when RCTFBSDK.xcodeproj is selected.
'React/RCTComponentEvent.h' file not found OR 'React/RCTBridgeModule.h' file not found
- Select frameworks under RCTFBSDK.xcodeproj
- Right click and select Add Files to RCTFBSDK.xcodeproj
- Select React.xcodeproj in node_modules/react-native/React
- Add RCTComponentEvent.h under Copy Headers section in Build Phases when selecting React as target.

Android

Go to android/build.gradle, add mavenCentral() like so

buildscript {
...
repositories {
    ...
    mavenCentral()
}
...
}

Go to android/app/build.gradle, add the following line like so:

dependencies {
...
implementation 'com.facebook.android:facebook-android-sdk:[5,6)'
...
}

Add in your android/settings.gradle file

include ':react-native-fbsdk'
project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')

Follow Add Facebook App ID Seciton in here

DO NOT modify your MainApplication.java file

peterleilei86 commented 5 years ago

This is what I have been through for the last three days to get this library to work. The current set up instruction in the README is very confusing and some parts are even wrong. So I decide to share the steps that got my project up and running. Hope this can help people who are struggling too.

webtaculars commented 5 years ago

This worked like a charm. Thanks @peterdev6

smooJitter commented 5 years ago

@peterdev6 I know it might sound like a lot to ask but one problem I've noticed elsewhere and in the above description is an assumption that instruction such as "Install FBSDK frameworks" is understood. Well it isn't. On the Facebook site, for example, "Open Xcode's "Build Settings" tab in your project and add the Facebook SDK folder's path to "Framework Search Paths" setting." Is even more vagueness.

It is always a pain in the ass installing this library and each time, it's a different set of headaches.

palPrabhakar commented 5 years ago

I am using react native 0.59.3 without cocoapods and I followed these steps to setup the SDK.

React Native 0.59.3 Xcode 10.3

Goto : https://github.com/facebook/react-native-fbsdk

Step 1: yarn add react-native-fbsdk

Step 2: react-native link react-native-fbsdk

Open Your project in Xcode

Check Under Libraries directory that RCTFBSDK.xcodeproj exist

Check Under RCTFBSDK.xcodeproj Frameworks directory check list of frameworks linked during the linking step

Goto: https://github.com/facebook/facebook-objc-sdk/releases

Download (this one worked for me) Facebook SDK v5.2.1 . => FacebookSDK_Static.zip

Open your application's Xcode project.
If you don't have a Frameworks group in your project, create one by right-clicking on your project in Xcode's Project Navigator and selecting New Group.
Open the unzipped SDK folder (~/Documents/FacebookSDK).
Drag the FBSDKCoreKit FBSDKLoginKit and FBSDKShareKit framework files to your project's Frameworks group.
In the dialog that appears, keep the Copy items if needed option selected, and click Finish
Go to build Settings , under framework search path add ~/Documents/FacebookSDK

https://developers.facebook.com/docs/ios/getting-started#settings

Follow the following steps:

Step 1: Configure Facebook App Settings for iOS

Step 3: Configure Info.plist

Step 4: Connect App Delegate

At this the project should build or else good luck to you.

smooJitter commented 5 years ago

@palPrabhakar which download did you unzip into the FacebookSDK folder

palPrabhakar commented 5 years ago

@palPrabhakar which download did you unzip into the FacebookSDK folder

Dragged and copied these kits FBSDKCoreKit FBSDKLoginKit and FBSDKShareKit framework in the xcode framework group and ~/Documents/FacebookSDK directory

smooJitter commented 5 years ago

Hey man, I should ghave been more specific. You mention two down loads, Which of these did you unpack.

Download (this one worked for me) Facebook SDK v5.2.1

Download FacebookSDK_Static.zip

palPrabhakar commented 5 years ago

Hey man, I should ghave been more specific. You mention two down loads, Which of these did you unpack.

Download (this one worked for me) Facebook SDK v5.2.1

Download FacebookSDK_Static.zip

If you go to this https://github.com/facebook/facebook-objc-sdk/releases under Facebook SDK v5.2.1 there are 10 assets listed among those download the FacebookSDK_Static.zip (34.3 MB)

mjmasn commented 5 years ago

With v1+ of this library and RN 0.60+ the Add in your android/settings.gradle file step is not required for Android due to auto-linking.

jordangrant commented 5 years ago

Lucky :/ can't get it working on RN 60.4

BrunoLagoa commented 5 years ago

Hi, I can't use the app after running the link

error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening reactFacebook.xcodeproj

BrunoLagoa commented 5 years ago

@palPrabhakar hi, I saw that demonstrates how it works in React Native 0.59. Can you tell me if it still works out there? when you installed react-native-fbsdk, did you link or did it all manual? I still can't make it run.

jordangrant commented 5 years ago

[iOS] If anyone is having trouble setting it up on React Native 60+ I did after many hours with these modifications to this article: https://medium.com/@mystaats/oh-my-godddddd-finalllllyyyy-thank-youuuuu-5ace130277b5

[Android] DO NOT modify your MainApplication.java file is a major keyyyyy [Android] I got Invariant Violation: requireNativeComponent: ”RCTFBLoginButton“ I changed my ios folder to 'foo' temporarily and ran react-native link react-native-fbsdk to link android only, and it wasn't done properly so that worked. Changed the ios folder name back. major keyyyys

palPrabhakar commented 5 years ago

@palPrabhakar hi, I saw that demonstrates how it works in React Native 0.59. Can you tell me if it still works out there? when you installed react-native-fbsdk, did you link or did it all manual? I still can't make it run.

@BrunoLagoa yes it is still woking, I used react-native link to link the sdk. Can you post the issue you are facing?

janicduplessis commented 5 years ago

Sorry about the confusion and thanks for providing these instructions. I’ll review this and what is in the readme to see what corrections are needed.

Sadly I don’t have access to the instructions on the facebook dev site since I don’t work there so those are out of date and wrong.

I would also highly suggest using the pods method over the manual linking of the sdk libs. RN 0.60 is now using pods by default.

leandrolimasi commented 5 years ago

I followed all steps without any problem and the lib still not working properly only for IOS.

in FBLoginManager.js file I see an issue at this line: const LoginManager = require('react-native').NativeModules.FBLoginManager;

the value of "LoginManager" is always undefined causing problems to login. Is anyone have any idea?

adybuciuman commented 5 years ago

I have same problem as @leandrolimasi . I'm stuck and I cannot upgrade to react-native 0.60.5 because of this issue

leandrolimasi commented 5 years ago

Hey @adybuciuman I solved that issue following these steps:

1- open your App.xcworkspace in Xcode 2- click in your App and select the folder Libraries 3- right-click on Libraries folder and click "Add files to App" 4- select the file RCTFBSDK.xcodeproj from 'node_modules/react-native-fbsdk/ios/' 5- Add libRCTFBSDK.a into your "Linked Frameworks and Libraries"

BrunoLagoa commented 5 years ago

@palPrabhakar error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening reactFacebook.xcodeproj

TypeError: LoginManager.logInWithPermissions is not a function in IOS

When I try the link as I said it also gives error.

adybuciuman commented 5 years ago

@leandrolimasi I finally managed to make it work. The upgrade was failing even doing all the steps. I had to uninstall the react-native-fbsdk and remove all the links to FBDSK from Xcode. And after that start the steps from the beginning. I waste a lot of time for this

@BrunoLagoa I guess that error is when you trye to run react-native run-ios. I have the same problem latley. I didn't fix it yet. At the moment I'm using the Xcode to run the app on simulator/phone

BrunoLagoa commented 5 years ago

@adybuciuman @palPrabhakar Does xcode run smoothly? here too gives error.

adybuciuman commented 5 years ago

@BrunoLagoa the only thing was working for me was first to unlink react-native-fbsdk, then uninstall react-native-fbsdk, go to Xcode and remove everything related to FBSDK. And then try to redo the steps mentioned above. The difference is that I didn't user npm install git+https://github.com/facebook/react-native-fbsdk.git. Instead I used npm install react-native-fbsdk and the "react-native-fbsdk": "^1.0.3" version was installed. And my AppDelegate.m looks like this

/**

Copyright (c) Facebook, Inc. and its affiliates.

This source code is licensed under the MIT license found in the

LICENSE file in the root directory of this source tree. */

import "AppDelegate.h"

import <React/RCTBridge.h>

import <React/RCTBundleURLProvider.h>

import <React/RCTRootView.h>

import <ReactNativeNavigation/ReactNativeNavigation.h>

import

import <FBSDKCoreKit/FBSDKCoreKit.h>

import <React/RCTLinkingManager.h>

import <FBSDKCoreKit/FBSDKCoreKit.h>

@implementation AppDelegate

(BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions { [FIRApp configure];

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

NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];

return YES; }

(NSURL )sourceURLForBridge:(RCTBridge )bridge {

if DEBUG

return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

else

return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

endif

}

(BOOL)application:(UIApplication )application openURL:(NSURL )url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {

BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application openURL:url sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey] annotation:options[UIApplicationOpenURLOptionsAnnotationKey] ]; // Add any custom logic here. return handled; }

@end

and I have this libraries versions:

"react": "16.6.3", "react-native": "^0.60.5", "react-native-fbsdk": "^1.0.3",

adybuciuman commented 5 years ago

@adybuciuman @palPrabhakar Does xcode run smoothly? here too gives error.

yes. if is Xcode doesn't run smoothly I think you cannot run the project at all. try to fix the errors from Xcode

nibinb commented 4 years ago

Seems its working now. Thanks alot @peterdev6 . I cleaned the project and after that ran below command then reopened xcode. rm -rf ~/Library/Developer/Xcode/DerivedData

suraneti commented 4 years ago

My instruction for React Native 0.59.9 with cocoapods.

React Native: 0.59.9 react-native-fbsdk: 0.10.0 *(Important you cannot use >= 1.0.0 for RN <= 0.59) Xcode: 10.3

I'm using yarn

iOS

Step 1: yarn add react-native-fbsdk@0.10.0

Step 2: react-native link react-native-fbsdk

Step 3: cd ios && pod install

Step 4: Open your .xcworkspace in Xcode

Step 5: Check Under Libraries directory.

Step 6: Right-click and select Added Files to <project_name>... and added RCTFBSDK.xcodeproj from node_modules/react-native-fbsdk/ios (You need to check Copy items if needed)

Done !

Android

Please following this instruction for react-native-fbsdk: 0.10.0 setup. https://github.com/facebook/react-native-fbsdk/issues/429#issuecomment-508993185

drinikol commented 4 years ago

@peterleilei86

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
  - react-native-fbsdk (to unlink run: "react-native unlink react-native-fbsdk")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md

will this really prompt?

alexxsanchezm commented 4 years ago

Hello, for those who have jump into RN 0.61.2 and struggling with RNFBSDK, I was having this error: 'React/RCTBridgeModule.h' file not found and follow the documentation but no success. The reason it didn't work at first is because I still had old configuration settings from < 0.60. So I did 2 things:
1- I remove ~/Documents/FacebookSDK from frameworks search path. 2- I remove the old libRCTFBSDK.a from Link Binaries with Libraries.

After that I received another errors but not related to FBSDK. So my advice if you are updating to Post RN 0.60 is to make sure to remove the old configuration from the previous versions. Hope this help.

giacomette commented 3 years ago

I solved #import <FBSDKCoreKit/FBSDKCoreKit.h> in AppDelegate.m

facebookarchive / react-native-fbsdk