Send, Read and Delete SMS in React Native
Tags: reactnative, sms
Published: 2020-03-29 17:06:38

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="fbde" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="d534" class="graf graf--p graf-after--figure is-selected">In this tutorial, we are going to implement send, read and delete SMS actions from your mobile device using react-native application. Using these implementations you can send message to someone, you can read particular persons or profiles message by clicking a single button and you can delete a particular message too from your device by implementing some cool functions using react-native-sms and react-native-get-sms-android in our cool react-native application.</p><blockquote name="35aa" class="graf graf--blockquote graf-after--p"><a href="https://github.com/mdshadman/React_Native_Send_Get_Delete_SMS"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial can be found at </em>React_Native_Send_Get_Delete_SMS</strong></a></blockquote><p name="8992" class="graf graf--p graf-after--blockquote">In this tutorial, we will focus on some basic and major parts where many expert developers or juvenile beginners get confused. Hence we will check each and everything in step-by-step as: —</p><ol class="postList"><li name="e344" class="graf graf--li graf-after--p">What and why React Native</li><li name="81ab" class="graf graf--li graf-after--li">How to create react native app</li><li name="db98" class="graf graf--li graf-after--li">What and Why react-native-sms and react-native-get-sms</li><li name="226e" class="graf graf--li graf-after--li">Setup and Implementation</li><li name="38fe" class="graf graf--li graf-after--li">Working example</li></ol><h3 name="8a2d" class="graf graf--h3 graf-after--li">Step 1:&#8202;—&#8202;What and why React&nbsp;Native?</h3><p name="ac06" class="graf graf--p graf-after--h3">React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.</p><p name="3749" class="graf graf--p graf-after--p">Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-Esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, <em class="markup--em markup--p-em">not</em> webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.</p><p name="c0d4" class="graf graf--p graf-after--p">React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this tutorial, we’ll cover firebase phone authentication and CRUD operations. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some anecdota: <a href="http://bit.ly/1YipO7A"  class="markup--anchor markup--p-anchor" rel="noopeneer noopener"    target="_blank">Facebook</a>, <a href="http://bit.ly/1PPEiZH"  class="markup--anchor markup--p-anchor" rel="noopeneer noopener"    target="_blank">Palantir</a>, and <a href="http://bit.ly/1PPEjNg"  class="markup--anchor markup--p-anchor" rel="noopeneer noopener"    target="_blank">TaskRabbit</a> are already using it in production for user-facing applications.<br>The fact that React Native actually renders using its host platform’s standard rendering APIs enables it to stand out from most existing methods of cross-platform application development, like Cordova or Ionic.</p><p name="f12e" class="graf graf--p graf-after--p">Existing methods of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using webviews. While this approach can work, it also comes with drawbacks, especially around performance. Additionally, they do not usually have access to the host platform’s set of native UI elements. When these frameworks do try to mimic native UI elements, the results usually “feel” just a little off; reverse-engineering all the fine details of things like animations takes an enormous amount of effort, and they can quickly become out of date.</p><h3 name="5dcd" class="graf graf--h3 graf-after--p">step 2:&#8202;—&#8202;How to create react native&nbsp;app</h3><p name="58e1" class="graf graf--p graf-after--h3">Keeping in mind everyone I am going to explain about the creation of a new cool react-native project. First, of all, I would like to inform you that the latest react native version at present when I am writing this blog is 0.60.5. And above 0.60 react-native gave us a very convenient and easy facility which is above this version we do not need to run react-native link anymore. Above this version, we get the auto-linking facility in the app for packages.</p><p name="704a" class="graf graf--p graf-after--p">The first step to create a new project is installing react-native CLI if already not present in your device. By executing this command in terminal</p><pre name="221d" class="graf graf--pre graf-after--p">npm install -g react-native-cli</pre><p name="84c7" class="graf graf--p graf-after--pre">After successful CLI installation execute the command</p><pre name="31a2" class="graf graf--pre graf-after--p">react-native init yourProjectNameHere</pre><p name="d663" class="graf graf--p graf-after--pre"><a href="https://facebook.github.io/react-native/docs/getting-started"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">For further steps as android studio setup and SDK installation or environment setpup please follow this link…Click here.</strong></a></p><p name="57af" class="graf graf--p graf-after--p">Now you are all set for boom 🧨 🧨 🧨 boom 🧨 🧨 🧨 🧨…..</p><h3 name="32f8" class="graf graf--h3 graf-after--p">step 3:&#8202;—&#8202;What and Why react-native-sms and react-native-get-sms?</h3><p name="36b3" class="graf graf--p graf-after--h3">Let us make you understand why we need to use react-native-sms and react-native-get-sms. I will try to make you understand in my language as if you are getting irritated with some unwanted service provider’s message or with any one’s message then, in that case, you can just pass that one person or organizations particular id and delete their messages on a single click like the same you can send someone, in particular, a text message from your app by clicking a single button or this is not the last thing you can achieve with this tutorial, you can also read any particular message in your app from your inbox.mail, chat, etc.<br>Here in this tutorial I have integrated and successfully achieved these awesome facilities but you can explore it more and implement much more things according to your need. Hence let’s go and see how we can implement these in very few easy steps.</p><h3 name="f725" class="graf graf--h3 graf-after--p">Step 4:&#8202;—&#8202;Setup and Implementation</h3><p name="bb40" class="graf graf--p graf-after--h3">First of all, install the dependencies by executing this command: —</p><pre name="46de" class="graf graf--pre graf-after--p">npm i react-native-sms<br>Then,<br>npm i react-native-get-sms-android</pre><p name="6a98" class="graf graf--p graf-after--pre">You can only install the second npm package and implement all functionalities but I have used react-native-sms to send sms and react-native-get-sms-android to read and delete sms.<br>Now we need to give some permissions to the application as: —</p><h4 name="1a7b" class="graf graf--h4 graf-after--p">Android Permissions</h4><p name="ad34" class="graf graf--p graf-after--h4">Add permissions to your <code class="markup--code markup--p-code">android/app/src/main/AndroidManifest.xml</code> file.</p><pre name="b986" class="graf graf--pre graf-after--p">...<br>&lt;uses-permission android:name="android.permission.READ_SMS" /&gt;<br>&lt;uses-permission android:name="android.permission.WRITE_SMS" /&gt;<br>&lt;uses-permission android:name="android.permission.SEND_SMS" /&gt;<br>...</pre><p name="ccb5" class="graf graf--p graf-after--pre">then,</p><p name="7ee1" class="graf graf--p graf-after--p">In MainActivity.java <em class="markup--em markup--p-em">copy and paste these on their defined places</em></p><pre name="0ae2" class="graf graf--pre graf-after--p">import com.react.SmsPackage;<br>import com.tkporter.sendsms.SendSMSPackage;<br><a href="http://twitter.com/Override"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @Override"    target="_blank">@Override</a><br>public void onActivityResult(int requestCode, int resultCode, Intent data)<br>{<br>super.onActivityResult(requestCode, resultCode, data);<br>//probably some other stuff here<br>SendSMSPackage.getInstance().onActivityResult(requestCode, resultCode, data);<br>}</pre><p name="da60" class="graf graf--p graf-after--pre">And in <em class="markup--em markup--p-em">MainApplication.java import these lines</em></p><pre name="a56c" class="graf graf--pre graf-after--p">import com.tkporter.sendsms.SendSMSPackage;<br>import com.react.SmsPackage;</pre><p name="a913" class="graf graf--p graf-after--pre">For common issues, you can visit these links.<br>1. <a href="https://www.npmjs.com/package/react-native-get-sms-android"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://www.npmjs.com/package/react-native-get-sms-android</a><br>2. <a href="https://www.npmjs.com/package/react-native-sms"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://www.npmjs.com/package/react-native-sms</a></p><p name="b4c1" class="graf graf--p graf-after--p">We are all set to achieve the final result but before that let us make some interactive UI for the application.<br>View Logics: —</p><figure tabindex="0" contenteditable="false" name="2776" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/mdshadman/c0d8a7a6635ec5c3588d194304975ff3.js %}</div></div></figure><p name="9ab4" class="graf graf--p graf-after--figure">View Result Is: —</p><figure tabindex="0" contenteditable="false" name="7b61" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*FseQEhzGIBCpLgCAQ2RdUQ.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*FseQEhzGIBCpLgCAQ2RdUQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Click for&nbsp;actions</figcaption></figure><figure tabindex="0" contenteditable="false" name="a4f3" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*eVUpwGFbhqbuxPTKMFru1g.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*eVUpwGFbhqbuxPTKMFru1g.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Permissions required</figcaption></figure><figure tabindex="0" contenteditable="false" name="684d" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*HT5HmbWPYzfw4E0j0VJdQw.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*HT5HmbWPYzfw4E0j0VJdQw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Reading data of particular Id</figcaption></figure><p name="46b1" class="graf graf--p graf-after--figure">We have three buttons on the card as:-</p><p name="84ed" class="graf graf--p graf-after--p">Send SMS → Click to send SMS to a particular contact.</p><p name="18c8" class="graf graf--p graf-after--p">Read SMS → Click to read the message by passing the id of the message.</p><p name="b258" class="graf graf--p graf-after--p">Delete SMS → Click to delete an SMS by passing the id of the message.</p><p name="1176" class="graf graf--p graf-after--p">Now let's implement the logic part: —</p><figure tabindex="0" contenteditable="false" name="418e" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/mdshadman/510e4396577351b5e88ae98be88d25c3.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Complete logic for Send, Read and Delete SMS</figcaption></figure><p name="13ef" class="graf graf--p graf-after--figure">Here we have different options to set as actions during reading an SMS as:-</p><pre name="10a4" class="graf graf--pre graf-after--p">var filter = {<br>box: 'inbox', // 'inbox' (default), 'sent', 'draft', 'outbox', 'failed', 'queued', and '' for all<br>// the next 4 filters should NOT be used together, they are OR-ed so pick one<br>read: 0, // 0 for unread SMS, 1 for SMS already read<br>_id: 1234, // specify the msg id<br>address: '+1888------', // sender's phone number<br>body: 'How are you', // content to match<br>// the next 2 filters can be used for pagination<br>indexFrom: 0, // start from index 0<br>maxCount: 10, // count of SMS to return each time<br>};<br>/*<br>Each sms will be represents by a JSON object represented below<br>{<br>"_id": 1234,<br>"thread_id": 3,<br>"address": "2900",<br>"person": -1,<br>"date": 1365053816196,<br>"date_sent": 0,<br>"protocol": 0,<br>"read": 1,<br>"status": -1,<br>"type": 1,<br>"body": "Hello There, I am an SMS",<br>"service_center": "+60162999922",<br>"locked": 0,<br>"error_code": -1,<br>"sub_id": -1,<br>"seen": 1,<br>"deletable": 0,<br>"sim_slot": 0,<br>"hidden": 0,<br>"app_id": 0,<br>"msg_id": 0,<br>"reserved": 0,<br>"pri": 0,<br>"teleservice_id": 0,<br>"svc_cmd": 0,<br>"roam_pending": 0,<br>"spam_report": 0,<br>"secret_mode": 0,<br>"safe_message": 0,<br>"favorite": 0<br>}<br>*/</pre><p name="a857" class="graf graf--p graf-after--pre">Now if you have followed each step and completed all the phases then you are all set to check out the output or you can just clone the repo and start from there.</p><blockquote name="468f" class="graf graf--blockquote graf-after--p"><a href="https://github.com/mdshadman/React_Native_Send_Get_Delete_SMS"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial can be found at </em>React_Native_Send_Get_Delete_SMS</strong></a><strong class="markup--strong markup--blockquote-strong">.</strong></blockquote><h3 name="fb12" class="graf graf--h3 graf-after--blockquote">Conclusion</h3><p name="1b1f" class="graf graf--p graf-after--h3">In this blog, you learned how to send read and delete an SMS from your device in the React Native apps for Android. You also learned how to integrate react-native-sms and react-native-get-sms in the react-native application. We also built the app in Android and ran on a device.</p><h3 name="152c" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="6ea4" class="graf graf--p graf-after--h3">Now that you have learned how to send read and delete an SMS from your device in React Native apps for Android, here are some other topics you can look into</p><ul class="postList"><li name="9a64" class="graf graf--li graf-after--p">Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/intergrate-firebase-in-react-native-app/73"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Integrate Firebase</a> | <a href="https://enappd.com/blog/firebase-analytics-in-react-native-app/101"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Analytics</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Push notifications</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Firebase CRUD</a></li><li name="ce44" class="graf graf--li graf-after--li">How To in React Native&#8202;—&#8202;<a href="https://enappd.com/blog/geolocation-geocoding-react-native-apps/84"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Life cycle hooks</a> | <a href="https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Redux implementation</a> | <a href="https://enappd.com/blog/how-to-make-api-calls-in-react-native-apps/125"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Make API calls</a> | <a href="https://enappd.com/blog/navigations-in-react-native-app/124"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Navigation</a> | <a href="https://enappd.com/blog/how-to-translate-in-react-native-app-globalization-internationalization-and-text-to-speech/120"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translation</a> | <a href="https://enappd.com/blog/react-native-qr-code-scanning-using-react-native-camera/117"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Barcode &amp; QR code scan</a> | <a href="https://enappd.com/blog/google-vision-with-react-native/96"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Vision</a></li><li name="e480" class="graf graf--li graf-after--li">Payments&#8202;—&#8202;<a href="https://enappd.com/blog/implement-apple-pay-in-react-native-apps/93"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/stripe-integration-in-react-native-apps-using-firebase/108"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe payments</a></li><li name="4d3b" class="graf graf--li graf-after--li">Authentication&#8202;—&#8202;<a href="https://enappd.com/blog/google-login-in-react-native-android-apps-with-firebase/90"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Google Login</a>| <a href="https://enappd.com/blog/facebook-login-in-react-native-apps/89"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Facebook login</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Phone Auth</a> | <a href="https://enappd.com/blog/twitter-login-in-react-native-apps-using-firebase/95"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login</a> | <a href="https://enappd.com/blog/anonymous-login-in-react-native-apps-with-firebase/129"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous Login</a></li><li name="2ccd" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-make-stories-ui-like-instagram-and-whatsapp-in-react-native/123"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create Instagram / Whatsapp Story Feature in React Native</a></li><li name="01c3" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">React Native life cycle hooks</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Implement Redux</a> | <a href="https://enappd.com/blog/async-actions-with-redux-thunk-middleware-in-react-native-apps-1/100"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Async actions with Redux</a></li><li name="8271" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/guide-on-react-native-full-app/53"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Create Awesome Apps in React Native</a> using Full App</li></ul><figure tabindex="0" contenteditable="false" name="b26f" class="graf graf--figure is-defaultValue graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="0*n0EmkGqdrCykIp3T.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/800/0*n0EmkGqdrCykIp3T.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="a839" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>