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.
1 |
npm install react-native-sms --save |
Screenshot:
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.
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.
1 |
<uses-permission android:name="android.permission.READ_SMS"/> |
Complete Source Code of My AndroidManifest.xml file after putting permission:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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> |
5. Open your project’s App.js file and Import Alert, StyleSheet, Text, View and TouchableOpacity component.
1 2 3 |
import React, {Component} from 'react'; import { Alert, StyleSheet, Text, View, TouchableOpacity } from 'react-native'; |
6. Import SendSMS from react-native-sms package.
1 |
import SendSMS from 'react-native-sms' |
7. Create our main export default class named as App. This is our main View class.
1 2 3 4 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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> ); } |
10. Creating Style.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
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 } }); |
Screenshots:
Nice tutorial your doing great job i learn everything from reactnativecode
Thanks for supporting us Rahul 🙂 .
welocome sir , support to apne kiya hai. maine ek app bnai hai crmtach useing redux , phle mujhe lgta tha redux bhot hard hai . pr redux easy hai. is se project to ek structure milta jis se code ko reuse kr skte hai or data ko kisi bhi screen me use kr skte hai with using AsyncStorage or global data type , but isme ek problem hai. data ko update krne me thodi preshani hai . componentDidupdate se hi data update hota hai. hmm. redux is nice sir apne redux pr tutorial ni bnaya . please make a tutorial on redux i want to improve redux concept because redux ki bhot demand hai market me or flex ki bhi
Rahul apke suggestion ke liye Thanks :). Aur han Jarur me jald hi Redux pe bhi Tutorial bnauga .
mistake i want change my word without asyncstorage or global variable
thanks sir i am happy.
why it isnt sending when i tried to send multiple recepients
Thanks for telling us Jane, I will check its documentation .
how to send Direct without opening the messenging app?