• Home
  • MAD
    • IOS Series
    • Android Series
    • Flutter Series
    • Xamarin Series
  • Concept Series
    • Software Design
    • Software Arch
    • GIT & Github
    • System Design
    • Cloud
    • Database Integration
    • Push Notification
    • API Integration
    • Cocoa PODS
  • DSA
  • Interview
  • Tips&Tricks
  • YT
  • Home
  • MAD
    • IOS Series
    • Android Series
    • Flutter Series
    • Xamarin Series
  • Concept Series
    • Software Design
    • Software Arch
    • GIT & Github
    • System Design
    • Cloud
    • Database Integration
    • Push Notification
    • API Integration
    • Cocoa PODS
  • DSA
  • Interview
  • Tips&Tricks
  • YT
  • #News
  • #APPS
  • #Events
    • #WWDC
    • #I/O
    • #Ignite
  • #Let’s Talk

MyCodeTips mycodetips-newlogocopy1

  • Home
  • MAD
    • IOS Series
    • Android Series
    • Flutter Series
    • Xamarin Series
  • Concept Series
    • Software Design
    • Software Arch
    • GIT & Github
    • System Design
    • Cloud
    • Database Integration
    • Push Notification
    • API Integration
    • Cocoa PODS
  • DSA
  • Interview
  • Tips&Tricks
  • YT
IOS, Javascript, Programming

Facebook Integration using Reactive Native IOS APP !

This article we will show you how to create Facebook Login using React-Native that will work for both iOS and Android Platform.
Creating new React Native project
To create a new React Native project, just open your Terminal/iTerm app and run the following command.
$ ~ mkdir ReactNativeApp$ ~ cd ReactNativeApp$ ReactNativeApp react-native init DemoFBLoginBefore integrating with Facebook to React app, we have to first create a Facebook app on Facebook developer console.
Clic on Create App and enter the display name which will be displayed publicly to user. It is recommended to provide the contact email. While authenticating, if users has any questions they may contact you on this email.
11
Once the App is created it will display the Product Setup page.
22
Let’s click on Get Started with Facebook Login. First let’s start with iOS platform, so select iOS and download the SDK and unzip the archive to ~/Documents/FacebookSDK. .
33
Now,Install and link the Facebook SDK for React Native packages and dependencies in terminal and start npm server.
$ cd DemoFBLogin$ DemoFBLogin react-native install react-native-fbsdk$ DemoFBLogin react-native link react-native-fbsdk$ DemoFBLogin npm start
Open the ios project form the DemoFBLogin/ios folder and drag and drop the FBSDKLoginKit.framework, FBSDKShareKit.framework, Bots.framework, FBSDKCoreKit.framework inside your project.
44
And make sure you have checked copy items if needed and click on Finish
55
Now go to Link Binary With Libraries and check all this FBSDKs are linked properly.
66
Let’s also set the Framework Search Path of the FBSDK which we downloaded and unzip the archive to ~/Documents/FacebookSDK
77
Go back to the developer.facebook.com where we created App prior and Add your Bundle Identifier
88
Enable single sign on, and Configure your info.plist follow the step by step instruction provide in developer.facebook.com.
99
Connect App Delegate , Open your Xcode project go to AppDelegate.m and import and paste the following code inside didFinishLaunchingWithOptions

[[FBSDKApplicationDelegate sharedInstance] application:application
didFinishLaunchingWithOptions:launchOptions];
Declare OpenUrl:sourceApplicaiton:annotation method below didFinishLaunchingWithOptions
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application
openURL:url
sourceApplication:sourceApplication
annotation:annotation
];
// Add any custom logic here.
return handled;
}

 

In case if you find any error as show below

That is because we need to do npm install in our react-native project folder, open your terminal and navigate to your project folder and type npm install or npm i after installation clean (⇧⌘K) and build (⌘B) that error will go.
Now open the react-native project with VS Code IDE, directly by opening folder via VC Code or open your terminal and navigate to your project folder and code. Go to Debug editor(⇧⌘D) and Add Configuration by adding iOS platform.
Open index.ios.js import FBSDK, { LoginManager } from ‘react-native-fbsdk’ and create a function called _fbAuth i start with _ to signify that it’s a private method inside this function call logInWithReadPermissions form FB loginManage and handled the success and cancel state snippet looks something like

_fbAuth() {
LoginManager.logInWithReadPermissions(['public_profile']).then(
function(result) {
if (result.isCancelled) {
alert('Login cancelled');
} else {
alert('Login success with permissions: ' +
result.grantedPermissions.toString());
}
},
function(error) {
alert('Login fail with error: ' + error);
}
);

}

Remove all the code inside render() function except container view and create button by with saying Login Via Facebook, Later let’s assign the _fbAuth function for button. we do this by onPress in your opening tag of and supplying the function {this._fbAuth}. Over all code will look something like this:

 

 

import React, {
Component
} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
import FBSDK, {
LoginManager
} from 'react-native-fbsdk'

export default class DemoFBLogin extends Component {

_fbAuth() {
LoginManager.logInWithReadPermissions(['public_profile']).then(
function(result) {
if (result.isCancelled) {
alert('Login cancelled');
} else {
alert('Login success with permissions: ' +
result.grantedPermissions.toString());
}
},
function(error) {
alert('Login fail with error: ' + error);
}
);

}
render() {
return (


Login Via FaceBook


);
}
}

 

Liked it? Take a second to support Ranjan on Patreon!
become a patron button
  • Click to share on Reddit (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • More
  • Click to share on Pocket (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
Written by Ranjan - 1248 Views
AUTHOR
Ranjan

Namaste, My name is Ranjan, I am a graduate from NIT Rourkela. This website is basically about of what i learnt from my years of experience as a software engineer on software development specifically on mobile application development, design patterns/architectures, its changing scenarios, security, troubleshooting, tools, tips&tricks and many more.

Next Post
Previous Post

Support us

mycodetips
mycodetips

Follow us @ LinkedIn 2850+

Subscribe for updates

Join 8,213 other subscribers

Latest Posts

  • YT-Featured-solidprinciples
    SOLID Principles of Software Design
  • IOS 16 Features
    Latest features in IOS 16
  • r-language
    How can R language be used for data analysis?
  • wordpress-coding-blog
    Guide To WordPress Coding Standards
  • YT-Featured-Algorithm
    What is Algorithm?
  • Frameworks of IOS
    Frameworks of IOS – Part ( I )
  • NSFileManager or NSPathUtilities
    NSFileManager or NSPathUtilities in Objective-C
  • Passing data between view controllers in Objective-C
    Passing data between view controllers in Objective-C
  • structures-classes-enum
    Structures and Classes in swift !
  • control-system-swift
    Control Flow in Swift
whiteboard

Whiteboard(PRO)

whiteboard

Whiteboard(lite)

alphabets

Kids Alphabet

techlynk

Techlynk

techbyte

Do2Day

techbyte

Techbyte

  • #about
  • #myapps
  • #contact
  • #privacy
  • #Advertise
  • #myQuestions

Android Android Studio API APP Programming Apps blogging CSS DATABASE dsa Features HTML HTML5 installation Interview Questions IOS iPhone javascript Mac objective-c OS Programming quicktips SDK SEO SQL swift Tips & Tricks Tools UI Web Wordpress Xcode

  • SOLID Principles of Software Design
  • Latest features in IOS 16
  • How can R language be used for data analysis?
  • Guide To WordPress Coding Standards
  • What is Algorithm?

©mycodetips.com