React-native-fbsdk: Struggling with the initial setup & configuration

[yelled3]

@philikon @cphackm

I just see you update the readme and added:

Add the `RCTFBSDK...` Xcode projects from `node_modules/react-native-sdk...` to your app's Xcode project.

https://github.com/facebook/react-native-fbsdk/commit/cc809254d6476f4d26944a2c45807c0c13c2ce3c

I still wasn't able to make it work. (same as before 'Warning: Native component for "RCTFBSDKLoginButton" does not exist')
see https://github.com/facebook/react-native-fbsdk/issues/5#issuecomment-134148365

It would be very helpful if you added a step by step guide to the install section.
https://github.com/facebook/react-native-fbsdk#installation

few things the confused me (although I tried all the combinations)

Add the SDK to your Xcode Project

in the README.md it says:
The Xcode projects assume that it's installed in the standard location at ~/Documents/FacebookSDK

but in the FB developers guide it says:
Drag the FBSDKCoreKit.framework to Frameworks in Project Navigator. Create a new group Frameworks if it does not exist. in https://developers.facebook.com/docs/ios/getting-started#addSDK

to add to the confusion, we you do:
Add RCTFBSDKCore.xcodeproj from node_modules/react-native-fbsdkcore to your Xcode project navigator.
the added files already contain a ref to .framework file

Pods

it's not clear if I can use the SDK pods altogether or if the setup is different.

[tnguyen42]

+1

Just in case... I dragged the frameworks in, the xcodeproj in, and I put saved the Facebook SDK files in ~Documents/FacebookSDK. But even with that, I still can't make it to work.

[yelled3]

@tnguyen42
after reading:
https://github.com/magus/react-native-facebook-login#setup
and
http://facebook.github.io/react-native/docs/linking-libraries-ios.html#here-the-few-steps-to-link-your-libraries-that-contain-native-code

I was able to make it work.
the missing part was part 2:
http://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2

[yelled3]

I'm still unsure how to add the whole SDK to the project, instead of linking it from ~Documents/FacebookSDK - which seems plain WRONG.

it should either be from a Pod or from the node_modules dir as well - the way react-native-facebook-login are doing it:
https://github.com/magus/react-native-facebook-login#adding-the-facebook-sdk

[MossP]

I must be missing something.. where is the node_modules/react-native-sdk... folder and where are the Xcode projects linked to this? I can see three folders in my node_folders module react-native-fbsdkcore, react-native-fbsdklogin and react-native-fbsdkshare but no projects inside?

Quote:

Add the `RCTFBSDK...` Xcode projects from `node_modules/react-native-sdk...` to your app's Xcode project.

[yelled3]

@MossP

each sub repo has it's own README.md, e.g react-native-fbsdklogin

https://github.com/facebook/react-native-fbsdk/tree/master/react-native-fbsdklogin#installation

Add RCTFBSDKLogin.xcodeproj from node_modules/react-native-fbsdklogin to your Xcode project navigator.

[MossP]

I think my installation must be trashed then, there're no Xcode projects in mine.. I'll start again and see how I get on, thanks :)

[tnguyen42]

Thanks @yelled3, that unlocked the situation for me.
But now I have another new error I've never seen before. I'll open a new issue for that.

[philikon]

it's not clear if I can use the SDK pods altogether or if the setup is different.

I added podspecs to react-native-fbsdk the other day. 0.0.5 will have support for using CocoaPods which will make things a lot simpler for some folks.

[yelled3]

@philikon that will be awesome, thanks

[philikon]

I just released 0.0.5 with the podspecs and updated READMEs. Hope that helps!

[philikon]

I was able to make it work.
the missing part was part 2:
http://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2

That's good feedback. I'll update the README to include a link to this document.

[philikon]

Fixed in 13c1355bb4f8265af25c839541b2253b198345d3

[yelled3]

@philikon

I just released 0.0.5 with the podspecs and updated READMEs. Hope that helps!

there's still some confusion here;
when installing the pod you have to to do npm install --save react-native-fbsdklogin before you do pod install.
if you don't, you'll get:

[!] No podspec found for `react-native-fbsdkcore` in `node_modules/react-native-fbsdklogin`

[yelled3]

@philikon also wanted to ask - why do I need to specify
source 'https://github.com/CocoaPods/Specs.git' in my Podfile?

[philikon]

there's still some confusion here;
when installing the pod you have to to do npm install --save react-native-fbsdklogin before you do pod install.

Correct. That's why the README file mentions those steps in _that_ order and even explicitly says:

Note: Any of the options below assume you've already installed the npm packages as mentioned above.

See https://github.com/facebook/react-native-fbsdk/blame/0.0.5/README.md#L182. Was there anything unclear in those instructions?

