NativeScript : Facebook SDK

NativeScript plugin, wrapper of native Facebook SDK for Android and iOS.

• Features
• Installation
• Configuration
  • Android
  • iOS
• NativeScript Core
  • Initialization
  • Login
    • Facebook Login Button
    • Custom Login Button
• NativeScript + Angular
  • Initialization
  • Login
    • Facebook Login Button
    • Custom Login Button
• Login Response
• License

Features

• Login
• Share
• Graph API

Installation

tns plugin add nativescript-facebook

Configuration

Android

No additional configuration required!

iOS

Update Info.plist file (app/App_Resources/iOS/Info.plist) to contains CFBundleURLTypes like below:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    
    ...

        <key>CFBundleURLTypes</key>
        <array>
            <dict>
                <key>CFBundleURLSchemes</key>
                <array>
                    <string>fb{facebook_app_id}</string>
                </array>
            </dict>
        </array>

    </dict>
</plist>

Make sure you replaced {facebook_app_id} with your Facebook App Id. More info regarding how to obtain a Facebook App Id can be found here.

NativeScript Core

Initialization

Call init of nativescript-facebook module on application launch.

app.ts

import * as application from 'application';
var nsFacebook = require('nativescript-facebook');

application.on(application.launchEvent, function (args) {
    nsFacebook.init("{facebook_app_id}");
});

application.start({ moduleName: "main-page" });

Login

Facebook Login Button

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:Facebook="nativescript-facebook"
  loaded="pageLoaded" class="page">

    ...

    <Facebook:LoginButton onLogin="{{ onLogin }}"></Facebook:LoginButton>

    ...

</Page> 

main-view-model.ts

import { Observable } from 'data/observable';
let Facebook = require('nativescript-facebook');

export class HelloWorldModel extends Observable {

  public onLogin(error, data) {
    console.log("Success!");
  }

}

Custom Login Button

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:Facebook="nativescript-facebook"
  loaded="pageLoaded" class="page">

    ...

    <Button tap="{{ testAction }}" text="Custom Login Button"></Button>

    ...

</Page> 

main-view-model.ts

import { Observable } from 'data/observable';
let Facebook = require('nativescript-facebook');

export class HelloWorldModel extends Observable {

  public testAction() {
    Facebook.login((error, data) => {
      console.log("Success!");
    });
  }

}

NativeScript + Angular

Initialization

Call init of nativescript-facebook module on application launch.

main.ts

import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import * as application from 'application';
var nsFacebook = require('nativescript-facebook');

import { AppModule } from "./app.module";

application.on(application.launchEvent, function (args) {
    nsFacebook.init("{facebook_app_id}");
});

platformNativeScriptDynamic().bootstrapModule(AppModule);

Login

Facebook Login Button

app.component.html

<StackLayout>
    <FacebookLoginButton [onLogin]="onLogin"></FacebookLoginButton>
</StackLayout>

app.component.ts

import { Component } from "@angular/core";
import { LoginResponse } from "nativescript-facebook";

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})
export class AppComponent { 
    onLogin = function (error: string, loginResponse : LoginResponse) {
        console.log("TOKEN: " + loginResponse.token);
    }
}

Custom Login Button

app.component.html

<StackLayout>
    <Button text="Custom Login Button" (tap)="testAction()"></Button>
</StackLayout>

app.component.ts

import { Component } from "@angular/core";
import { LoginResponse } from "nativescript-facebook";

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})
export class AppComponent { 
    testAction = function () {
        Facebook.login((error, data) => {
            console.log("Success!");
        });
    }
}

Login Response

The callback that have to be provided to Facebook.login method receives 2 arguments: error and login response object. Login response object has the following structure:

Property	Description
userId	user Id of the logged in user
token	access token which will be used for further authentications

License

Apache 2.0