How to send a simple "Happy new year" SMS using react-native on Android.
The code of the whole app build here is available at https://github.com/Merlier/rn_example_send_sms
Get started
Requirements:
- react-native >= 0.60
First just init a new react-native project:
$ npx react-native init rn_example_send_sms
Install the react-native-sms module:
$ npm install --save react-native-sms
Then add permissions in android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.READ_SMS" />
<uses-permission android:name="android.permission.WRITE_SMS" />
<uses-permission android:name="android.permission.SEND_SMS" />
We will need the react-native-permissions to access SMS permission through asking the user.
So we 'll install the react-native-permissions module:
$ npm i --save react-native-permissions
Send SMS
To send SMS we will code a "sendSMS" function which will call a "getSMSPermission" function to check and request SMS permissions. Then the "sendSMS" function will use the react-native-get-sms-android module to send sms throught the "autoSend" function.
You just have to modify you app.js like this:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React, {useState} from 'react';
import {
StyleSheet,
SafeAreaView,
View,
Button,
Text,
TextInput,
} from 'react-native';
import {check, request, RESULTS, PERMISSIONS} from 'react-native-permissions';
import SmsAndroid from 'react-native-get-sms-android';
const App: () => React$Node = () => {
const [phoneNumber, setPhoneNumber] = useState('');
const [message, setMessage] = useState('Happy new year!');
const getSMSPermission = async () => {
try {
const checkResult = await check(PERMISSIONS.ANDROID.SEND_SMS);
switch (checkResult) {
case RESULTS.DENIED:
const requestResult = await request(PERMISSIONS.ANDROID.SEND_SMS);
return Promise.resolve(requestResult);
case RESULTS.GRANTED:
return Promise.resolve(checkResult);
default:
return Promise.reject();
}
} catch (err) {
// console.log(err);
}
};
const sendSMS = async () => {
try {
await getSMSPermission();
SmsAndroid.autoSend(
phoneNumber,
message,
(fail) => {
console.log('Failed with this error: ' + fail);
},
(success) => {
console.log('SMS sent successfully');
},
);
} catch (err) {
// console.log(err)
}
};
return (
<SafeAreaView style={styles.container}>
<View style={styles.form}>
<Text style={styles.title}>Send SMS using react-native on Android</Text>
<TextInput
style={styles.textInput}
placeholder={'Phone number'}
onChangeText={setPhoneNumber}
value={phoneNumber}
/>
<TextInput
style={styles.textInput}
placeholder={'Message'}
onChangeText={setMessage}
value={message}
/>
<Button onPress={sendSMS} title="Send SMS" />
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#eee',
},
form: {
padding: 20,
},
title: {
fontSize: 20,
marginBottom: 20,
},
textInput: {
backgroundColor: '#fff',
marginBottom: 5,
},
});
export default App;
Run the app:
$ npx react-native run-android
Have fun
Happy new year!
:)
Top comments (1)