React Native Facebook Account Kit
A Facebook Account Kit SDK wrapper for react-native.
Supported versions - React Native / Facebook Account Kit
The table below shows the supported versions of React Native and the different versions of react-native-facebook-account-kit
.
RN Facebook Account Kit | 0.4.x | 0.6.x | 0.10.x | 1.x.x | 2.x.x |
---|---|---|---|---|---|
React Native | 0.24 | <0.48 | 0.48-56 | >=0.57.x | >=0.60.x |
Installation
For RN < 0.40.0 Check the Troubleshooting Guide
For RN < 0.60.x Follow the installation steps described in this document
yarn add react-native-facebook-account-kitcd ios && pod install && cd ..
Linking
Not necessary 🎉 Check out the RN 0.60 release blog post
Configuration
Obtaining secret and token to configure the library
First of all you must obtain an Account App Id and an Account Kit Client Token. To obtain them you must create a Facebook application using facebook developer's website.
In the part 1 of the following blog post series you will find detailed steps about how to create and configura a Facebook Account Kit application:
- Passwordless Authentication in React Native Using Facebook Account Kit (Part 1)
- Passwordless Authentication in React Native Using Facebook Account Kit (Part 2)
- Passwordless Authentication in React Native Using Facebook Account Kit (Part 3)
IOS Configuration
Add your Account App Id and an Account Kit Client Token to your project's Info.plist
file
... FacebookAppID {YOUR_FACEBOOK_APP_ID} AccountKitClientToken {YOUR_ACCOUNT_KIT_CLIENT_TOKEN} CFBundleURLTypes CFBundleURLSchemes ak{YOUR_FACEBOOK_APP_ID} ...
Android Configuration
Add your Account App Id and the Account Kit Client Token to the android/app/src/main/res/values/strings.xml
:
...YOUR_FACEBOOK_APP_IDYOUR_ACCOUNT_KIT_CLIENT_TOKEN
Then update set your app metadata by editing the android/app/src/main/AndroidManifest.xml
file:
... ... ......
- If you want AccountKit to prefill your phone number add the
READ_PHONE_STATE
permission to theandroid/app/src/main/AndroidManifest.xml
file:
... ... ...
-
(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
- 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>- In your
AndroidManifest.xml
add the following to exclude backup of Account Kit's Access Token.
<application//other configurations hereandroid:fullBackupContent="@xml/backup_config" // add this line> - Create a file
Usage
If you have issues with the method signatures you may be using an older version. Check the Releases Notes for breaking changes
// Configures the SDK with some optionsRNAccountKit // Shows the Facebook Account Kit view for login via SMSRNAccountKit // Shows the Facebook Account Kit view for login via emailRNAccountKit // Logouts the user, so getCurrentAccessToken() will retrieve nullRNAccountKit // Retrieves the logged user access token, if any user is loggedRNAccountKit // Retrieves the logged user account info, if any user is loggedRNAccountKit
@MahbbRah put together a video tutorial of how to integrate the library you might find useful.
Examples
Try the examples. They are related to different React Native versions.
git clone https://github.com/underscopeio/react-native-facebook-account-kitcd react-native-facebook-account-kit/examples/RN0XXyarnreact-native run-iosreact-native run-android
Themes
iOS
RNAccountKit
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
Android
Check this commit to see how it's done in our sample app
- In your application styles.xml file (usually located in android/app/src/main/res/values folder) create a Theme with the following schema
#f4bf56 @android:color/white #44566b #ed9d00 ?attr/com_accountkit_primary_color ?attr/com_accountkit_primary_color
See the full set of customizable fields here
- In your app AndroidManifest.xml file (usually under android/app/src/main folder) set that Theme to the AccountKitActivity
<!-- Set the AccountKitActivity theme -->
Troubleshooting
Missing android.support.v4.content
error: package android.support.v4.content does not existimport android.support.v4.content.ContextCompat;
This is because of the breaking change introduced in react-native 0.60.0 and therefore in our 2.0.0.
In order to fix the issue you should either upgrade to react-native 0.60.0 of use the 1.2.0 of this library
Issue: #196
I have problems running the example
If you have trouble running any example try the following:
-
Move the example out of the repo
-
Remove this package local dependency from
package.json
- "react-native-facebook-account-kit": "file:../.." -
Run
yarn add react-native-facebook-account-kit
-
Re-run
react-native run-android
orreact-native run-ios
A system issue occured, Please try again" when sending SMS
-
Check your
FacebookAppID
andAccountKitClientToken
on iOSInfo.plist
and Androidstrings.xml
are correct -
If you have enabled the client access token flow in fb account kit dashboard, then
responseType
should be set tocode
when callingconfigure
// Configures the SDK with some optionsRNAccountKit
Issue: #68
iOS only: Login screen doesn't show up
In some cases, if you implement the Login button in a presented Modal screen, you need to add viewControllerMode: 'show'
into the configuration.
// Configures the SDK with some optionsRNAccountKit
Issue: #167
I cannot integrate the library with RN versions < 0.40.0
Modify the android/build.gradle
file to override the com.facebook.android:account-kit-sdk
library with com.facebook.android:account-kit-sdk:4.15.0
and the compileSdkVersion
and buildToolsVersion
as depicted below
subprojects { subproject -> afterEvaluate{ dependencies { compile ('com.facebook.android:account-kit-sdk:4.15.0'){ force = true exclude group: 'com.parse.bolts', module: 'bolts-android'; exclude group: 'com.parse.bolts', module: 'bolts-applinks'; exclude group: 'com.parse.bolts', module: 'bolts-tasks'; } } if(subproject.name == 'react-native-facebook-account-kit') { android { compileSdkVersion 23 buildToolsVersion "23.0.3" } } }}
License
License is MIT