Sending Text Messages to Phone Contacts using NativeScript

The goal of this tutorial is to show how to pull a contact from your iOS or Android contact list into a NativeScript app and prepare a text message for delivery. It leverages two NativeScript extensions that I have built: nativescript-contacts and nativescript-messenger.

Another thing to note is that, in order to actually send the SMS, you’re going to need to use a connected device. The emulators don’t support sending or testing of SMS. If you don’t have a device, you can still follow along and pull contacts from within an emulator and just trust that it will send an SMS if you dont have a device to connect with.

Getting Started

From our command line/command prompt, we’ll start by creating a new app:

Let me explain whats happening above. We are using a stack layout to create a block for our inner elements (i.e. button, label and button).

The first button is going to open our contact list and bring a contact back for us to do something with. It is tied to a function we’ll create later. The label will display the selected contact’s name. The last button will fire an SMS with some predefined text that we’ll specify within a function in the JavaScript code later.

The latter two elements’ visibility is determined by whether or not a contact has been selected yet.

main-page-model.js

This file contains our model, and is where we will store the data that will be displayed by our view above.

main-page.js

This is where the magic happens. First we need to set our dependencies and define the pageLoaded method, which defines what model we would like to use for the data. Our dependencies are the application module (which is used to grant us access to check what OS the user is running), the two plugins and our model.

SENDING A TEXT MESSAGE

Let’s add another function below our getContact() function. This one is simple – all we want to do is grab the phone number from the chosen contact and call the messenger.send(numbers, message, subject) method to send a text.

Again the message wont send on the emulator, you’ll get an alert saying “Error: You’re not able to send SMS messages. Please check device settings.” However, if you are able to test the app on an iPhone, it would open the compose message view and allow you to send a text message.

Conclusion

If you’re a NativeScript developer, I hope you find these two plugins useful. If you’d like to see additional features or support, they are both open source and I invite anyone with the expertise to please contribute.

Enterprise

Stay connected with NativeScript

I agree to receive email communications from Progress Software or its Partners, containing information about Progress Software’s products. Consent may be withdrawn at any time.

We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.

Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.