A Facebook Account Kit SDK wrapper for React Native

• Done!

1. Undo changes in iOS folder (which were made by react-native-link) in order to avoid duplicate compilations

   git checkout ios
   

2. Add RNAccountKit Pod to your Podfile (if you don't have a podfile follow these instructions)

   target 'MyApp' do
     ...
   +  pod 'RNAccountKit', :path => '../node_modules/react-native-facebook-account-kit/ios'
     ...
   end
   

3. Run pod install in your ios folder

1. Open your project with XCode

2. Open with Finder the node_modules/react-native-facebook-account-kit/ios folder

3. Drag and drop AccountKit.framework and AccountKitStrings.bundle from Finder to your project in XCode (IMPORTANT: select the "Copy items if needed" option)

1. In android/app/src/main/res/values/strings.xml

  ...
  <string name="fb_app_id">YOUR_FACEBOOK_APP_ID</string>
  <string name="ak_client_token">YOUR_CLIENT_TOKEN</string>

2. In android/app/src/main/AndroidManifest.xml

  ...
  <application>

      ...
      <meta-data
          android:name="com.facebook.sdk.ApplicationId"
          android:value="@string/fb_app_id" />
      <meta-data
          android:name="com.facebook.accountkit.ApplicationName"
          android:value="@string/app_name" />
      <meta-data
          android:name="com.facebook.accountkit.ClientToken"
          android:value="@string/ak_client_token" />
   </application>
   ...

3. Check the RNAccountKitPackage is registered in your MainApplication.java file. This should be done by react-native link but sometimes it doesn't. You should see something like the following

  @Override
  protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNAccountKitPackage() // <-- the package is registered
      );
  }

This is the minimal required configuration. Take a look to the Account Kit documentation for Android for a more detailed guide.

• A PR including iOS manual linking instructions is welcome

Add your Facebook credentials to your project's Info.plist file

  <plist version="1.0">
    <dict>
      ...
      <key>FacebookAppID</key>
      <string>{your-app-id}</string>
      <key>AccountKitClientToken</key>
      <string>{your-account-kit-client-token}</string>
      <key>CFBundleURLTypes</key>
      <array>
        <dict>
          <key>CFBundleURLSchemes</key>
          <array>
            <string>ak{your-app-id}</string>
          </array>
        </dict>
      </array>
      ...
    </dict>
  </plist>

This is the minimal required configuration. Take a look to the Account Kit documentation for iOS for a more detailed guide.

1. In android/app/src/main/res/values/strings.xml

...
<string name="fb_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="ak_client_token">YOUR_CLIENT_TOKEN</string>

2. In android/app/src/main/AndroidManifest.xml

...
<application>

    ...
    <meta-data
        android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/fb_app_id" />
    <meta-data
        android:name="com.facebook.accountkit.ApplicationName"
        android:value="@string/app_name" />
    <meta-data
        android:name="com.facebook.accountkit.ClientToken"
        android:value="@string/ak_client_token" />
 </application>
 ...

3. Check the RNAccountKitPackage is registered in your MainApplication.java file. This should be done by react-native link but sometimes it doesn't. You should see something like the following

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new RNAccountKitPackage() // <-- the package is registered
    );
}

This is the minimal required configuration. Take a look to the Account Kit documentation for Android for a more detailed guide.

(Optional) Exclude backup for Access Tokens on Android >= 6.0

As per this documentation, Account Kit does not support automated backup (introduced in Android 6.0). The following steps will exclude automated backup

1. Create a file android/app/src/main/res/xml/backup_config.xml that contains the follwoing:

  <?xml version="1.0" encoding="utf-8"?>
  <full-backup-content>
    <exclude domain="sharedpref" path="com.facebook.accountkit.AccessTokenManager.SharedPreferences.xml"/>
  </full-backup-content>

2. In your AndroidManifest.xml add the following to exclude backup of Account Kit's Access Token.

  <application
    //other configurations here
    android:fullBackupContent="@xml/backup_config" // add this line
   >

import RNAccountKit, {
  Color,
  StatusBarStyle,
} from 'react-native-facebook-account-kit'

RNAccountKit.configure({
  ...,
  theme: {
    // Background
    backgroundColor: Color.rgba(0, 120, 0, 0.1),
    backgroundImage: 'background.png',
    // Button
    buttonBackgroundColor: Color.rgba(0, 153, 0, 1.0),
    buttonBorderColor: Color.rgba(0, 255, 0, 1),
    buttonTextColor: Color.rgba(0, 255, 0, 1),
    // Button disabled
    buttonDisabledBackgroundColor: Color.rgba(100, 153, 0, 0.5),
    buttonDisabledBorderColor: Color.rgba(100, 153, 0, 0.5),
    buttonDisabledTextColor: Color.rgba(100, 153, 0, 0.5),
    // Header
    headerBackgroundColor: Color.rgba(0, 153, 0, 1.0),
    headerButtonTextColor: Color.rgba(0, 153, 0, 0.5),
    headerTextColor: Color.rgba(0, 255, 0, 1),
    // Input
    inputBackgroundColor: Color.rgba(0, 255, 0, 1),
    inputBorderColor: Color.hex('#ccc'),
    inputTextColor: Color.hex('#0f0'),
    // Others
    iconColor: Color.rgba(0, 255, 0, 1),
    textColor: Color.hex('#0f0'),
    titleColor: Color.hex('#0f0'),
    // Header
    statusBarStyle: StatusBarStyle.LightContent, // or StatusBarStyle.Default
  }
})

To see the statusBarStyle reflected you must set the UIViewControllerBasedStatusBarAppearance property to true on your app's Info.plist file.
You can do it from XCode

Check this commit to see how it's done in our sample app

1. In your application styles.xml file (usually located in android/app/src/main/res/values folder) create a Theme with the following schema

<style name="LoginThemeYellow" parent="Theme.AccountKit">
    <item name="com_accountkit_primary_color">#f4bf56</item>
    <item name="com_accountkit_primary_text_color">@android:color/white</item>
    <item name="com_accountkit_secondary_text_color">#44566b</item>
    <item name="com_accountkit_status_bar_color">#ed9d00</item>

    <item name="com_accountkit_input_accent_color">?attr/com_accountkit_primary_color</item>
    <item name="com_accountkit_input_border_color">?attr/com_accountkit_primary_color</item>
</style>

See the full set of customizable fields here

2. In your app AndroidManifest.xml file (usually under android/app/src/main folder) set that Theme to the AccountKitActivity

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" <-- Add this line
    ...>

    <!-- Set the AccountKitActivity theme -->
    <activity
      tools:replace="android:theme"
      android:name="com.facebook.accountkit.ui.AccountKitActivity"
      android:theme="@style/LoginThemeYellow" />

</manifest>

If you have trouble running any example try the following:

1. Move the example out of the repo

2. Remove this package local dependency from package.json

   -    "react-native-facebook-account-kit": "file:../.."
   

3. Run npm install --save react-native-facebook-account-kit

4. Re-run react-native run-android or react-native run-ios

A. Check your FacebookAppID and AccountKitClientToken on iOS Info.plist and Android strings.xml are correct

B. If you have enabled the client access token flow in fb account kit dashboard, then responseType should be set to code when calling configure

// Configures the SDK with some options
RNAccountKit.configure({
    responseType: 'code'
    ...
})

Issue: #68