Android SMS in React Native

In React native in order to interact with native services we need to bridge js and native code.

For sending and receiving the sms in react native we need to bridge the native code with react native part.

For this there are some npm packages are available.

1. react-native-android-sms-listener - used to listen the incoming messages.
2. react-native-get-sms-android - used to read,send and delete the messages in android.

react-native-android-sms-listener

• Install the package by using npm install react-native-android-sms-listener  or yarn add react-native-android-sms-listener.
• Link the native module packages by react-native link react-native-android-sms-listener.
• This will add some native codes to the files in android folder, check once whether the codes are added correctly if not just add the codes in the corresponding files.

android/settings.gradle

include ':react-native-android-sms-listener'
project(':react-native-android-sms-listener').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-android-sms-listener/android')

android/app/build.gradle

dependencies {
compile project(':react-native-android-sms-listener')
// (...)
}

MainApplication.java

import com.centaurwarchief.smslistener.SmsListenerPackage;

@Overrideprotected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new SmsListenerPackage()
// (...) );
}

• once the above codes are added,you have to write the code in your react-native js file to use the native modules.

import SmsListener from 'react-native-android-sms-listener'
SmsListener.addListener(message => {
console.info(message)
})

The contents of message object will be:

{
originatingAddress: string,
body: string
}

SmsListener#addListener returns a CancellableSubscription so if you want to stop listening for incoming SMS messages you can simply .remove it:

let subscription = SmsListener.addListener(...)
subscription.remove()

react-native-get-sms-android

• Install the package by using npm install react-native-get-sms-android or yarn add react-native-get-sms-android.
• Link the native module packages by react-native link react-native-get-sms-android.
• This will add some native codes to the files in android folder, check once whether the codes are added correctly if not just add the codes in the corresponding files.

android/settings.gradle

include ':react-native-get-sms-android'
project('react-native-get-sms-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-get-sms-android/android')

android/app/build.gradle

dependencies{
compile project(':react-native-get-sms-android')
}

MainApplication.java

import com.react.SmsPackage;
@Overrideprotected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new SmsPackage()
// (...) );
}

Send an sms directly without user interaction.

import SmsAndroid from 'react-native-get-sms-android';

SmsAndroid.autoSend(phoneNumber, message, (fail) => {
console.log("Failed with this error: " + fail)
}, (success) => {
console.log("SMS sent successfully");
});

Common things you have to do is adding the permission :

Android Permissions:-

Add permission 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" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
...

Apart from these you have to provide access to Android M's new permission model by PermissionsAndroid.

async function requestReadSmsPermission() {
try {
// use PermissionsAndroid.request(permission,{}) for single request
const grantedSmsOperations = await PermissionsAndroid.requestMultiple(
[PermissionsAndroid.PERMISSIONS.READ_SMS,
PermissionsAndroid.PERMISSIONS.SEND_SMS,
PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE],
{
title: "SMS Operations",
message: "need access to SMS Operations , to send invites and verify OTP"
}
);
if (grantedSmsOperations === PermissionsAndroid.RESULTS.GRANTED) {
console.log("sms send permissions granted", grantedSmsOperations);
} else {
console.log("sms send permissions denied", grantedSmsOperations);
}
} catch (err) {
console.warn(err);
}
}

Happy coding ☺☺☺