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.

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.

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.

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

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

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

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

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.

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

10. Creating Style.

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

Screenshots:

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