@philikon also wanted to ask - why do I need to specify
source 'https://github.com/CocoaPods/Specs.git' in my Podfile?

So that CocoaPods knows where to download the Facebook SDK for iOS source code from.

[MossP]

For the guys that have now got it all working; are you able to archive the project via Xcode?

[MossP]

@yelled3 Can you archive the project? I've tried on a new project with just this installed and it fails even though building for devices works fine.

[yelled3]

@MossP haven't tried yet - I'll let you know.
what's the exception you're getting? (copy-paste the stack trace)

[MossP]

cheers @yelled3. The error I'm getting is RCTBridgeModule.h not found. I've raised an issue for it here https://github.com/facebook/react-native-fbsdk/issues/21

Any chance you could hit the archive button and let me know if yours completes successfully?

[yelled3]

@MossP sorry for the delay, I'm also getting the same issue

.../node_modules/react-native-fbsdkcore/iOS/RCTFBSDKGraphRequestManager.h:19:9: 'RCTBridgeModule.h' file not found

@philikon any idea why this happens?

[yelled3]

@MossP for what it's worth, although Archive didn't work - I was able to run the app on my own phone.

[MossP]

No worries, @yelled3. I get the same thing. I can push a build of the app to my test devices but can't successfully archive for the app store. I think it's something to do with the framework linking but I've followed everything to the letter several times and also on a clean project to eliminate the possibility of it being anything else. I've had to remove it from my project now for that reason. I'll let you know if I have any luck. Let me know if you find anything. Hopefully @philikon can shed some light on the issue.

[MossP]

I have a new issue already already raised for it https://github.com/facebook/react-native-fbsdk/issues/21 but got tumbleweed so far on it.

[krishpop]

I've been struggling with setting up the frameworks for this for the entire day. I get the following errors when I try to build the application. I have successfully added the frameworks from the Facebook SDK, but in doing so, I get the following errors:

ld: 154 duplicate symbols for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Any clue as to what the problem is

[chrisp-fb]

@krishpop can you include more of the error message such as the symbol that is duplicated? As a wild guess, if it's "__llvm" and you're using Xcode 6.x, this is caused by the inclusion of bitcode in the libraries which is not compatible with Xcode 6. You should update to Xcode 7.

[krishpop]

@chrisp-fb that worked, thanks!

[shangsunset]

Hi @chrisp-fb,

Im on xcode 7 but still get similar errors after pod install.

Ld /Users/shangyeshen/Library/Developer/Xcode/DerivedData/Cairn-dhzzdiyaeawbyxflutcoooilxvie/Build/Products/Debug-iphonesimulator/Cairn.app/Cairn normal x86_64
    cd /Users/shangyeshen/Sites/Cairn/ios
    export IPHONEOS_DEPLOYMENT_TARGET=7.0
    export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
    /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/clang -arch x86_64 -isysroot /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator9.2.sdk -L/Users/shangyeshen/Library/Developer/Xcode/DerivedData/Cairn-dhzzdiyaeawbyxflutcoooilxvie/Build/Products/Debug-iphonesimulator -F/Users/shangyeshen/Library/Developer/Xcode/DerivedData/Cairn-dhzzdiyaeawbyxflutcoooilxvie/Build/Products/Debug-iphonesimulator -filelist /Users/shangyeshen/Library/Developer/Xcode/DerivedData/Cairn-dhzzdiyaeawbyxflutcoooilxvie/Build/Intermediates/Cairn.build/Debug-iphonesimulator/Cairn.build/Objects-normal/x86_64/Cairn.LinkFileList -Xlinker -rpath -Xlinker @executable_path/Frameworks -mios-simulator-version-min=7.0 -Xlinker -objc_abi_version -Xlinker 2 -ObjC -fobjc-arc -fobjc-link-runtime -lPods -Xlinker -dependency_info -Xlinker /Users/shangyeshen/Library/Developer/Xcode/DerivedData/Cairn-dhzzdiyaeawbyxflutcoooilxvie/Build/Intermediates/Cairn.build/Debug-iphonesimulator/Cairn.build/Objects-normal/x86_64/Cairn_dependency_info.dat -o /Users/shangyeshen/Library/Developer/Xcode/DerivedData/Cairn-dhzzdiyaeawbyxflutcoooilxvie/Build/Products/Debug-iphonesimulator/Cairn.app/Cairn

Undefined symbols for architecture x86_64:
  "_OBJC_CLASS_$_RCTRootView", referenced from:
      objc-class-ref in AppDelegate.o
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

[shangsunset]

my bad. forgot about this step:

go to Xcode's target Build Setting section, find Other linker flags and add $(inherited) in it.