react-native-fbsdk a try!
GiveThis project is no longer maintained. If you would like to maintain it, please reach out with a pull request.
React Native : Facebook SDK Login Button
<FBLogin />
provides a React Native component wrapping the native Facebook SDK login button and manager.
preview.gif
Note: Demo above includes debug text to confirm login (i.e. user name, email and access token). <FBLogin />
, by default, will only display the native blue ‘Log in with Facebook’ button.
Table of contents
Usage
FBLogin
Provides a React Native component which wraps the Facebook SDK FBSDKLoginButton
.
Defaults
Exhaustive
Login Behavior
You can change the FBSDK login behavior of the button by including the loginBehavior
prop on the FBLogin
component.
FBLoginManager.LoginBehaviors.Native
: This is the default behavior, and indicates logging in through the native Facebook app may be used. The SDK may still use Safari instead.FBLoginManager.LoginBehaviors.Browser
: Attempts log in through the Safari or SFSafariViewController, if available.FBLoginManager.LoginBehaviors.SystemAccount
: Attempts log in through the Facebook account currently signed in through the device Settings.FBLoginManager.LoginBehaviors.Web
: Attempts log in through a modal UIWebView pop up.
FBLoginManager
Wraps features of the native iOS Facebook SDK FBSDKLoginManager
interface.
See example/components/facebook/FBLoginMock.js for an example using only the exposed native methods of the FBLoginManager to recreate the native FBSDKLoginButton
.
Usage
var {FBLoginManager} = require('react-native-facebook-login');
FBLoginManager.setLoginBehavior(FBLoginManager.LoginBehaviors.Web); // defaults to Native
FBLoginManager.loginWithPermissions(["email","user_friends"], function(error, data){
if (!error) {
console.log("Login data: ", data);
} else {
console.log("Error: ", error);
}
})
FBLoginManager.Events
A variety of events are emitted across the React Native bridge back to your javascript components. This means you can take advantage of the RCTDeviceEventEmitter.addListener
method to listen, and create subscribers that will execute, for each action. In fact, this is how the onEvent handlers are implemented for the FBLogin component (see FBLogin.ios.js).
Usage
Setup
Android
Click here for Android setup instructions
iOS
Skip this step if you are using RN >= 0.60
npm install --save react-native-facebook-login
- Run
open node_modules/react-native-facebook-login
- Have your react native xcode project open and drag
RCTFBLogin.xcodeproj
into yourLibraries
group. - Select your main project in the navigator to bring up settings
- Under
Build Phases
expand theLink Binary With Libraries
header - Scroll down and click the
+
to add a library - Find and add
libRCTFBLogin.a
under theWorkspace
group - ⌘+B
Note: If your build fails, you most likely forgot to setup the Facebook SDK
Facebook SDK
Facebook : Quick Start for iOS
Be sure to configure your .plist file. This file is located under the ios/<project-name>
directory of your generated react-native project. It should be in the same folder as your AppDelegate.m
file.
As of iOS 9 you must now explicitly whitelist requests your application makes in the Info.plist
. Be sure to follow the instructions for iOS 9 during the setup process.
- Specifically, you will need to add the following to your
Info.plist
file
Adding the Facebook SDK (RN < 0.60)
SKIP THIS STEP IF YOU ARE USING RN >= 0.60
- Run
open node_modules/react-native-facebook-login/FacebookSDK
- Open your main project in xcode and right click on your project’s name in the left sidebar and select “New Group” and type in “Frameworks”.
- Select all the
.framework
files in the FacebookSDK folder and click drag them into the Frameworks folder/group you just created in xcode or highlight the Frameworks group in left sidebar and go to File > Add files to “yourProjectName” and select the.framework
files. - Select your main project in the navigator to bring up settings
- Under
Build Settings
scroll down toSearch Paths
- Add the following path to your
Framework Search Paths
$(SRCROOT)/../node_modules/react-native-facebook-login/FacebookSDK
AppDelegate.m modifications
- Add the following import statements for FBSDK kits at the top of your
AppDelegate.m
- Modify the application didFinishLaunchingWithOptions method to return FBSDKApplicationDelegate instead of
YES
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// ...
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [[UIViewController alloc] init];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
// return YES;
return [[FBSDKApplicationDelegate sharedInstance] application:application
didFinishLaunchingWithOptions:launchOptions];
}
- Add the following new methods after the application didFinishLaunchingWithOptions method above, before the
@end
.
// Facebook SDK
- (void)applicationDidBecomeActive:(UIApplication *)application {
[FBSDKAppEvents activateApp];
}
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
return [[FBSDKApplicationDelegate sharedInstance] application:application
openURL:url
sourceApplication:sourceApplication
annotation:annotation];
}
Example project
Toy
open example/ios/examples.xcodeproj
See the example project for a working example.
Documentation
TODO
Contributing
Just submit a pull request!
Use the simple toy project under the example directory to verify your changes.
open example/toy.xcodeproj
Contact
todo
- Auth with javascript Api as an exposed method on button
- Clean up duplicate code in login methods
- documentation for FBLogin component props, expected values (FB SDK links), etc.
- expose RCT_EXPORT functions on FBLogin, docs as component method, use ‘refs’ to call – login/logout/getCredentials as methods via FBLogin component ref
- writePermissions parameter for button
Copyright and license
Code and documentation copyright 2015 Noah. Code released under the MIT license.