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)
Is the React Native Get SMS still functional nowadays? What are the parameters, and could you provide me with an example, please?
This code does not work properly when I try it.