React-native-fbsdk: Native component for "RCTFBSDKLoginButton" does not exist

[pranny]

Upon building the project, I get the warning as

2015-11-08 13:26:07.231 [warn][tid:com.facebook.React.JavaScript] 'Warning: Native component for "RCTFBSDKLoginButton" does not exist'

And the login button does not work. It is not even displayed.

I am on node v5.0.0

My installation of react-native-fbsdklogin generated warning below

$ npm install --save react-native-fbsdklogin
[email protected] /Users/developer/workspace/EmergencyMe
├── UNMET PEER DEPENDENCY [email protected]
└── [email protected]

npm WARN EPEERINVALID [email protected] requires a peer of react-native@^v0.13.0 but none was installed.

However, I went ahead and followed the steps mentioned at https://github.com/facebook/react-native-fbsdk/tree/master/react-native-fbsdklogin#installation

My AppDelegate.m based on the information mentioned at https://developers.facebook.com/docs/ios/getting-started#delegate looks like below

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

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



  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"EmergencyMe"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];



  return YES;
}

I have created a Login.js which is exactly the same as https://github.com/facebook/react-native-fbsdk/blob/master/Sample/Login.js . My index.ios.js looks like below

'use strict';

var React = require('react-native');
var Login = require('./Login');

var EmergencyMe = React.createClass({


  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      <Login style={styles.loginContainer}/>
      </View>

    );
  }

});

var styles = StyleSheet.create(require('./styles.js'));

AppRegistry.registerComponent('EmergencyMe', () => EmergencyMe);

What could be going wrong here?

[dzhuowen]

Hi, can you try just adding a login button in index.ios.js using the Login Button? Also make sure you're opening yourApp.xcworkspace not yourApp.xcodeproj.

[pranny]

Tried the index.ios.js with Login Button. It still displays the same warning and the login button still is not visible. Regarding the xcworkspace, I don't have this file in the directory. I only have xcodeproj

[dzhuowen]

Did you posted all your AppDelegate.m file? In section 6 "Connect Application Delegate", it's required to add method as well.

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
  return [[FBSDKApplicationDelegate sharedInstance] application:application
    openURL:url
    sourceApplication:sourceApplication
    annotation:annotation
  ];

Also I would recommend following the CocoaPods installation process.

[pranny]

I created a new project by react-native init and went ahead with the CocoaPods option. This time, I am getting error like

React packager ready.

[2:36:07 AM] <END>   Crawling File System (748ms)
[2:36:07 AM] <START> Building in-memory fs for JavaScript
[2:36:08 AM] <END>   Building in-memory fs for JavaScript (939ms)
[2:36:08 AM] <START> Building Haste Map
Error building DepdendencyGraph:
 Error: Naming collision detected: /Users/pranav/workspace/powerOfBillion/fbLogin/node_modules/react-tools/src/shared/vendor/core/dom/isTextNode.js collides with /Users/pranav/workspace/powerOfBillion/fbLogin/node_modules/react-native/node_modules/react-tools/src/shared/vendor/core/dom/isTextNode.js
    at HasteMap._updateHasteMap (/Users/pranav/workspace/powerOfBillion/fbLogin/node_modules/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/HasteMap.js:123:13)
    at /Users/pranav/workspace/powerOfBillion/fbLogin/node_modules/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/HasteMap.js:95:28
    at tryCallOne (/Users/pranav/workspace/powerOfBillion/fbLogin/node_modules/react-native/node_modules/promise/lib/core.js:37:12)
    at /Users/pranav/workspace/powerOfBillion/fbLogin/node_modules/react-native/node_modules/promise/lib/core.js:103:15
    at flush (/Users/pranav/workspace/powerOfBillion/fbLogin/node_modules/react-native/node_modules/asap/raw.js:50:29)
    at doNTCallback0 (node.js:428:9)
    at process._tickCallback (node.js:357:13)
Process terminated. Press <enter> to close the window

And then nothing happens.

[hironroy]

I encountered 'Warning: Native component for "RCTFBSDKLoginButton" does not exist' after having setup using the iOS Code XCode Project inclusion method. I fixed it by doing the following:

1. Delete references Frameworks/FBSDK*.framework
2. Dragging Libraries/RCTFBSDK*.xcodeproject/Frameworks/* into the Frameworks group
3. Under general project settings > Linked Frameworks and Libraries including libRCTFBSDK*.a

[dzhuowen]

For general case, please followl http://facebook.github.io/react-native/docs/linking-libraries-ios.html to link the RCTFBSDKxxx.xcodeproj with project.