Prompt Users To Rate Your NativeScript Android And iOS App

So you’ve released this great application that you developed using NativeScript by Progress. The problem you might be facing now is that no one is rating or reviewing your mobile application. This may be related to the fact that it takes a bit of time to find an app in the app store and then leave a rating. A great solution to this is to prompt the user to rate your application and be automatically redirected to the app store listing should they agree to leave you a rating.

We’re going to see how to prompt users for feedback from within your NativeScript iOS and Android mobile application.

To get the most out of this guide, we’re going to create a fresh NativeScript project. Using your Command Prompt (Windows) or Terminal (Mac and Linux), execute the following:

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

A few things to note from the above list of commands. First note the --ng tag being used. This means that our project will be an Angular TypeScript project. It doesn’t have to be, but for this example it will be. Second, if you’re not using a Mac you cannot build for the iOS platform.

Now we have to decide how we’re going to ask for feedback. I actually made a NativeScript plugin called nativescript-ratings that can be used for free. It will present users with a dialog after a defined amount of application opens. The user can decline and the dialog will never show again, the user can set a reminder, or the user can accept and be taken to the appropriate app store.

To install this plugin, execute the following from your Terminal or Command Prompt:

tns plugin add nativescript-ratings

Now let’s take a look at how to use it.

Open the project’s app/app.component.ts file and add the following code:

import { Component } from "@angular/core";
import { Ratings } from "nativescript-ratings";

@Component({
    selector: "my-app",
    template: `
        <StackLayout>
            <Label text="Welcome to this awesome app" class="title"></Label>
        </StackLayout>
    `,
})
export class AppComponent {

    constructor() {
        let ratings = new Ratings(
            {
                id: "0",
                showOnCount: 2,
                title: "What do you think?",
                text: "If you like this app, please take a moment to leave a positive rating.",
                agreeButtonText: "Rate Now",
                remindButtonText: "Remind Me Later",
                declineButtonText: "No Thanks",
                androidPackageId: "com.nativescript.demo",
                iTunesAppId: "927183647"
            }
        );
        ratings.init();
        ratings.prompt();
    }

}

Time to break down everything that is happening here.

For the most part everything was part of the default NativeScript Angular template. Towards the top you’ll notice the following line:

import { Ratings } from "nativescript-ratings";

This will include the downloaded library into our project. There will still be some issues with the TypeScript around it, but we’ll fix it in a moment.

let ratings = new Ratings(
    {
        id: "0",
        showOnCount: 2,
        title: "What do you think?",
        text: "If you like this app, please take a moment to leave a positive rating.",
        agreeButtonText: "Rate Now",
        remindButtonText: "Remind Me Later",
        declineButtonText: "No Thanks",
        androidPackageId: "com.nativescript.demo",
        iTunesAppId: "927183647"
    }
);

In the constructor method we can define the prompt to be shown. Go ahead and give it a unique id. The showOnCount is important because it determines how many times the plugin can be initialized before the dialog actually shows. Define this value with caution because if you prompt your users too soon, they may get irritated. I like to set this value to maybe twenty. The androidPackageId and iTunesAppId should match what you’ve given your application. You can find these values inside the corresponding app store.

Finally we have the following:

ratings.init();
ratings.prompt();

The init method will increase the count and prompt will show the dialog.

I mentioned earlier there was an issue with TypeScript. This is because we need to include the type definitions. The easiest way to do this is to open the project’s references.d.ts file and include the following line:

/// <reference path="./node_modules/nativescript-ratings/ratings.d.ts" />

Another way to add the type definitions would be to allow them in the tsconfig.json file. Choose to add them in only one location, not both.

At this point your application should be ready to start asking for ratings.

Conclusion

You just saw how to use my ratings plugin to prompt users for feedback about your iOS or Android NativeScript application. This is a great way to boost ratings and reviews for your app when used appropriately. Bombarding your users with requests for feedback is a good way to get negative feedback, so use the plugin with caution. You want to make sure your users use the application enough times to achieve a positive impression of the application.

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.