React Native with Facebook Login

This is done on a Mac and tested with XCode and IOS simulator. I have not gotten around to the Android version yet…

How to create a Facebook login button for React Native app on IOS.

Start by installing react-native via NPM:


npm install -g react-native

Then, change into your projects directory and run the following to create your project:


react-native init babiesdigest_native
cd babiesdigest_native
open ios/babiesdigest_native.xcodeproj

In a browser, open https://developers.facebook.com and select your app – Click “Quickstart” under the products section and note that we will be doing steps 1-6 here

Once XCode is open, click the project in the menu on the left and select General. Set the project identity and the signing team.

Right click project name and click “Add Group”, rename to “Frameworks”

Drag 4 .framework files from FacebookSDK (https://developers.facebook.com) into new “Frameworks” group:

* Bolts.framework
* FBSDKCoreKit.framework
* FBSDKLoginKit.framework
* FBSDKShareKit.framework

Add FacebookSDK directory to search path under project “Build Settings”

In the developers.facebook.com site, add your bundle id from XCode

In Faceobook, enable single sign-on

Copy Facebook’s PList code and paste into XCode

Make AppDelegate.m changes:

For the first block, you must paste the import at the top of the file with the rest of them, and add the
code as follows:

For the second block, add the method below the first method before the @end:

In your terminal, run the bundler app with npm start

Click the run button in XCode to start your simulator, and you should see the app:

Open App.js and import the Facebook classes we’ll use:

Add Button to the list of imports from react-native:

Add a button to the UI in App.js:

Reload the simulator:

Click the login button:

This launches the FB login/confirmation:

Once you login, you get the alert and the stringifyied object in an alert

Leave a Reply

Your email address will not be published. Required fields are marked *