setup-facebook-login.mo

Owner: Guillaume Renouvin

Prerequisites (~15 min)

• Have Yarn installed (~2 min)

• Have an application created on Facebook and its id (https://developers.facebook.com/apps) (~10 min)

• Have an account added as developer on your application facebook

• Have cocoapods in your project (~5 min)

Context

When I had to install a facebook login on my React Native project, I thought it would be easy and that I would only have to follow the tutorial of the github repo. But, by simply following the tutorial, I found myself with many problems of versions on both iOS and Android.

I hope that thanks to this article which summarizes the tips that I could find online, you will be able to install a facebook login in less than an hour.

Steps (~20 min)

Install react-native-fbsdk package (https://github.com/facebook/react-native-fbsdk): yarn add react-native-fbsdk@0.6.0 (last release 0.6.1 bug on react native link)

iOS (~10 min)

• Link it react-native link react-native-fbsdk

• Add in your podfile the library's dependencies:

     target 'accorlocal' do
       inherit! :search_paths
       pod 'FBSDKCoreKit', '~> 4.25.0'
       pod 'FBSDKShareKit', '~> 4.25.0'
       pod 'FBSDKLoginKit', '~> 4.25.0'
     end

  cd ios && bundle exec pod install --repo-update

• Then follow the documentation -> Fill your app id -> Configure your info.plist -> connect the App Delegate

check: console.log(NativeModules) should show the FacebookLoginManager module on iOS build

Android (~10 min)

• Then follow the documentation -> "If your react-native version is 0.29 or above"

• Go to Facebook developer -> Fill your app id -> And follow "Add Facebook App ID"

• There are versions issues on the nodes_modules. To fix them, add a script in /bin/patch-fb-sdk.sh and add it in your package.json as a post install command:

  #!/bin/sh
  if [[ $CI ]]; then
  sed -i.bak '' 's/@Override//' ./node_modules/react-native-fbsdk/android/src/main/java/com/facebook/reactnative/androidsdk/FBSDKPackage.java
  sed -i.bak '' 's/4\.+/4.22.1/' ./node_modules/react-native-fbsdk/android/build.gradle
  else
  sed -i.bak 's/@Override//' ./node_modules/react-native-fbsdk/android/src/main/java/com/facebook/reactnative/androidsdk/FBSDKPackage.java
  sed -i.bak 's/4\.+/4.22.1/' ./node_modules/react-native-fbsdk/android/build.gradle
  fi

• To debug with android, on you terminal generate a key: keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 and add it to your facebook app -> Key hashings

check 1: console.log(NativeModules) should show the FacebookLoginManager module on Android build check 2: You should be able to log on Facebook on your application on Android on development

Add the Facebook login button

Now, you should be able to add the login button on your app working on both Android and iOS. You just have to import react-native-fbsdk and add your Facebook button

import { TouchableOpacity, Text } from 'react-native';
import { LoginManager } from 'react-native-fbsdk';

class Login extends Component {
  tryFacebookLogin() {
    // Attempt a login using the Facebook login dialog asking for default permissions.
    LoginManager.logInWithReadPermissions(['public_profile', 'email']).then(
      function(result) {
        if (result.isCancelled) {
          alert('Login cancelled');
        } else {
          alert('Login success with permissions: ' + result.grantedPermissions.toString());
        }
      },
      function(error) {
        alert('Login fail with error: ' + error);
      }
    );
  }

  render() {
    return (
      <TouchableOpacity onPress={this.tryFacebookLogin}>
        <Text>Facebook button</Text>
      </TouchableOpacity>
    );
  }
}

You can find more configuration here