react-native-fbsdk / Facebook iOS SDK - undefined is not an object (evaluating 'LoginManager.logInWithReadPermissions') - xcode

Question

I am getting an error when trying to use react-native-fbsdk. I assume its some issue with the SDK installation process but I am not sure.
Installation appears to go without error but when trying to use the SDK I am getting this error:
undefined is not an object (evaluating
'LoginManager.logInWithReadPermissions')
Code that is using the SDK:
try {
var result = await LoginManager.logInWithReadPermissions(["public_profile"]);
if (result && result.isCancelled) {
console.log("Login cancelled");
} else {
console.log(
"Login success with permissions: " +
result.grantedPermissions.toString()
);
}
} catch (e) {
console.error(e.message);
}
Installation instructions:
npm install react-native-fbsdk
react-native link react-native-fbsdk
cd ios
pod init
// Add "pod 'FacebookSDK'" to pod file
pod install
// Configure Info.plist and AppDelegate.m
The first 2 commands are specified here: https://github.com/facebook/react-native-fbsdk
The rest of the process is specified here: https://developers.facebook.com/docs/ios/getting-started/#settings
Does anyone have any idea what might be going wrong?
Thanks
Environment:
- macOs High Sierra
- XCode (10.1)
- FacebookSDK (4.38.0)
- react (16.6.1)
- react-native (0.57.5)
- react-native-fbsdk (0.8.0)
There is another unresolved question from someone who appears to have the same problem but he did not specify his installation process or package versions.
Facebook SDK react LoginManager.logInWithReadPermissions undefined is not an object

Answer 1

You have to run react-native link react-native-fbsdk, and check in your native project (ios or android) if it is linked successfully, if not, then do it manually.
1. go to Library file under your project, and right click to choose 'Add files to "Your project". and choose react-native-fbsdk =>ios => RCTFBSDK.xcodepro.
2. add libRCTFBSDK.a to your 'Linked Franmework and Libraray'.
It should work, otherwise check your version of the SDK, since the least version has changed something.

Answer 2

Here is my install procedure. it's work.
1. Install react-native-fbsdk
react-native install react-native-fbsdk
2. Install SDK
Add following lines to ios/PodFile and execute pod install
pod 'FBSDKLoginKit'
pod 'FBSDKShareKit'
If no FBSDKShareKit will build failed with: fatal error: 'FBSDKShareKit/FBSDKShareKit.h' file not found
3. Set Info.plist
Add following lines to ios/Project Name/Info.plist (According to https://developers.facebook.com/docs/ios/getting-started/)
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fb369704160457623</string>
</array>
</dict>
</array>
<key>FacebookAppID</key>
<string>Your facebook app id</string>
<key>FacebookDisplayName</key>
<string>Your app name</string>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-share-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
</array>
Replace FacebookAppID, FacebookDisplayName key values to you actually use.
4. Modify AppDelegate.m
According to https://developers.facebook.com/docs/ios/getting-started/.
// AppDelegate.m
#import <FBSDKCoreKit/FBSDKCoreKit.h> // Add this line
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[[FBSDKApplicationDelegate sharedInstance] application:application
didFinishLaunchingWithOptions:launchOptions]; // Add this line
// Add any custom logic here.
return YES;
}
// Add following lines
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application
openURL:url
sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
annotation:options[UIApplicationOpenURLOptionsAnnotationKey]
];
// Add any custom logic here.
return handled;
}
5. Modify App.js
Import LoginManager at header.
Add login() function to call LoginManger.logInWithReadPermissions().
Add component to at render().
App.js as following
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { LoginManager } from "react-native-fbsdk";
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
login() {
LoginManager.logInWithReadPermissions(["public_profile"]).then(
function (result) {
if (result.isCancelled) {
console.log("Login cancelled");
} else {
console.log(
"Login success with permissions: " +
result.grantedPermissions.toString()
);
}
},
function (error) {
console.log("Login fail with error: " + error);
}
);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
<TouchableOpacity onPress={this.login.bind(this)}>
<Text>FBLogin</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
6. Run
react-native run-ios
7. My environment:
React Native Environment Info:
Binaries:
Node: 11.2.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 23.0.3, 24.0.1, 25.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.3, 28.0.2, 28.0.3
System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.1 => 16.6.1
react-native: 0.57.7 => 0.57.7
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
react-native-rename: 2.3.2