📋
SaveYourTime
  • SaveYourTime - Coding Notes
  • Front-End
    • Next.js - Set up with TypeScript
  • Backend
    • Install MySQL on Ubuntu
    • Setup Certbot with route53 on Ubuntu 20.04
    • Configure a Nginx HTTPS Reverse Proxy
    • TypeORM - How to seed data with typeorm-seeding 🔥
  • React Native
    • React Native - Facebook Login
    • React Native - Adding a new Swift file and a Bridge header
  • Tools
    • ESLint
    • Prettier
  • Amazon Web Services
    • AWS - Deploy Next.js Application to AWS S3
    • AWS - Deploy Nest.js Server to Elastic Beanstalk
    • AWS - Setup AWS CloudFront
    • AWS - Configure HTTPS for CloudFront with GoDaddy Domain
    • AWS - Configure HTTPS for Elastic Beanstalk Environments with GoDaddy Domain
    • AWS - Fix Next.js static site hosted on S3 CloudFront routing fails on page reload
    • AWS - Running Puppeteer on AWS EC2
    • AWS - Running Metabase on AWS Elastic Beanstalk
  • GitHub Actions
    • Github - Deploying a React Next.js App to AWS S3 with Github Actions
    • Github - Deploying a Nest.js App to AWS Elastic Beanstalk (Docker Platform) with Github Actions
    • Github - Deploying a Nest.js App to AWS Elastic Beanstalk (Node.js Platform) with Github Actions
  • Others
    • Using Fastlane to automate beta deployments and releases for your iOS and Android apps
    • NodeBB
Powered by GitBook
On this page
  • 1. Install the library
  • 2. Link
  • 3. Configure projects

Was this helpful?

  1. React Native

React Native - Facebook Login

PreviousTypeORM - How to seed data with typeorm-seeding 🔥NextReact Native - Adding a new Swift file and a Bridge header

Last updated 4 years ago

Was this helpful?

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

Replace facebook_app_id and facebook_display_name

配置 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];
}

Getting Started Guide
Getting Started Guide
https://developers.facebook.com/quickstarts/developers.facebook.com
GitHub - facebookarchive/react-native-fbsdk: A React Native wrapper around the Facebook SDKs for Android and iOS. Provides access to Facebook login, sharing, graph requests, app events etc.GitHub
Logo