How do I set LoginBehaviour when using react-nativ

Question

If I use the LoginButton from react-native-fbsdk the LoginBehaviour seems to be "native" in that the SDK communicates with the installed FB app, sees that I've already granted permissions and just logs me in without showing any dialogs, etc.

When I use the LoginManger.logInWithPublishPermissions() mechanism I'm always taken to the brower and a screen that says I've already given permission to my app. I assume I can change this by setting the login behaviour, but I can't figure out how to do that successfully. Here's what I've tried

import { GraphRequest, GraphRequestManager, LoginManager, LoginBehaviorIOS } from 'react-native-fbsdk';
LoginManager.setLoginBehavior(LoginBehaviorIOS);

//ERROR: Argument 0 (FBSDKLoginBehaviour) of FBLoginManager: must not be null

Then I tried this:

LoginManager.setLoginBehavior('native');

// No error, but still gives me the same behaviour.

When do LoginButton and LoginManager act differently? How do I set the login behaviour when using LoginManager so it works like the LoginButton?

I've added all of the code to the AppDelegate.m file and all other instructions included in the Getting Started Guide: https://developers.facebook.com/docs/ios/getting-started/

Answer 1

I had a similar issue and managed to make it work by setting the login behavior as follows:

LoginManager.setLoginBehavior('NATIVE_ONLY'); 

Facebook documentation is poor even in react-native-fbsdk GitHub repo about the subject :(

EDIT: There is a catch by using natie_only behavior. User must have FB installed at this phone, otherwise the FB SDK fails silently. To address that I decided to launch the WEB_ONLY behavior in case the native_only fails. My example is tested for Android, not iOS yet.

let result;
try {
  LoginManager.setLoginBehavior('NATIVE_ONLY');
  result = await LoginManager.logInWithReadPermissions(['public_profile', 'email']);
} catch (error) {
  LoginManager.setLoginBehavior('WEB_ONLY');
  result = await LoginManager.logInWithReadPermissions(['public_profile', 'email']);
}

EDIT EDIT: I published an article on how to use Facebook SDK in React Native where I mention more stuff (i.e. how to perform graph requests). Check it out if you need more info on the subject.

Answer 2

I had the same confusion. I found the information in the FBSDK source. There is a different list for Andtoid and iOS. I ended up using a cross platform version of @jeevium answer above.

// something like this
LoginManager.setLoginBehavior(Platform.OS === 'ios' ? 'native' : 'NATIVE_ONLY');

/**
 * Indicate how Facebook Login should be attempted on Android.
 */
export type LoginBehaviorAndroid =
    // Attempt login in using the Facebook App, and if that does not work fall back to web dialog auth.
    'native_with_fallback'|
    // Only attempt to login using the Facebook App.
    'native_only'|
    // Only the web dialog auth should be used.
    'web_only';

/**
 * Indicate how Facebook Login should be attempted on iOS.
 */
export type LoginBehaviorIOS =
    // Attempts log in through the native Facebook app.
    // The SDK may still use Safari instead.
    // See details in https://developers.facebook.com/blog/post/2015/10/29/Facebook-Login-iOS9/
    'native' |
    // Attempts log in through the Safari browser.
    'browser' |
    // Attempts log in through the Facebook account currently signed in through Settings.
    'system_account' |
    // Attempts log in through a modal UIWebView pop-up.
    'web';