# setup-facebook-login.mo

## Owner: [Guillaume Renouvin](http://github.com/GuillaumeRenouvin/)

## 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
  ```

  &#x20;  `cd ios && bundle exec pod install --repo-update`
* Then follow the [documentation](https://developers.facebook.com/quickstarts/?platform=ios) -> Fill your app id -> Configure your info.plist -> connect the App Delegate &#x20;

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

### Android (\~10 min)

* Then follow the [documentation](https://github.com/facebook/react-native-fbsdk#31-android-project) -> "If your react-native version is 0.29 or above"
* Go to [Facebook developer](https://developers.facebook.com/quickstarts/?platform=android) -> 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](https://developers.facebook.com/apps/1806939376263478/settings/) -> `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](https://github.com/facebook/react-native-fbsdk#login)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bamtech.gitbook.io/dev-standards/react-native/setup/setup-facebook-login.mo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.