Skip to main content

Read And List SMS With Ionic 2 Apps For Android

There may come a time when you need to read the SMSes that the user has in the inbox with your app created using Ionic 2. In this tutorial, we will see exactly how to achieve that.

In this tutorial, we will use the cordova-plugin-sms. A thing to note here right off the bat is that the plugin offers the ability to list only the latest 10 SMSes in the free version. For more, you need to buy the license key which you can do so via the link in the documentation. Also, note that this plugin works for only Android apps.

This plugin not only offers the ability to list messages but also can send messages. You can send SMSes without any restriction in the free version except the list feature as mentioned above.

Here are a few tutorials for sending SMSes:

Sending SMS With Ionic 2 App For Android

Ionic 2 Beginner : Send SMS With Ionic 2 And Cordova SMS Plugin

 

Now let’s code a sample app to read SMS.

Step 1 )

We will create a fresh Ionic 2 project. I will use the blank template you can use another template that you want.

After having navigated inside the smsList directory we will add the Android platform.

Step 2 )

Now it’s time to add the cordova-plugin-sms plugin to our application we do that by running the following command

Note: If you are building for API level 23 and above, you will need to add the cordova-plugin-android-permissions plugin for Android. Basically, you will need to ask the user for the permission to read SMSes. Check out the documentation of the plugin for more.

 

 

Step 3)

Open the project folder in you favorite editor and open the file in src\pages\home\home.html

Inside home.html we will put the following code

As you can see we are creating a button on line 10 which will call a function getSMS(). We also have *ngFor on line 12 that will loop over every object in the smses array.

Als0 note that I am using ion-icon with *ngIf that will show or hide the star icon depending on the value sms.read==0 is true or not. What this will do is it will show a star alongside all the messages that have not been read.

Step 4)

After creating our view and we created a button in it, it’s now time to add functionality to our app we do that by opening up src\pages\home\home.ts file and adding the following code.

As shown we are checking for the availability of the SMS object on line 16. Then we are using the SMS.list() method to list all the messages. A thing to note that we have used the setTimeout() function here. This is because I found that the data was not binding to the view and it needed two taps on the button to display the list. If you find that it works without setTimeout() you can remove it.

 

Let’s break the SMS.list() method down and understand it better. It takes three arguments the first is a filter object { } (More on the filter object later). The second and third are success and error callback functions.

The data we get back is an array of objects and each object has the following structure

Where the address it the number from where the SMS came from, the body is the actual text of the SMS and so on.

 

SMS Filter Values

So what is this filter object {} that we passed as the first argument in the SMS.list() method.Well as the name suggests it provides a way to filter the SMS data that we get back. This can be really handy as you can get specific SMSes based on the SMS text string, you can get all unread SMSes, you can also get SMSes from a particular sender, etc. Let’s see a quick example of how you can do this

 

 

The above code is taken from the docs here and is pretty well commented out and is pretty self-explanatory.

Note:

This plugin will not work in the browser. You will need to install the app on a device and run the app for this to work.

Known Issues:

The plugin automatically adds few permistions to the AndoridManifest.xml file during the build process. But there are times that you may get an Permisson Denial error which looks somewhat like the following

Permission Denial: reading com.android.providers.telephony.SmsProvider uri content ….
requires android.permission.READ_SMS, or grantUriPermission()

To solve this open up platforms\android\AndroidManifest.xml file and add the following to inside the <widget> tag

 

Conclusion

The cordova-plugin-sms is a good SMS plugin if you want to have the ability to Read as well as Send SMSes. The negative thing about the plugin is that it is an Android only plugin. For most cases the free version of the plugin will do. However, if you have an app that needs to list more that 10 SMSes you should definitely consider buying the License key.

 

Download Code:

Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper
Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)