Facebook SDK & custom button Login in react-native 0.60+ not working

Question

i'm trying to implement Facebook login in my React-Native app but for some reason, it's throwing Cannot read property 'logInWithPermissions' of undefined. I'm using React-Native 0.60.4. I've downloaded FacebookSDK 5.3.0 (_Stable framework)

Attempted using Cocoapod but after some research, many people don't suggest using it because it messes up the project.

These are the steps I followed:

1. Downloaded FacebookSDK 5.3.0 (current latest up to 08/15/19)
2. Dropped the FBSDKCoreKit.framework, FBSDKLoginKit.framework and FBSDKShareKit.framework inside a folder as ~/Documents/FacebookSDK.
3. Also dropped those 3 framework files inside my project in XCode in the /Frameworks folder.
4. Just in case, I also added the path ~/Documents/FacebookSDK in the Framework Search Paths under Build Settings.
5. Made a Build on XCode, it's successful.
6. I download react-native-fbsdk from my react-native project. It downloads version 1.0.1.
7. I don't add libRTCFBSDK.a file in the Link binary with Libraries because it throws an error saying the FBSDKShareKit.h isn't found.

This is what I do on my AuthView.js, I add this to a simple bound onPress event in a TouchableOpacity.

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

handleFacebookLogin() {
        LoginManager.logInWithPermissions(['public_profile', 'publish_actions']).then(
            (result) => {
                if (result.isCancelled) {
                    console.log('Login cancelled')
                } else {
                    console.log('Login success with permissions: ' + result.grantedPermissions.toString())
                }
            },
            (error) => {
                console.log('Login fail with error: ' + error)
            }
        )
    }

Now, I notice that inside Facebook's FBLoginManager.js this is the function being called

logInWithPermissions(permissions: Array<string>): Promise<LoginResult> {
    return LoginManager.logInWithPermissions(permissions);
  },

Whenever I hover LoginManager, it says it's undefined. Why would this be undefined? When it's literally a const on top of the file

const LoginManager = require('react-native').NativeModules.FBLoginManager;

Can anyone help me? I've been struggling for 4 days now. I already attempted installing it with cocoapods, no success. Then doing react-native link react-native-fbsdk no success... a lot of people suggested NOT using link but doing it manually.

What else could I try? Thanks.

Answer 1

You must add libRTCFBSDK.a file in the Link binary with Libraries . To fix the 'FBSDKShareKit.h isn't found' issue change ~/Documents/FacebookSDK to $(HOME)/Documents/FacebookSDK