React Native Send SMS on Button Click From App iOS Android Example Tutorial

SMS also known as Short Message Service is one of the oldest messaging service since with mobile birth time. SMS is used to send short Text messages between two mobile phones or Two receivers. React native yet not supported background SMS sending functionality yet we can send the Text message from app to default messaging app with recipient mobile number. We are using a Npm package library called as react-native-sms in React Native Send SMS on Button Click From App iOS Android Example Tutorial. This library has more than 6000 installation weekly from react native users. So let’s get started 🙂 .

Contents in this project React Native Send SMS on Button Click From App iOS Android Example Tutorial:

1. react-native-sms library did not come inbuilt with react native project. We have to install it manually from NPM. So to install the react-native-sms library we have to open our React Native Project Root folder in Command Prompt or Terminal and execute below command.

npm install react-native-sms --save

1	npm install react-native-sms --save

Screenshot:

2. Hit the Enter button after pasting above command to install it. Make sure your system is connected to Internet.

3. Here you go, Now the react-native-sms library is successfully installed in your react native project. Next step is to link the newly installed package with our React native project. So again open your project root folder in command prompt or Terminal and execute below command to link the package.

react-native link react-native-sms

1	react-native link react-native-sms

4. Next step is put the READ_SMS permission in Android. This permission is allow us to Read and Send SMS from android device. So Open Your_React_Native_Project -> android -> app -> src -> main -> AndroidManifest.xml file. Copy the below SMS permission inside it. There is no need to configure for iOS devices.

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

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

Complete Source Code of My AndroidManifest.xml file after putting permission:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.project">

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

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.project">

<uses-permission android:name="android.permission.INTERNET" />

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

<application

android:name=".MainApplication"

android:label="@string/app_name"

android:icon="@mipmap/ic_launcher"

android:roundIcon="@mipmap/ic_launcher_round"

android:allowBackup="false"

android:theme="@style/AppTheme">

<activity

android:name=".MainActivity"

android:label="@string/app_name"

android:configChanges="keyboard|keyboardHidden|orientation|screenSize"

android:windowSoftInputMode="adjustResize">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

5. Open your project’s App.js file and Import Alert, StyleSheet, Text, View and TouchableOpacity component.

import React, {Component} from 'react';

import { Alert, StyleSheet, Text, View, TouchableOpacity } from 'react-native';

import React, {Component} from 'react';

import { Alert, StyleSheet, Text, View, TouchableOpacity } from 'react-native';

6. Import SendSMS from react-native-sms package.

import SendSMS from 'react-native-sms'

1	import SendSMS from 'react-native-sms'

7. Create our main export default class named as App. This is our main View class.

export default class App extends Component {


}

export default class App extends Component {

}

8. Create a function named as smsSendFunction(). Inside the function we would call SendSMS.send({}) method. We would pass here SMS Text, SMS recipient number with success response.

smsSendFunction() {

    SendSMS.send({
        body: 'Please follow us on https://reactnativecode.com',
        recipients: ['0987654321'],
        successTypes: ['sent', 'queued']
    }, (completed, cancelled, error) => {
        if(completed){
          Alert.alert('SMS Sent Successfully.')
        }else if(cancelled){
          console.log('SMS Sent Cancelled.');
        }else if(error){
          console.log('Some error occured.');
        }
    });
  }

smsSendFunction() {

SendSMS.send({

body: 'Please follow us on https://reactnativecode.com',

recipients: ['0987654321'],

successTypes: ['sent', 'queued']

}, (completed, cancelled, error) => {

if(completed){

Alert.alert('SMS Sent Successfully.')

}else if(cancelled){

console.log('SMS Sent Cancelled.');

}else if(error){

console.log('Some error occured.');

}

});

}

9. Create a Button using Touchable Opacity in render’s return block and call the smsSendFunction() on button onPress event.

render() {
    return (
      <View style={styles.MainContainer}>

         <TouchableOpacity 
         onPress={this.smsSendFunction} 
         activeOpacity={0.6} 
         style={styles.button} >

          <Text style={styles.TextStyle}>
             Click Here To Send SMS
          </Text>
        
        </TouchableOpacity>

      </View>
    );
  }

render() {

return (

<TouchableOpacity

onPress={this.smsSendFunction}

activeOpacity={0.6}

style={styles.button} >

Click Here To Send SMS

</Text>

</TouchableOpacity>

</View>

);

}

10. Creating Style.

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },

  button: {
    width: '100%',
    paddingTop:12,
    paddingBottom:12,
    backgroundColor: '#00BCD4',
    borderRadius:7,
  },
   
  TextStyle:{
      color:'#fff',
      textAlign:'center',
      fontSize: 20
  }

});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

padding: 20

button: {

width: '100%',

paddingTop:12,

paddingBottom:12,

backgroundColor: '#00BCD4',

borderRadius:7,

TextStyle:{

color:'#fff',

textAlign:'center',

fontSize: 20

}

});

11. Complete Source Code for App.js file class.

import React, {Component} from 'react';

import { Alert, StyleSheet, Text, View, TouchableOpacity } from 'react-native';

import SendSMS from 'react-native-sms'
 
export default class App extends Component {

  smsSendFunction() {

    SendSMS.send({
        body: 'Please follow us on https://reactnativecode.com',
        recipients: ['0987654321'],
        successTypes: ['sent', 'queued']
    }, (completed, cancelled, error) => {
        if(completed){
          Alert.alert('SMS Sent Successfully.')
        }else if(cancelled){
          console.log('SMS Sent Cancelled.');
        }else if(error){
          console.log('Some error occured.');
        }
    });
  }
  render() {
    return (
      <View style={styles.MainContainer}>

         <TouchableOpacity 
         onPress={this.smsSendFunction} 
         activeOpacity={0.6} 
         style={styles.button} >

          <Text style={styles.TextStyle}>
             Click Here To Send SMS
          </Text>
        
        </TouchableOpacity>

      </View>
    );
  }
}
const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },

  button: {
    width: '100%',
    paddingTop:12,
    paddingBottom:12,
    backgroundColor: '#00BCD4',
    borderRadius:7,
  },
   
  TextStyle:{
      color:'#fff',
      textAlign:'center',
      fontSize: 20
  }

});