Share on iOS and Android

 API Reference: Share​
Share allows sending a text, image, file or contacts over other apps on the device. Blacklist works for iOS only.
TypeScript code blocks includes example of how to implement, override & add components with theme. Create page with UI-Editor to make your page themeable and then able to implement themeable components programmatically. Once page created with UI-Editor, it generates class under scripts/generated/pages. Extend that class with below typescript classes.
Multiple Sharing
TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import System = require('sf-core/device/system');
import Contacts = require('sf-core/device/contacts');
import File = require("sf-core/io/file");
import Share = require('sf-core/share');
import Image = require('sf-core/ui/image');
​
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
​
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
        this.layout.flexWrap = FlexLayout.FlexWrap.WRAP;
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar } = System.OS === "Android" ? this : this.parentController;
    superOnShow();
    Application.statusBar.visible = true;
    headerBar.visible = true;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
​
    let image = Image.createFromFile("images://smartface.png");
    let file = new File({
        path: 'path to the file'
    });
    
​
    let text = "Hello from Smartface";
    let contact = new Contacts.Contact();
    contact.firstName = "Smartface";
​
    Share.share({ items: [text, file, image, contact], page: this , blacklist: [Share.ios.Twitter, Share.ios.Facebook] });
​
}
​
​
JavaScript
const FlexLayout = require('sf-core/ui/flexlayout');
const Share = require('sf-core/share');
const Image = require('sf-core/ui/image');
const File = require("sf-core/io/file");
const Application = require('sf-core/application');
const extend = require('js-base/core/extend');
const Contacts = require('sf-core/device/contacts');
const Page = require('sf-core/ui/page');
​
var Page1 = extend(Page)(
    function(_super) {
        _super(this, {
            onShow: function(params) {
                Application.statusBar.visible = false;
                this.headerBar.visible = false;
            },
            onLoad: function(params) {
                const page = this;
                let image = Image.createFromFile("path to the image");
                let file = new File({
                    path: "path to the file"
                });
                let text = "Hello from Smartface";
                let contact = new Contacts.Contact();
                contact.firstName = "Smartface";
                
                Share.share({ items: [text, file, image, contact], page, blacklist: [Share.ios.Twitter, Share.ios.Facebook] });
            }
        });
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
    }
);
module.exports = Page1;
Contacts With Multi Type Files
We have recommend to use shareContacts method while sharing just contacts. Because of there are some application which support only a contact file at a time.
File Sharing
TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import System = require('sf-core/device/system');
import Contacts = require('sf-core/device/contacts');
import File = require("sf-core/io/file");
import Share = require('sf-core/share');
import Image = require('sf-core/ui/image');
​
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
​
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
        this.layout.flexWrap = FlexLayout.FlexWrap.WRAP;
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar } = System.OS === "Android" ? this : this.parentController;
    superOnShow();
    Application.statusBar.visible = true;
    headerBar.visible = true;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
​
    let file = new File({
        path: 'path to the file'
    });
​
    Share.shareFile(file, this, []);
}
​
​
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Share = require('sf-core/share');
const File = require('sf-core/io/file');
​
var Page1 = extend(Page)(
    function(_super) {
        _super(this, {
            onShow: function(params) {
                Application.statusBar.visible = false;
                this.headerBar.visible = false;
            }
        });
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
​
        var file = new File({
            path: 'path to the file'
        });
        Share.shareFile(file, this, []);
    }
);
module.exports = Page1;
Image Sharing
TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import System = require('sf-core/device/system');
import Contacts = require('sf-core/device/contacts');
import File = require("sf-core/io/file");
import Share = require('sf-core/share');
import Image = require('sf-core/ui/image');
​
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
​
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
        this.layout.flexWrap = FlexLayout.FlexWrap.WRAP;
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar } = System.OS === "Android" ? this : this.parentController;
    superOnShow();
    Application.statusBar.visible = true;
    headerBar.visible = true;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
​
    let image = Image.createFromFile('images://smartface.png');
    Share.share({ items: [image], page: this, blacklist: [] });
}
​
​
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Share = require('sf-core/share');
const Image = require('sf-core/ui/image');
​
var Page1 = extend(Page)(
    function(_super) {
        _super(this, {
            onShow: function(params) {
                Application.statusBar.visible = false;
                this.headerBar.visible = false;
            }
        });
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
​
        var image = Image.createFromFile('path to the image');
        Share.shareImage(image, this, []);
    }
);
module.exports = Page1;
Text Sharing
TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import System = require('sf-core/device/system');
import Contacts = require('sf-core/device/contacts');
import File = require("sf-core/io/file");
import Share = require('sf-core/share');
import Image = require('sf-core/ui/image');
​
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
​
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
        this.layout.flexWrap = FlexLayout.FlexWrap.WRAP;
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar } = System.OS === "Android" ? this : this.parentController;
    superOnShow();
    Application.statusBar.visible = true;
    headerBar.visible = true;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
    Share.share({ items: ["Hello from Smartface",], page: this, blacklist: [] });
}
​
​
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Share = require('sf-core/share');
​
var Page1 = extend(Page)(
    function(_super) {
        _super(this, {
            onShow: function(params) {
                Application.statusBar.visible = false;
                this.headerBar.visible = false;
            }
        });
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
​
        Share.shareText("Hello from Smartface", this, [Share.ios.Twitter, Share.ios.Facebook]);
    }
);
module.exports = Page1;
Share link to Facebook in Android
Only link can be shared to Facebook without its SDK.
Contacts Sharing
The following example picks a contact then share it through many applications.
TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import System = require('sf-core/device/system');
import Contacts = require('sf-core/device/contacts');
import Share = require('sf-core/share');
import Page = require('sf-core/ui/page');
import Button = require("sf-core/ui/button");
import PermissionUtil = require("sf-extension-utils/lib/permission");
​
​
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
    myButton: Button;
