How to send SMS programatically in React Native with phone credit

Question

I was looking for a way to send an SMS programmatically in React Native without using 3rd Party APIs like Twilio or Firebase etc. My intention was to use phone credit / the available airtime in my SIM Card.

Answer 1

I found the solution from the following link but edited it a bit since the original wa giving errors during compile:

Note: This solution requires you to extend your current React Native code base with Native Java code modules. But don't let that scare you.

Link: Sending Direct SMS In React-Native Android by Fateme Fazli

Step 1: Create SendSMSModule.java

Go into your android/app/src/main/java/com/your_project_name folder to create the DirectSmsModule.java module, use the below Java code.

//DirectSmsModule.java  : This is the name of the Java Class/File   
package com.your_project_name; //make sure to change to your project's actual name.

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.uimanager.IllegalViewOperationException;
import android.telephony.SmsManager;  //++ make sure this package is available always
 
public class DirectSmsModule extends ReactContextBaseJavaModule {
 
    public DirectSmsModule(ReactApplicationContext reactContext) {
        super(reactContext); //required by React Native
    }
 
    @Override
    //getName is required to define the name of the module represented in JavaScript
    public String getName() { 
        return "DirectSms";
    }
 
    @ReactMethod
    public void sendDirectSms(String phoneNumber, String msg) {
        try {      
            SmsManager smsManager = SmsManager.getDefault();
            smsManager.sendTextMessage(phoneNumber, null, msg, null, null);    
            System.out.println("message sent successfully.");
        } catch (Exception ex) {
            System.out.println("couldn't send message.");
        } 
    }
}

Step 2: Create DirectSmsPackage.java Module

In the same folder android/app/src/main/java/com/your_project_name where you now have probably 3 Java files, add this 4th one: DirectSmsPackage.java

//DirectSmsPackage.java
package com.your_project_name;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.enoxscanner.DirectSmsModule; // enoxscanner should be replaced with your own package name
 
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
 
public class DirectSmsPackage implements ReactPackage {
 
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
 
    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        //this is where you register the module
        modules.add(new DirectSmsModule(reactContext));
        return modules;
    }
}

Step 3: Register DirectSmsPackage

Now register the module we have just created above there. This is almost the same as you do with those packages that you have to manually link after adding or installing them.

In the same folder, locate your MainApplication.java file and locate the below section of code then add the line highlighted as add this line: Note, you are editing the getPackages() function

@Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());

          packages.add(new DirectSmsPackage()); //++ add this line here ++
          return packages;
        }

Step 4: Call the sendDirectSMS in you RN Script

import React, { Component } from 'react';
import { NativeModules, PermissionsAndroid } from 'react-native'; 

//++ import NativeModules since we are using a Native external module
...

const DirectSms = NativeModules.DirectSms;

export class SMSScreen extends Component {

sendDirectSms = async () => {
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.SEND_SMS,
                {
                    title: 'Tadiwanashe App Sms Permission',
                    message:
                        'Tadiwanashe App needs access to your inbox ' +
                        'so you can send messages in background.',
                    buttonNeutral: 'Ask Me Later',
                    buttonNegative: 'Cancel',
                    buttonPositive: 'OK',
                },
            );
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                DirectSms.sendDirectSms('0772......', 'This is a direct message from your app.');
            } else {
                console.log('SMS permission denied');
            }
        } catch (err) {
            console.warn(err);
        }
    }

    render() {
        return (
            <View style={styles.mother_container}>
                <View style={styles.container}>
                    <TextInput secureTextEntry={true} style={styles.input}
                        underlineColorAndroid="transparent"
                        placeholder="Enter PIN."
                        placeholderTextColor="black"
                        autoCapitalize="none"
                        onChangeText={this.handlePIN}
                        textAlign={'center'}
                    />
                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => this.sendDirectSms()}>
                        <Text style={styles.submitButtonText} selectTextOnFocus={true}> Submit </Text>
                    </TouchableOpacity>
                </View>
                <AppFooter bgColor='#fff' textColor='grey' />
            </View>
        )
    }
}

export default SMSScreen ;

NOTE:

• Such applications that auto Send SMSs might not be allowed on Google.
• You will not receive SMSs until your app is Granted permission by the user, hence we imported PermissionsAndroid.
• The link above will give you proper explanation of much of the details, this is not entirely my work but simply edited accordingly after realising that the original code for the article had some errors and as well the article resides on a platform which makes it hard to give proper contributions compared to SO.