Implement Social Media Sharing In A NativeScript App

Every app lately has some social media aspect to it. Most commonly, apps will allow you to share some kind of data, whether it be an image or text, to social media networks such as Facebook or Twitter. Sharing via email or SMS message still is classified as social sharing. When building NativeScript Android and iOS applications, sharing data isn’t complicated.

We’re going to see how to share image data and text data on social media networks via a Telerik NativeScript Android and iOS mobile application.

Let’s start by creating a fresh NativeScript project. This can be done by executing the following from the Command Prompt (Windows) or Terminal (Mac and Linux):

tns create SocialProject
cd SocialProject
tns platform add ios
tns platform add android

It is important to note that if you’re not using a Mac, you cannot add and build for the iOS platform.

With NativeScript we can easily interface directly with the native iOS and Android APIs, but for convenience we’re going to use a plugin instead. We’re going to use the social sharing plugin.

From the Terminal or Command Prompt, execute the following to add it:

tns plugin add nativescript-social-share

Now we can start the development process.

We’re going to spend all our time in the app/main-page.js and app/main-page.xml files. One of course being our UI file and the other being our logic file.

We’re going to start by adding a few functions to our app/main-page.js file. Open it and add the following:

var socialShareModule = require("nativescript-social-share");
var imageSourceModule = require("image-source");

exports.pageLoaded = function(args) {
    var page = args.object;
    page.bindingContext = {};
}

exports.shareText = function() {
    socialShareModule.shareText("I love NativeScript!", "How would you like to share this text?");
}

exports.shareImage = function() {
    imageSourceModule.fromUrl("https://www.nraboy.com/images/nraboy.png").then(function(image) {
        socialShareModule.shareImage(image);
    });
}

At the top you’ll notice we are importing the plugin module and the module that will let us load image data. Then we create both a shareText and a shareImage function.

Per the plugin documentation, the sharing module’s shareText function expects a message and an optional subject. The module’s shareImage function expects an image and an optional subject. We’re loading the image data from a remote URL, but the image-source module has many other methods for loading data as seen in the official documentation.

Now let’s look at the app/main-page.xml file. Open it and include the following code:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
    <StackLayout>
        <Button text="Share Text" tap="shareText" />
        <Button text="Share Image" tap="shareImage" />
    </StackLayout>
</Page>

We only have two buttons here. One will allow us to share text when clicked and the other will allow us to share the remote image when clicked. Nothing fancy at all here.

When you build your project you’ll be able to do social sharing on iOS and Android. Something to note though is that both platforms have different sharing options and more options become available when you have more apps installed.

Conclusion

You just saw how to share text and images through various social outlets. Yes I admit that I took most of this source code from the official documentation, but I made some revisions to make it easier to understand.

Different social media options will become available on each of the platforms as more apps get installed on the users device. The simulator by default will have very limited sharing options.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.