Open peterleilei86 opened 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.
This worked like a charm. Thanks @peterdev6
@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.
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
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.
@palPrabhakar which download did you unzip into the FacebookSDK folder
@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
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
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)
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.
Lucky :/ can't get it working on RN 60.4
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
@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.
[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 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?
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.
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?
I have same problem as @leandrolimasi . I'm stuck and I cannot upgrade to react-native 0.60.5 because of this issue
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"
@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.
@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
@adybuciuman @palPrabhakar Does xcode run smoothly? here too gives error.
@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 @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
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
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
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
@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?
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.
I solved
#import <FBSDKCoreKit/FBSDKCoreKit.h>
in AppDelegate.m
How to set up FBSDK for react native 60+
iOS
Install react-native-fbsdk
Note: command above will autolink react-native-fbsdk, so you need to unlink it by running the following command
Or install by Yarn
Install FBSDK frameworks
Install by Cocoapods
Note: After frameworks are installed, open podfile.lock file in ios folder to see which version is installed.
Download Facebook SDK
Set up in Xcode
[project name].xcworkspace
file in ios folder. NOT[project name].xcodeproj
fileLibraries
and selectAdd Files to [project name]
, go to node_modules folder and selectRCTFBSDK.xcodeproj
file in the ios folder of react-native-fbsdkRCTFBSDK.xcodeproj
, right click frameworks folder and selectAdd Files to RCTFBSDK.xcodeproj
. AddFBSDK[Core, Login, Share]kit.framework
files from~/Documents/FacebookSDK/
Note: make sure all framework files are added inLink Binary with Libraries
section underRCTFBSDK.xcodeproj
Modify Info.plist and AppDelegate.m
Follow step 3 and 4 in here
Issues you may run into
Link Binary with Libraries
for your root project Don't get confused withLink Binary with Libraries
whenRCTFBSDK.xcodeproj
is selected.RCTFBSDK.xcodeproj
Add Files to RCTFBSDK.xcodeproj
React.xcodeproj
innode_modules/react-native/React
RCTComponentEvent.h
under Copy Headers section in Build Phases when selecting React as target.Android
Go to android/build.gradle, add
mavenCentral()
like soGo to android/app/build.gradle, add the following line like so:
Add in your
android/settings.gradle
fileFollow Add Facebook App ID Seciton in here
DO NOT modify your MainApplication.java file