Use Social Media Sharing Prompts In A NativeScript Angular Application

Social media can be huge towards building your brand and promoting your mobile application. It can also make a difference in the user experience of your application. Allowing users to share text and media on their own social media profiles could be huge, no matter how you look at it. A while back I had demonstrated social media sharing in a vanilla NativeScript application for iOS and Android. While vanilla NativeScript is still a very valid option, I’ve been going the route of Angular lately, so I figured this topic could be revisited.

We’re going to see how to implement social media sharing features in a NativeScript mobile application build with Angular.

Going into this, you should probably take note that an emulator won’t get you very far when it comes to this topic. This is because the emulators generally don’t have any share targets ready to go. For example, take the following animated image:

You’ll notice that we can share text or images, but the two emulators don’t have options like Twitter or Facebook. This is because the emulators don’t have any social platforms installed. You can only share to what is available on the device.

Creating a New NativeScript Project with Social Media Sharing

Our project won’t be very complex, but it will get the job done. For simplicity, we’re going to start with a fresh project that uses Angular and the social media sharing features.

From the Terminal (Mac and Linux) or Command Prompt (Windows), execute the following:

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

The --ng flag indicates we are creating an Angular project that uses TypeScript. It is important to note that if you’re not using a Mac with Xcode installed, you cannot build for the iOS platform.

With the project created, the appropriate plugin needs to be installed. Go ahead and execute this command:

tns plugin add nativescript-social-share

The above plugin is the same that we used in the previous article.

At this point we can start developing our application!

Implementing the Application Logic and Page UI

The development of our application will consist of two parts, the TypeScript logic layer and the HTML UI layer. Starting with the TypeScript portion, open the project’s app/app.component.ts file and include the following code:

import { Component } from "@angular/core";
import * as SocialShare from "nativescript-social-share";
import * as ImageSource from "image-source";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {

    public shareText() {
        SocialShare.shareText("I love NativeScript!", "How would you like to share this text?");
    }

    public shareImage() {
        ImageSource.fromUrl("https://www.nraboy.com/images/nraboy.png").then((image) => {
            SocialShare.shareImage(image);
        });
    }

}

You’ll notice that inside my AppComponent class I have two methods, one for sharing text and one for sharing images. Taking a look at the image sharing part, you can see we are loading an image from a URL. This is not the only way to accomplish sharing images. We can also share images in files by using fromFile instead of the fromUrl method.

Now let’s have a look at our very basic HTML. Open the project’s app/app.component.html file and include the following HTML markup:

<ActionBar title="{N} Social Media Sharing"></ActionBar>
<StackLayout verticalAlignment="center" horizontalAlignment="center">
    <Button text="Share Text" (tap)="shareText()" class="btn btn-primary btn-active"></Button>
    <Button text="Share Image" (tap)="shareImage()" class="btn btn-primary btn-active"></Button>
</StackLayout>

In the above example we have a very basic action bar and a vertically stacked layout of two buttons. When either of the buttons are pressed, their corresponding TypeScript methods are called.

That is all there is to it!

Conclusion

You just saw how to implement social media sharing features in a NativeScript iOS and Android application built with Angular. These features will allow users to share text and images via whatever social platforms they have installed on their device. Such platforms include, but are not limited to, Facebook, Twitter, and SMS. If you’re not interested in Angular, you might check out my vanilla article on the subject.

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.