> For the complete documentation index, see [llms.txt](https://saveyourtime.gitbook.io/saveyourtime/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://saveyourtime.gitbook.io/saveyourtime/react-native/react-native-facebook-login.md).

# React Native - Facebook Login

### 1. Install the library

```
yarn add react-native-fbsdk
```

### 2. Link

```
$ cd ios/ && pod install
```

### 3. Configure projects

**3.1 Android**

Before you can run the project, follow the [Getting Started Guide](https://developers.facebook.com/docs/android/getting-started/) for Facebook Android SDK to set up a Facebook app. You can skip the build.gradle changes since that's taken care of by the rnpm link step above, but **make sure** you follow the rest of the steps such as updating `strings.xml` and `AndroidManifest.xml`.

**3.2 iOS**

Follow ***steps 3 and 4*** in the [Getting Started Guide](https://developers.facebook.com/docs/ios/getting-started/?sdk=cocoapods) for Facebook SDK for iOS.

**If you're not using cocoapods already** you can also follow step 1.1 to set it up.

**If you're using React Native's RCTLinkingManager**

The `AppDelegate.m` file can only have one method for `openUrl`. If you're also using `RCTLinkingManager` to handle deep links, you should handle both results in your `openUrl` method.

```
- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  if ([[FBSDKApplicationDelegate sharedInstance] application:app openURL:url options:options]) {
    return YES;
  }

  if ([RCTLinkingManager application:app openURL:url options:options]) {
    return YES;
  }

  return NO;
}
```

#### 配置 info.plist 和專案設定

將 XML 程式碼片段複製並貼上你檔案（\<dict>...\</dict>）的內文中。

```
<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fb{{facebook_app_id}}</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>{{facebook_app_id}}</string>
<key>FacebookDisplayName</key>
<string>{{facebook_display_name}}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>
```

{% hint style="info" %}
Replace `facebook_app_id` and `facebook_display_name`
{% endhint %}

#### 配置 AppDelegate.m 檔案中的 Facebook SDK：

```
#import <FBSDKCoreKit/FBSDKCoreKit.h>

- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];
  return YES;
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {
  return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                         openURL:url
                                               sourceApplication:sourceApplication
                                                      annotation:annotation];
}
```

{% embed url="<https://developers.facebook.com/quickstarts/>" %}

{% embed url="<https://github.com/facebook/react-native-fbsdk>" %}