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;

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: