Send, Read and Delete SMS in React Native

In this tutorial, we are going to implement send, read and delete SMS actions from your mobile device using react-native application. Using these implementations you can send message to someone, you can read particular persons or profiles message by clicking a single button and you can delete a particular message too from your device by implementing some cool functions using react-native-sms and react-native-get-sms-android in our cool react-native application.

Complete source code of this tutorial can be found at React_Native_Send_Get_Delete_SMS

In this tutorial, we will focus on some basic and major parts where many expert developers or juvenile beginners get confused. Hence we will check each and everything in step-by-step as: —

1. What and why React Native
2. How to create react native app
3. What and Why react-native-sms and react-native-get-sms
4. Setup and Implementation
5. Working example

Step 1: — What and why React Native?

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-Esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this tutorial, we’ll cover firebase phone authentication and CRUD operations. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some anecdota: Facebook, Palantir, and TaskRabbit are already using it in production for user-facing applications.
The fact that React Native actually renders using its host platform’s standard rendering APIs enables it to stand out from most existing methods of cross-platform application development, like Cordova or Ionic.

Existing methods of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using webviews. While this approach can work, it also comes with drawbacks, especially around performance. Additionally, they do not usually have access to the host platform’s set of native UI elements. When these frameworks do try to mimic native UI elements, the results usually “feel” just a little off; reverse-engineering all the fine details of things like animations takes an enormous amount of effort, and they can quickly become out of date.

step 2: — How to create react native app

Keeping in mind everyone I am going to explain about the creation of a new cool react-native project. First, of all, I would like to inform you that the latest react native version at present when I am writing this blog is 0.60.5. And above 0.60 react-native gave us a very convenient and easy facility which is above this version we do not need to run react-native link anymore. Above this version, we get the auto-linking facility in the app for packages.

The first step to create a new project is installing react-native CLI if already not present in your device. By executing this command in terminal

npm install -g react-native-cli

After successful CLI installation execute the command

react-native init yourProjectNameHere

For further steps as android studio setup and SDK installation or environment setpup please follow this link…Click here.

Now you are all set for boom 🧨 🧨 🧨 boom 🧨 🧨 🧨 🧨…..

step 3: — What and Why react-native-sms and react-native-get-sms?

Let us make you understand why we need to use react-native-sms and react-native-get-sms. I will try to make you understand in my language as if you are getting irritated with some unwanted service provider’s message or with any one’s message then, in that case, you can just pass that one person or organizations particular id and delete their messages on a single click like the same you can send someone, in particular, a text message from your app by clicking a single button or this is not the last thing you can achieve with this tutorial, you can also read any particular message in your app from your inbox.mail, chat, etc.
Here in this tutorial I have integrated and successfully achieved these awesome facilities but you can explore it more and implement much more things according to your need. Hence let’s go and see how we can implement these in very few easy steps.

Step 4: — Setup and Implementation

First of all, install the dependencies by executing this command: —

npm i react-native-sms
Then,
npm i react-native-get-sms-android

You can only install the second npm package and implement all functionalities but I have used react-native-sms to send sms and react-native-get-sms-android to read and delete sms.
Now we need to give some permissions to the application as: —

Android Permissions

Add permissions to your android/app/src/main/AndroidManifest.xml file.

...
<uses-permission android:name="android.permission.READ_SMS" />
<uses-permission android:name="android.permission.WRITE_SMS" />
<uses-permission android:name="android.permission.SEND_SMS" />
...

then,

In MainActivity.java copy and paste these on their defined places

import com.react.SmsPackage;
import com.tkporter.sendsms.SendSMSPackage;
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data)
{
super.onActivityResult(requestCode, resultCode, data);
//probably some other stuff here
SendSMSPackage.getInstance().onActivityResult(requestCode, resultCode, data);
}

And in MainApplication.java import these lines

import com.tkporter.sendsms.SendSMSPackage;
import com.react.SmsPackage;

For common issues, you can visit these links.
1. https://www.npmjs.com/package/react-native-get-sms-android
2. https://www.npmjs.com/package/react-native-sms

We are all set to achieve the final result but before that let us make some interactive UI for the application.
View Logics: —

View Result Is: —

We have three buttons on the card as:-

Send SMS → Click to send SMS to a particular contact.

Read SMS → Click to read the message by passing the id of the message.

Delete SMS → Click to delete an SMS by passing the id of the message.

Now let's implement the logic part: —

Here we have different options to set as actions during reading an SMS as:-

var filter = {
box: 'inbox', // 'inbox' (default), 'sent', 'draft', 'outbox', 'failed', 'queued', and '' for all
// the next 4 filters should NOT be used together, they are OR-ed so pick one
read: 0, // 0 for unread SMS, 1 for SMS already read
_id: 1234, // specify the msg id
address: '+1888------', // sender's phone number
body: 'How are you', // content to match
// the next 2 filters can be used for pagination
indexFrom: 0, // start from index 0
maxCount: 10, // count of SMS to return each time
};
/
Each sms will be represents by a JSON object represented below
{
"_id": 1234,
"thread_id": 3,
"address": "2900",
"person": -1,
"date": 1365053816196,
"date_sent": 0,
"protocol": 0,
"read": 1,
"status": -1,
"type": 1,
"body": "Hello There, I am an SMS",
"service_center": "+60162999922",
"locked": 0,
"error_code": -1,
"sub_id": -1,
"seen": 1,
"deletable": 0,
"sim_slot": 0,
"hidden": 0,
"app_id": 0,
"msg_id": 0,
"reserved": 0,
"pri": 0,
"teleservice_id": 0,
"svc_cmd": 0,
"roam_pending": 0,
"spam_report": 0,
"secret_mode": 0,
"safe_message": 0,
"favorite": 0
}
/

Now if you have followed each step and completed all the phases then you are all set to check out the output or you can just clone the repo and start from there.

Complete source code of this tutorial can be found at React_Native_Send_Get_Delete_SMS.

Conclusion

In this blog, you learned how to send read and delete an SMS from your device in the React Native apps for Android. You also learned how to integrate react-native-sms and react-native-get-sms in the react-native application. We also built the app in Android and ran on a device.

Next Steps

Now that you have learned how to send read and delete an SMS from your device in React Native apps for Android, here are some other topics you can look into

• Firebase — Integrate Firebase | Analytics | Push notifications | Firebase CRUD
• How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Translation | Barcode & QR code scan | Google Vision
• Payments — Apple Pay | Stripe payments
• Authentication — Google Login| Facebook login | Phone Auth | Twitter login | Anonymous Login
• Create Instagram / Whatsapp Story Feature in React Native
• React Native life cycle hooks | Implement Redux | Async actions with Redux
• Create Awesome Apps in React Native using Full App