How to send SMS in react-native:

Here we are discuss about sms sending which is very common functionality for any app, in this example of sending sms you can able to send the text message on clicking the button so let’s start the topic “How to send SMS in react native”.

Example output –

Introduction of sms sending-

• Currently user-initiated SMS sending is supported. this means you can’t use react-native-sms to send an SMS in the background.
• This package displays the native SMS view.
• There are 3 – status of SMS sending which is – completed, cancel and error.
• This plugin support the iOS and Android both.

So now we are going to integrate the plugin, please follow all steps.

Step1: 

Firstly we need to install this plugin.

npm install react-native-sms –save

Step2:

Now we are going to link the library if your react-native version is <0.60 otherwise no need to link the plugin.

react-native link react-native-sms

 Step3:

Here we start implementing the plugin, firstly we need to import the plugin.

import SendSMS from 'react-native-sms';

 Step4:

Now we are going to integrate the plugin, please go to the file where you want to integrate the SMS sending functionality.

//sms sending function definition
someFunction() {
//ask for sms access permission
try {
const granted = PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.SEND_SMS,
{
title: 'App Title',
message:'App Name needs to send sms to your Contact ',
// buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
},).then(() = {
SendSMS.send({
//Message body
body: 'Please follow https://www.itechinsiders.com',
//Recipients Number
recipients: ['1234567890],
//An array of types that would trigger a "completed" response when using android
successTypes: ['sent', 'queued']
}, (completed, cancelled, error) => {
if (completed) {
console.log('SMS Sent Completed');
} else if (cancelled) {
console.log('SMS Sent Cancelled');
} else if (error) {
console.log('Some error occured');
}});
})
console.log('SEND_SMS granted---------',granted)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('SEND_SMS granted---------',granted)
} else {
console.log('SEND_SMS permission denied');
}} catch (err) {
console.warn(err);
}}

render(){
 return(
  <TouchableOpacity onPress={()=>{this.someFunction()}}
  send sms </TouchableOpacity>
 )
}

Please verify these files if you find any issue to integrate the plugin

Check the MainActivity.java (MyApp/android/app/src/main/java/some/other/directories/MainActivity.java)

Check these lines at the top of this file.

 import android.content.Intent; // <– include if not already there
 import com.tkporter.sendsms.SendSMSPackage;

Inside MainActivity (place entire function if it’s not there already)

@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);                  
}

Check the file MainApplication.java file –

Make sure that the import com.tkporter.sendsms.SendSMSPackage; is there
Then head down to getPackages(), it has to look similar to this

protected List<ReactPackage> getPackages() {
 //some variables
return Arrays.<ReactPackage>asList(
//probably some items like `new BlahPackage(),`
//just add into the list (don’t forget commas!):
SendSMSPackage.getInstance()
);}

Navigate to your AndroidManifest.xml (at MyApp/android/app/src/main/AndroidManifest.xml), and add this near the top with the other permssionsion

 <uses-permission android:name=“android.permission.READ_SMS” />

Having errors with import statements on Android? Something happened with linking, Go to your settings.gradle (in MyApp/android/settings.gradle) and add:

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

Then go to MyApp/android/app/build.gradle and add inside dependencies { }:
compile project(‘:react-native-sms’)

So the tutorial is “How to send SMS in react native“ completed.

You can find my post on medium as well click here please follow me on medium as well.

If have any query/issue, please feel free to ask.

Happy Coding Guys.