Create-react-native-app: Compatibility with Facebook's SDK

[nchastain]

Description

I am trying to import the Facebook SDK to handle user authentication in my CRNA app, but all of the resources/walkthroughs I've found are reliant upon linking the SDK to an XCode project and an .xcodeproj file, and I'm not sure how to reconcile that with Expo / CRNA.

Expected Behavior

After installing the React Native FBSDK wrapper, I am expecting to see a login button after after bringing in this example Login component.

Observed Behavior

In place of the 'Login with Facebook' button, I see an empty rectangle with a red border. Additionally, these errors appear:

Warning: Native component for "RCTFBLikeView" does not exist
Warning: Native component for "RCTFBLoginButton" does not exist
Warning: Native component for "RCTFBSendButton" does not exist
Warning: Native component for "RCTFBShareButton" does not exist

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-scripts: [email protected]
• npm ls react-native: [email protected]
• npm ls expo: [email protected]
• node -v: v7.0.0
• npm -v: 4.2.0
• yarn --version: 0.21.3
• watchman version: { "version": "4.7.0" }

Also specify:

1. Operating system: macOS Sierra 10.12.5
2. Phone/emulator/simulator & version: Expo

[nchastain]

Closing this issue, as I've found this page of documentation to be helpful. I didn't realize Expo handled Facebook authentication in this way.

[thierryskoda]

Hey @nchastain, did you had any problem with the Facebook login? I made exactly the same thing as the Expo documentation page and every time I call the Expo.Facebook.logInWithReadPermissionsAsync, my app crash and I don't have any error massage.

Thank you for any help!

[nchastain]

@thierryskoda Hey, sorry for the delay on this. I can look into my repo tomorrow for the details of my implementation, but from the brief description of your problem (your app crashing without errors) I'm wondering if perhaps if you are trying to make async call to Facebook synchronous by mistake - which would cause your app to hang. Check out this portion of the docs: Is your call to Facebook inside of an async/await function (or similarly in a promise)? I just pulled this code snippet from the page of docs linked above. Let me know if your problem persists if/when the Facebook call is written like this.

Switch out <APP_ID> for your Facebook App ID.

async function logIn() {
  const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync('<APP_ID>', {
      permissions: ['public_profile'],
    });
  if (type === 'success') {
    // Get the user's name using Facebook's Graph API
    const response = await fetch(
      `https://graph.facebook.com/me?access_token=${token}`);
    Alert.alert(
      'Logged in!',
      `Hi ${(await response.json()).name}!`,
    );
  }
}

[thierryskoda]

Hey @nchastain, no worry!

This is what I have:

export const onSignInFacebook = async () => { try { console.log("Trying to signing with Facebook") const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync(MY_APP_ID, { permissions: ['public_profile', 'email', 'user_friends'], }); console.log("type", type) if (type === 'success') { // Get the user's name using Facebook's Graph API const response = await fetch( `https://graph.facebook.com/me?access_token=${token}`); Alert.alert( 'Logged in!', `Hi ${(await response.json()).name}!`, ); } } catch(e) { console.log("e", e) } }

[sidmitra]

The link to the expo FB document has changed it seems, and is now here:

https://docs.expo.io/versions/latest/sdk/facebook.html

[truca]

I created a package that handles sessions for React Native with Firebase.
https://github.com/truca/RNSession