​
    constructor() {
        super();
        // Overrides super.onShow method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
​
        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
        this.layout.flexWrap = FlexLayout.FlexWrap.WRAP;
    }
​
    shareContact(myContact: Contacts.Contact): void {
        if (System.OS === "Android") {
            PermissionUtil.getPermission(Application.Android.Permissions.READ_CONTACTS, 'Please go to the settings and grant permission')
                .then(() => {
                    Share.shareContacts({ items: [myContact], fileName: `${myContact.firstName}${myContact.middleName}${myContact.lastName}`, page: this, blacklist: [Share.ios.Twitter, Share.ios.Facebook] })
                })
                .then((reason) => {
                    console.info('Permission rejected');
                });
        } else {
            Share.shareContacts({ items: [myContact], fileName: `${myContact.firstName}${myContact.middleName}${myContact.lastName}`, page: this, blacklist: [Share.ios.Twitter, Share.ios.Facebook] })
        }
    }
}
​
/**
 * @event onShow
 * This event is called when a page appears on the screen (everytime).
 * @param {function} superOnShow super onShow function
 * @param {Object} parameters passed from Router.go function
 */
function onShow(superOnShow: () => void) {
    const { headerBar } = System.OS === "Android" ? this : this.parentController;
    superOnShow();
    Application.statusBar.visible = true;
    headerBar.visible = true;
}
​
/**
 * @event onLoad
 * This event is called once when page is created.
 * @param {function} superOnLoad super onLoad function
 */
function onLoad(superOnLoad: () => void) {
    superOnLoad();
​
​
​
    this.myButton = new Button({
        text: "PICK CONTACT",
        onPress: () => {
            //@ts-ignore
            Contacts.pick({
                page: this,
                onSuccess: (contact: any) => {
                    this.shareContact(contact);
                },
                onFailure: function () {
                    console.log("Something went wrong ");
                }
            });
        }
    });
​
    this.layout.addChild(this.myButton, "myButton", ".sf-button", {
        marginTop: 250,
        marginRight: 50,
        marginLeft: 50,
        height: 60,
        backgroundColor: "#FF0000"
    });
​
}
​
​
JavaScript
const File = require("sf-core/io/file");
const Image = require("sf-core/ui/image");
const Share = require("sf-core/share");
const Page = require("sf-core/ui/page");
const Contacts = require("sf-core/device/contacts");
const Button = require("sf-core/ui/button");
const Application = require("sf-core/application");
const Color = require("sf-core/ui/color");
const Device = require('sf-core/device');
const extend = require("js-base/core/extend");
​
var Page1 = extend(Page)(
    function (_super) {
        var page = this;
        _super(this, {
            onShow: function (params) {
                Application.statusBar.visible = false;
                this.headerBar.visible = false;
            }
        })
​
        var myButton = new Button({
            marginTop: 250,
            marginRight: 50,
            marginLeft: 50,
            height: 60,
            text: "PICK CONTACT",
            backgroundColor: Color.RED,
            onPress: function () {
                Contacts.pickContact({
                    page: page,
                    onSuccess: function (contact) {
                        console.log("Successfully picked ", contact);
                        shareContact(contact);
                    },
                    onFailure: function (e) {
                        console.log("Something went wrong ", e);
                    }
                });
            }
        });
​
        this.layout.addChild(myButton);
​
        function shareContact(myContact) {
            let result = true;
            if (Device.System.OS === "Android") {
                result = Application.android.checkPermission(Application.android.Permissions.READ_CONTACTS);
                if (!result) {
                    let permissionCode = 1001;
                    Application.android.requestPermissions(permissionCode, Application.android.Permissions.READ_CONTACTS);
                }
                result = Application.android.checkPermission(Application.android.Permissions.READ_CONTACTS);
            }
            if (result) {
                Share.shareContacts({ items: [myContact], fileName: `${myContact.firstName}${myContact.middleName}${myContact.lastName}`, page: page, blacklist: [Share.ios.Twitter, Share.ios.Facebook] })
            }
        }
    }
);
module.exports = Page1;
Example:​
Native Phone Call
Speech Recognition (Speech-to-Text)
Last updated 6 months ago