SMS and Phone Calls with NativeScript Angular

25 Jun 2017

Adding SMS support for your NativeScript application is simple! This article will show you how to send an SMS with Angular NativeScript.

Project Setup

To get started, create a blank Angular NativeScript project (or navigate to yours) by typing:

# New Project
tns create NativeScriptSMS --template nativescript-template-ng-tutorial

# Navigate to Project
cd NativeScriptSMS

This will create a new project named NativeScriptSMS. Ensure you’re inside that directory and install the nativescript-phone plugin:

tns plugin add nativescript-phone

User Interface

Firstly, let's import the NativeScriptFormsModule so we can use ngModel to gather an input from the user.

import {NativeScriptFormsModule} from "nativescript-angular/forms"
 
@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [NativeScriptModule, NativeScriptFormsModule],
  schemas: [NO_ERRORS_SCHEMA],
})

The UI can then be constructed. To keep things super simple, we’ll just be editing the template in our app.component.ts.

@Component({
  selector: "my-app",
  template: `
    <ActionBar class="action-bar" title="NativeScript SMS Application"></ActionBar>
    <StackLayout class="p-20">
 
      <Label text="Select either TEXT or PHONE to continue."></Label>
 
      <FlexboxLayout>
        <Button class="phone-button" (tap)="setPhoneType(0)" text="PHONE"></Button>
        <Button class="text-button"(tap)="setPhoneType(1)" text="Text"></Button>
      </FlexboxLayout>
 
      <StackLayout *ngIf="phoneType === 0">
        <TextField keyboardType="phone" hint="Enter Phone Number..." [(ngModel)]="phoneNumber"></TextField>
        <Button (tap)="callNumber()" *ngIf="phoneNumber" class="phone-button" [text]="'Call ' + phoneNumber"></Button>    
      </StackLayout>
 
      <StackLayout *ngIf="phoneType === 1">
        <TextField keyboardType="phone" hint="Enter Phone Number..." [(ngModel)]="phoneNumber"></TextField>
        <TextField keyboardType="text" hint="Enter Message..." [(ngModel)]="message"></TextField>
        <Button (tap)="textNumber()" *ngIf="phoneNumber && message" class="text-button" [text]="'Text ' + phoneNumber"></Button>    
      </StackLayout>
 
    </StackLayout>
  `
})

Dialing a Number

We will then have to import the nativescript-phone module inside our app.component.ts:

import * as phone from 'nativescript-phone';

We can use the phone.dial() function to call a specific number. We capture that number via the ngModel binding in our template view.

Simple enough. I’ve ensured to typecast the number to a string so that it can fit the appropriate parameter type. We initially capture it as a number so that it’s easier for the user to use the numeric keypad on their phone.

export class AppComponent {
  //Variables
  phoneNumber: number;
  message: string;
 
  //Used to determine which choice user has selected
  phoneType: number;
 
  //Set user choice (text or phone)
  setPhoneType(val) {
    this.phoneType = val;
  }
 
  callNumber() {
    phone.dial(String(this.phoneNumber), true)
  }
}

Texting a Number

An interesting thing about the SMS function is that we have access to an array of numbers, so we could have multiple inputs (or navigate a user to a contacts screen). I’ve elected to just add one number gathered from the model:

textNumber() {
  /* 
    As we have an array of phone numbers, we could add a second one here
    phone.sms(['1234','5678'...], message)
  */
  phone.sms([String(this.phoneNumber)], this.message).then((result) => {
    //Returns a promise, do what you want here
    console.log(result);
  })
}

Here's our application:
NativeScript SMS