React Native Facebook Login using official fbsdk

Question

I tried following the starter tutorial by setting up a new React Native Project for iOS. But the loginbutton doesn't seem to be working. Any help is appreciated.

Here's the index.ios.js:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

const FBSDK = require('react-native-fbsdk');
const {
  LoginButton
} = FBSDK;

var Login = React.createClass({
  render: function() {
    return (
      <View>
        <LoginButton
          publishPermissions={["publish_actions"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("login has error: " + result.error);
              } else if (result.isCancelled) {
                alert("login is cancelled.");
              } else {
                alert("login has finished with permissions: " + result.grantedPermissions)
              }
            }
          }
          onLogoutFinished={() => alert("logout.")}/>
      </View>
    );
  }
});

class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
          Login to Facebook
        </Text>
        <Login />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  shareText: {
    fontSize: 20,
    margin: 10,
  }
});

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

And the screenshot of the emulator:

Functionality: clicking on the button doesn't do anything. Could the deprecation warning have something to do with it? — philoniare, May 14 '16 at 21:41

score 6 · Accepted Answer · answered Jun 06 '16 at 22:19

6

You need to link the sdk's iOS project in your app's project.

If you're using react-native-sdk v0.2.0+, rnpm will take care of this step and you can follow the tips here to complete set up.

If you're using the older version, you need to link react-native-fbsdkxxx.xcodeproj in YourApp.xcodeproj. Follow the manual linking steps in https://facebook.github.io/react-native/docs/linking-libraries-ios.html

answered Jun 06 '16 at 22:19

dzhuowen

172
4

I see, thanks. I'll try it out later. Just curious, how come Android works fine without loading a library manually like iOS? – philoniare Jun 07 '16 at 10:45
1

Because the Android project uses gradle. It pulls the library from server and setup things for you automatically. – dzhuowen Jun 07 '16 at 20:54
I have recived confirmation: ```rnpm-install info Android module react-native-fbsdk is already linked rnpm-install info iOS module react-native-fbsdk is already linked``` yet Still a red box ?? – jasan Mar 12 '17 at 10:43

React Native Facebook Login using official fbsdk

1 Answers1

Linked