Firebase Push notifications in React Native Apps
Tags: reactnative, firebase, notification, messaging
Published: 2020-03-26 17:29:11

<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="6b3d" 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="8b67" class="graf graf--p graf-after--figure">In this post, we’ll learn how to setup <strong class="markup--strong markup--p-strong">Push notification in React Native apps using Firebase</strong>. We’ll <a href="https://enappd.com/blog/sending-push-using-firebase-console/35"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">send notification using Firebase console</a> and receive them in the app. We will also learn how to handle push notifications in your React Native apps. By <em class="markup--em markup--p-em">handling</em>, I mean how to access the data sent via the notification inside your app, and wake your app up if it is asleep or closed.</p><p name="6d37" class="graf graf--p graf-after--p">Because all this can get reallllly long, I’ll limit the discussion to Android apps alone. I will post another blog for push in iOS apps in React Native. (Really, the major difference is in setting up the push certificates for iOS app, that’s all)</p><blockquote name="d7fb" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available here&#8202;—&#8202;</em></strong><a href="https://github.com/enappd/react-native-push-example"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">React-Native-Push-Example</em></strong></a></blockquote><h3 name="029c" class="graf graf--h3 graf-after--blockquote">What are Push Notifications</h3><p name="7a36" class="graf graf--p graf-after--h3">How do you know when you get a new message on Whatsapp, Facebook or Twitter, if the app is closed, or even when it is open? Yes, those small messages that pop down from the top of the screen like banners, showing new messages, updates or news are called <strong class="markup--strong markup--p-strong">Push notifications</strong> (or simply Push)</p><figure tabindex="0" contenteditable="false" name="bd34" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*9_TQhgUm16ISGuqQkAcoSQ.gif" data-width="600" data-height="600" src="https://cdn-images-1.medium.com/max/600/1*9_TQhgUm16ISGuqQkAcoSQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Yes, those&nbsp;…… are push notifications</figcaption></figure><p name="05ce" class="graf graf--p graf-after--figure">One might wonder why to integrate Push notifications in an app. Following are the major reasons to use Push in your apps</p><ol class="postList"><li name="929a" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Stimulate user engagement</strong> with real time updates and reminders</li><li name="30de" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Re-engage/retain users</strong>&#8202;—&#8202;to activate those users who don’t use the app often</li><li name="b047" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Increase conversion rates</strong>&#8202;—&#8202;To convert users at the right time, as per your marketing campaigns</li><li name="d3c5" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Target the right users</strong>&#8202;—&#8202;By sending time-specific, location specific or even user specific messages/offers/reminders to users</li><li name="9ddb" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Track actionable metrics</strong>&#8202;—&#8202;by tracking users’ response to different types of reminders / offers</li><li name="591a" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Enhance brand consistency</strong> by sending brand’s logo inside push at regular intervals, depending on your marketing campaigns</li><li name="9af1" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Improve your customer care strategy with useful content&#8202;</strong>—&#8202;to help users keep up with the latest updates, promotions, and offers inside the app</li><li name="62b4" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Reduce efforts in the customer journey</strong>- by using deep links in push messages that direct users to a certain place in your app</li></ol><p name="9951" class="graf graf--p graf-after--li">You can read more details of this in <a href="https://rubygarage.org/blog/benefits-of-push-notifications"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">rubygarage blog</a></p><h3 name="a748" class="graf graf--h3 graf-after--p">What is React-Native</h3><p name="7b18" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">TLDR;</strong>&#8202;—&#8202;React Native (RN) apps are more “native” than webview apps made by Cordova / Ionic. But React Native is yet to release a stable (1.0.0_) version of the framework.</p><p name="e21e" class="graf graf--p graf-after--p">React Native is a JavaScript framework for writing natively rendering mobile applications. It’ is based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. 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="5626" class="graf graf--p graf-after--p">React Native applications render using real mobile UI components, <em class="markup--em markup--p-em">not</em> webviews, and will look and feel like any other native 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. <a href="http://bit.ly/1YipO7A"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Facebook</a>, <a href="http://bit.ly/1PPEiZH"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Palantir</a>, <a href="http://bit.ly/1PPEjNg"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">TaskRabbit</a> etc are already using it in production for user-facing applications.</p><h3 name="5915" class="graf graf--h3 graf-after--p">Firebase</h3><p name="01f0" class="graf graf--p graf-after--h3">Firebase is a Backend-as-a-Service (BaaS) platform. It started as a <a href="http://blog.ycombinator.com/firebase-yc-s11-raises-5-dollars-dot-6m-series-a-from-union-square-ventures-and-flybridge"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">YC11 startup</a> and grew up into a next-generation app-development platform on Google Cloud Platform. It is getting popular by the day because of the ease of integration and variety of functionalities available on it.</p><p name="ffb1" class="graf graf--p graf-after--p">Some of the quick integrations available with Firebase are</p><ul class="postList"><li name="ea04" class="graf graf--li graf-after--p">Email Authentication</li><li name="9a39" class="graf graf--li graf-after--li">Social logins</li><li name="3453" class="graf graf--li graf-after--li">Real-time database</li><li name="196a" class="graf graf--li graf-after--li">Analytics</li><li name="c42f" class="graf graf--li graf-after--li">Crashlytics</li><li name="3f0f" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Push notifications ⬅️</strong></li><li name="fe08" class="graf graf--li graf-after--li">In-app messages</li><li name="a7e6" class="graf graf--li graf-after--li">Remote config</li></ul><p name="074f" class="graf graf--p graf-after--li">and much more. Firebase is quickly growing to become the most popular mobile app back-end platform.</p><p name="b728" class="graf graf--p graf-after--p">Enough of story-telling, let’s dive into&#8202;—&#8202;How to implement Push notification in React Native apps</p><h3 name="c04a" class="graf graf--h3 graf-after--p">Structure</h3><p name="50b1" class="graf graf--p graf-after--h3">I will go ahead in step-by-step fashion so you can follow easily.</p><ol class="postList"><li name="37f5" class="graf graf--li graf-after--p">Create a Firebase project and find Push options</li><li name="9cef" class="graf graf--li graf-after--li">Create a basic React Native app</li><li name="9138" class="graf graf--li graf-after--li">Install Push notification dependency</li><li name="dec2" class="graf graf--li graf-after--li">Build the app on Android</li><li name="6d67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/sending-push-using-firebase-console/35"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Send notifications from Firebase console</a></li><li name="b444" class="graf graf--li graf-after--li">Handle different type of Push notifications in your app</li></ol><h3 name="9886" class="graf graf--h3 graf-after--li">1. Create a Firebase project and find Push&nbsp;options</h3><p name="be22" class="graf graf--p graf-after--h3">Go to <a href="https://console.firebase.google.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Firebase</a> and create your first project (or use an existing one). Your console should look like this</p><figure tabindex="0" contenteditable="false" name="f144" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 312px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.6%;"></div><img class="graf-image" data-image-id="1*Q1tzpM83Uq66TNZ9E28nYA.png" data-width="800" data-height="357" src="https://cdn-images-1.medium.com/max/600/1*Q1tzpM83Uq66TNZ9E28nYA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Your Firebase projects all in one&nbsp;place</figcaption></figure><p name="0358" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Note</strong>&#8202;—&#8202;It’s really easy to create a Firebase project, but if you still face any issue, follow step 1–4 of <a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">this blog</a></p><p name="8711" class="graf graf--p graf-after--p">Click on your project and you’ll enter the project’s dashboard. Look for <strong class="markup--strong markup--p-strong">Cloud Messaging</strong> tab. This is where the magic will happen&nbsp;!</p><figure tabindex="0" contenteditable="false" name="b5d9" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 387px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.300000000000004%;"></div><img class="graf-image" data-image-id="1*BBLOAdiHBI_PngzQdVS-BQ.png" data-width="1388" data-height="768" src="https://cdn-images-1.medium.com/max/600/1*BBLOAdiHBI_PngzQdVS-BQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Cloud messaging section of Firebase console&#8202;—&#8202;You can send push notifications from&nbsp;here</figcaption></figure><h4 name="9722" class="graf graf--h4 graf-after--figure">Push Notifications Settings</h4><p name="0c48" class="graf graf--p graf-after--h4">Firebase console also contains push notifications settings for web, android and iOS. Here you can find your <strong class="markup--strong markup--p-strong">sender_id, </strong>upload iOS push certificates etc. For setting up options, you’ll first have to create an Android app in Firebase console.</p><figure tabindex="0" contenteditable="false" name="0d4e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 217px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 31%;"></div><img class="graf-image" data-image-id="1*kZaRFHlVlWW03I_2XC6F5g.png" data-width="1389" data-height="430" src="https://cdn-images-1.medium.com/max/600/1*kZaRFHlVlWW03I_2XC6F5g.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add a new Android app in&nbsp;Firebase</figcaption></figure><p name="46d8" class="graf graf--p graf-after--figure">During the process, it will ask you to enter app’s <strong class="markup--strong markup--p-strong">package name</strong> and provide <strong class="markup--strong markup--p-strong">google-services.json. </strong>Make sure you keep the package name unique and consistent. (If we create a new project called “<strong class="markup--strong markup--p-strong">HelloWorld</strong>” using react native CLI, by default package name for android project will be “<strong class="markup--strong markup--p-strong">com.helloworld</strong>” and default bundle identifier for iOS app will be “<strong class="markup--strong markup--p-strong">org.reactjs.native.example.HelloWorld</strong>”., don’t use the default package name)</p><figure tabindex="0" contenteditable="false" name="ac2a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 350px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 50%;"></div><img class="graf-image" data-image-id="1*rtd51fTn_frvjGxUEkhiow.png" data-width="1390" data-height="695" src="https://cdn-images-1.medium.com/max/600/1*rtd51fTn_frvjGxUEkhiow.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Download google-services.json</figcaption></figure><h3 name="c000" class="graf graf--h3 graf-after--figure">2. Create a basic React Native&nbsp;app</h3><p name="f682" class="graf graf--p graf-after--h3">First, make sure you have all pre-requisites to create a react-native app as per the <a href="https://facebook.github.io/react-native/docs/getting-started.html"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">official documentation</a>.</p><blockquote name="cc11" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">At the time of this post, I have React-Native version 0.60</strong></blockquote><p name="2507" class="graf graf--p graf-after--blockquote">Create a blank react-native app (Replace <code class="markup--code markup--p-code">myApp</code> with your own name)</p><pre name="2cb3" class="graf graf--pre graf-after--p">$ react-native init myApp</pre><p name="c53e" class="graf graf--p graf-after--pre">This will create a basic React-native app which you can run in a device or simulator. (either Android or iOS)</p><p name="24eb" class="graf graf--p graf-after--p">Let’s run the app in Android using</p><pre name="4f57" class="graf graf--pre graf-after--p">$ react-native run-android</pre><p name="6729" class="graf graf--p graf-after--pre">You’ll see the default start screen</p><figure tabindex="0" contenteditable="false" name="c76c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*TnZfGsKdsWGBUac-0YutpA.jpeg" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/600/1*TnZfGsKdsWGBUac-0YutpA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Default start screen for React Native&nbsp;app</figcaption></figure><p name="8373" class="graf graf--p graf-after--figure">Change the UI of this front page by changing <code class="markup--code markup--p-code">app.js</code> and the page will look like this</p><figure tabindex="0" contenteditable="false" name="583f" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*Eogq-qRNrN7ka_XCBNpHXg.jpeg" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/600/1*Eogq-qRNrN7ka_XCBNpHXg.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="2155" class="graf graf--p graf-after--figure">We’ll update this list with Push Notification content as we receive them. I’m not using any native storage etc. so the list will refresh on each app restart.</p><h3 name="88bc" class="graf graf--h3 graf-after--p">3. Install Push notification dependency</h3><p name="9f24" class="graf graf--p graf-after--h3">There are two major dependency / plugin you can use to implement push notifications</p><ol class="postList"><li name="088e" class="graf graf--li graf-after--p"><a href="https://github.com/zo0r/react-native-push-notification"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">react-native-push-notification</a></li><li name="0781" class="graf graf--li graf-after--li"><a href="https://rnfirebase.io/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">react-native-firebase</a></li></ol><p name="c750" class="graf graf--p graf-after--li">react-native-firebase is a major plugin that can implement almost all Firebase functionalities in react-native. But for this tutorial, we’ll use <strong class="markup--strong markup--p-strong">react-native-push-notification</strong> plugin, which is made only for Push Notification purpose.</p><p name="35ba" class="graf graf--p graf-after--p">Install the dependency using</p><pre name="ff5a" class="graf graf--pre graf-after--p">$ npm install --save react-native-push-notification</pre><p name="44a5" class="graf graf--p graf-after--pre is-selected">Since I am using react-native 0.60, I don’t need to manually link dependencies. This is automatically done while building app for a platform.</p><p name="3ce9" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Important:</strong> Follow the setup steps for this plugin very carefully. These may change slightly with time, but majority steps will remain common and you’ll know where to correct things if you face any error. At present, I am working with RN-0.60.4, react-16.8.6, and Android-28.</p><h4 name="a7af" class="graf graf--h4 graf-after--p">1. Edit android/build.gradle</h4><p name="fecf" class="graf graf--p graf-after--h4">In your <code class="markup--code markup--p-code">android/build.gradle</code>&nbsp;, edit the <code class="markup--code markup--p-code">googlePlayServicesVersion</code> and <code class="markup--code markup--p-code">firebaseVersion</code>&nbsp;. Following are the values in my (working) setup</p><pre name="475d" class="graf graf--pre graf-after--p">ext {    <br>buildToolsVersion = "28.0.3"<br>minSdkVersion = 16<br>compileSdkVersion = 28<br>targetSdkVersion = 28<br>supportLibVersion = "28.0.0"<br>googlePlayServicesVersion = "16.1.0" // default: "+"<br>firebaseVersion = "17.3.4" // default: "+"<br>}</pre><h4 name="bfab" class="graf graf--h4 graf-after--pre">2. Edit AndroidManifest.xml</h4><p name="c0f7" class="graf graf--p graf-after--h4">In your <code class="markup--code markup--p-code">AndroidManifest.xml</code>&nbsp;, add following before <code class="markup--code markup--p-code">&lt;application</code></p><figure tabindex="0" contenteditable="false" name="e1c1" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/a5a287dc6c0d4587e74414d9c7ff790e.js %}</div></div></figure><p name="ca9b" class="graf graf--p graf-after--figure">and add these inside <code class="markup--code markup--p-code">&lt;application</code> tag</p><figure tabindex="0" contenteditable="false" name="d96e" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/8142e6b8aa733907aafa1e8aeeba9283.js %}</div></div></figure><p name="16ad" class="graf graf--p graf-after--figure">Be careful while copy-pasting these values. Don’t disturb other values in the XML file.</p><h4 name="da93" class="graf graf--h4 graf-after--p">3. Edit android/settings.gradle</h4><p name="349c" class="graf graf--p graf-after--h4">In <code class="markup--code markup--p-code">android/settings.gradle</code>&nbsp;, add</p><pre name="cb14" class="graf graf--pre graf-after--p">...<br>include ':react-native-push-notification'<br>project(':react-native-push-notification').projectDir = file('../node_modules/react-native-push-notification/android')</pre><h4 name="7708" class="graf graf--h4 graf-after--pre">4. Create a Color&nbsp;resource</h4><p name="3f63" class="graf graf--p graf-after--h4">In step 3.2 above, we called for a <code class="markup--code markup--p-code">white</code> color as the notification_color. If that does not exist in your project, create it. You can also change this to any color you want. Create the <code class="markup--code markup--p-code">android/app/src/res/values/colors.xml</code> file if it does not exist</p><pre name="bea4" class="graf graf--pre graf-after--p">&lt;resources&gt;<br>    &lt;color name="white"&gt;#FFF&lt;/color&gt;<br>&lt;/resources&gt;</pre><h4 name="19bf" class="graf graf--h4 graf-after--pre">5. Implement push functionality in your&nbsp;app</h4><p name="c06e" class="graf graf--p graf-after--h4">To implement push, we need to call <code class="markup--code markup--p-code">PushNotification.configure</code> at our app start. This command initializes the push functionality in the app. I will create a separate file for this <code class="markup--code markup--p-code">PushController.js</code>, and import it in <code class="markup--code markup--p-code">App.js</code></p><figure tabindex="0" contenteditable="false" name="c357" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/e8aab3ce2baa0b4bb7e71f76067033c5.js %}</div></div></figure><p name="3dee" class="graf graf--p graf-after--figure">There are quite a few things going on here</p><ul class="postList"><li name="1598" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">onRegister</strong>&#8202;—&#8202;is called when the application registers itself on Push server and obtains a token. It works both in iOS and Android.</li><li name="637e" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">onNotification</strong>&#8202;—&#8202;is actually the heart of the functionality. This is called when a push is received and tapped. This method also receives the whole notification data, which is printed in the code above.</li><li name="ba3c" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">senderID</strong>&#8202;—&#8202;is the cloud messaging sender ID from Firebase console</li></ul><figure tabindex="0" contenteditable="false" name="15f8" class="graf graf--figure graf-after--li is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 294px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 42%;"></div><img class="graf-image" data-image-id="1*lwSDWmiaP7PAgky25tO3lw.png" data-width="1073" data-height="451" src="https://cdn-images-1.medium.com/max/600/1*lwSDWmiaP7PAgky25tO3lw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><ul class="postList"><li name="5088" class="graf graf--li graf-after--figure"><strong class="markup--strong markup--li-strong">permissions</strong>&#8202;—&#8202;allows certain permissions in iOS</li></ul><p name="d95e" class="graf graf--p graf-after--li">In short, when your app starts, we’ll register the app and receive a token as a proof of registration. Also, when notification is received, we’ll receive the data via <strong class="markup--strong markup--p-strong">onNotification</strong> method.</p><p name="75eb" class="graf graf--p graf-after--p">Import this file in <code class="markup--code markup--p-code">App.js</code> and include it in the code. Since it is returning <code class="markup--code markup--p-code">null</code>&nbsp;, it won’t affect the layout. The <code class="markup--code markup--p-code">App.js</code> will look like this</p><figure tabindex="0" contenteditable="false" name="f83a" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/2593422b2a48bf32913dbd7ce8337539.js %}</div></div></figure><p name="bd4e" class="graf graf--p graf-after--figure">This implements push functionality in the app. Now we’ll build this app for Android and test.</p><h3 name="8c42" class="graf graf--h3 graf-after--p">4. Build the app on&nbsp;Android</h3><p name="a97b" class="graf graf--p graf-after--h3">Building on android is fairly easy. Make sure you have all pre-requisites to build a react-native app as per the <a href="https://facebook.github.io/react-native/docs/getting-started.html"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">official documentation</a>. For push notification testing, we’ll need to build the app on a physical device. My current Android Studio version is 3.4.0 with Android 28.</p><p name="ec62" class="graf graf--p graf-after--p">Build the app for android using</p><pre name="4228" class="graf graf--pre graf-after--p">$ react-native run-android</pre><p name="2b09" class="graf graf--p graf-after--pre">This will build and run the app on your connected device. If you face any issue during build, check for the errors in this <a href="https://github.com/zo0r/react-native-push-notification/blob/master/trouble-shooting.md"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">troubleshooting guide</a> for the plugin, or comment below the post. I’ll try my best to respond quickly.</p><h3 name="e1fe" class="graf graf--h3 graf-after--p">5. Send notifications from Firebase&nbsp;console</h3><p name="d880" class="graf graf--p graf-after--h3">Prepare a simple push notification from Firebase console and send it to all connected devices (which should ideally be only your test device), or send it using the token you receive in debugger. The token looks like this</p><figure tabindex="0" contenteditable="false" name="9895" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 71px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 10.100000000000001%;"></div><img class="graf-image" data-image-id="1*uxi0ICV7-Qip_rffDOCohg.png" data-width="1007" data-height="102" src="https://cdn-images-1.medium.com/max/600/1*uxi0ICV7-Qip_rffDOCohg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Push notification token in react-native debugger</figcaption></figure><p name="d291" class="graf graf--p graf-after--figure">Follow the steps in my blog&#8202;—&#8202;<a href="https://enappd.com/blog/sending-push-using-firebase-console/35"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Complete guide on sending Push using Firebase Cloud Messaging Console</a> to send notification.</p><figure tabindex="0" contenteditable="false" name="e351" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 411px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 58.8%;"></div><img class="graf-image" data-image-id="1*6HCQevyC_72S59MqxcIXJQ.png" data-width="1070" data-height="629" src="https://cdn-images-1.medium.com/max/600/1*6HCQevyC_72S59MqxcIXJQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Sending test push from Firebase&nbsp;console</figcaption></figure><p name="664c" class="graf graf--p graf-after--figure">Keep you app in any of these states</p><ul class="postList"><li name="a44b" class="graf graf--li graf-after--p">Foreground</li><li name="f232" class="graf graf--li graf-after--li">Minimize (background)</li><li name="e178" class="graf graf--li graf-after--li">Killed (closed)</li></ul><p name="4521" class="graf graf--p graf-after--li">You will receive the notification with a default icon, title and message, as I received like following</p><h4 name="c241" class="graf graf--h4 graf-after--p">In Open&nbsp;App</h4><figure tabindex="0" contenteditable="false" name="ec50" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*oXb4DK3Z6ljKsDliJrr4hg.gif" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/600/1*oXb4DK3Z6ljKsDliJrr4hg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Receiving push in foreground app</figcaption></figure><p name="b94d" class="graf graf--p graf-after--figure">Yayyy&nbsp;! We have successfully implemented push notification in a react-native app 🎉 🎉 🎉</p><h4 name="6d89" class="graf graf--h4 graf-after--p">In Closed&nbsp;App</h4><figure tabindex="0" contenteditable="false" name="be30" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 636px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 181.7%;"></div><img class="graf-image" data-image-id="1*ddaK6Mw2y1QXeI1sg6XEWg.gif" data-width="350" data-height="636" src="https://cdn-images-1.medium.com/max/600/1*ddaK6Mw2y1QXeI1sg6XEWg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Receiving push in closed&nbsp;app</figcaption></figure><h4 name="03ef" class="graf graf--h4 graf-after--figure">In minimized app (background)</h4><figure tabindex="0" contenteditable="false" name="fa26" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 636px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 181.7%;"></div><img class="graf-image" data-image-id="1*GUkPDXNXRimTXiCnxpa-2A.gif" data-width="350" data-height="636" src="https://cdn-images-1.medium.com/max/600/1*GUkPDXNXRimTXiCnxpa-2A.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Receiving push in minimized app</figcaption></figure><h3 name="0422" class="graf graf--h3 graf-after--figure">6. Handle different type of Push notifications</h3><p name="68d1" class="graf graf--p graf-after--h3">In last section, we saw a notification received in open, closed and minimized app. Let’s see how to receive data from these notification and populate our list.</p><h4 name="d964" class="graf graf--h4 graf-after--p">For foreground app</h4><p name="9f26" class="graf graf--p graf-after--h4">We can check the push data format in debugger. E.g. this is a notification received in foreground app</p><figure tabindex="0" contenteditable="false" name="53a9" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 129px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 18.4%;"></div><img class="graf-image" data-image-id="1*qx-fUoDops8wm-RisxCorw.png" data-width="1006" data-height="185" src="https://cdn-images-1.medium.com/max/600/1*qx-fUoDops8wm-RisxCorw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="c189" class="graf graf--p graf-after--figure">You can see we receive all the required data in the notification object, namely&#8202;—&#8202;id, title, message, userInteraction and extra data sent as key-value pair</p><p name="20c6" class="graf graf--p graf-after--p">We can use this data to populate the list we have. <em class="markup--em markup--p-em">In a practical application, you can do a lot of stuff using these data values.</em></p><blockquote name="f4e8" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">I have modified the </strong><code class="markup--code markup--blockquote-code"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">App.js</em></strong></code><strong class="markup--strong markup--blockquote-strong"> and </strong><code class="markup--code markup--blockquote-code"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">PushController.js</em></strong></code><strong class="markup--strong markup--blockquote-strong"> files a bit to accept incoming push notification data. Please check the </strong><a href="https://github.com/enappd/react-native-push-example"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Github repo</strong></a><strong class="markup--strong markup--blockquote-strong"> if you are stuck</strong></blockquote><p name="8085" class="graf graf--p graf-after--blockquote">Essentially I am storing the list items’ data in <code class="markup--code markup--p-code">this.state.pushData</code> and updating it as we receive push.</p><figure tabindex="0" contenteditable="false" name="b358" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*WAzyNAGZr-SrVvBlTTSHwQ.gif" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/600/1*WAzyNAGZr-SrVvBlTTSHwQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Updating App with data received in&nbsp;Push</figcaption></figure><p name="0517" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Note</strong>: Push notification data in Foreground is available as soon as the push arrives. If you tap the notification again, the data will come to the app again. This can lead to duplication.</p><h4 name="9e66" class="graf graf--h4 graf-after--p">For close and background app</h4><p name="53b9" class="graf graf--p graf-after--h4">When the app is closed or in background, the data received is in slightly different format. We don’t receive the <code class="markup--code markup--p-code">title</code> and <code class="markup--code markup--p-code">message</code> fields of the notification, but we do receive all the custom key-value pairs sent with the notification.</p><figure tabindex="0" contenteditable="false" name="2203" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 165px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 23.599999999999998%;"></div><img class="graf-image" data-image-id="1*4B5GPB6pNbiDQ1Z_14-E1Q.png" data-width="1001" data-height="236" src="https://cdn-images-1.medium.com/max/600/1*4B5GPB6pNbiDQ1Z_14-E1Q.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="bc34" class="graf graf--p graf-after--figure">Hence, it is advised to send the <code class="markup--code markup--p-code">title</code> and <code class="markup--code markup--p-code">message</code> data once again in key-value pairs, and use that data in the app, instead of actual <code class="markup--code markup--p-code">title</code> and <code class="markup--code markup--p-code">message</code>&nbsp;. This is because we don’t know the app state when the data is received.</p><figure tabindex="0" contenteditable="false" name="5d05" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 390px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.800000000000004%;"></div><img class="graf-image" data-image-id="1*CLkQ5Ji_IPpMPbBv4qpP2Q.png" data-width="990" data-height="552" src="https://cdn-images-1.medium.com/max/600/1*CLkQ5Ji_IPpMPbBv4qpP2Q.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Sending the title and message as key-value pairs, if these are required in the&nbsp;app</figcaption></figure><h3 name="9925" class="graf graf--h3 graf-after--figure">Extra 🏆🏆🏆</h3><h4 name="a044" class="graf graf--h4 graf-after--h3"><strong class="markup--strong markup--h4-strong">Set application badge&nbsp;icon</strong></h4><p name="46b0" class="graf graf--p graf-after--h4"><code class="markup--code markup--p-code">PushNotification.setApplicationIconBadgeNumber(number: number)</code></p><p name="5898" class="graf graf--p graf-after--p">Works natively in iOS. Uses the <a href="https://github.com/leolin310148/ShortcutBadger"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">ShortcutBadger</a> on Android, and as such will not work on all Android devices.</p><h4 name="d3f5" class="graf graf--h4 graf-after--p">Sending Notification Data From&nbsp;Server</h4><p name="b997" class="graf graf--p graf-after--h4">Same parameters as <code class="markup--code markup--p-code">PushNotification.localNotification()</code></p><h4 name="0804" class="graf graf--h4 graf-after--p">Android Only&nbsp;Methods</h4><p name="06c7" class="graf graf--p graf-after--h4"><code class="markup--code markup--p-code">PushNotification.subscribeToTopic(topic: string)</code> Subscribe to a topic (works only with Firebase)</p><h4 name="703d" class="graf graf--h4 graf-after--p">Checking Notification Permissions</h4><p name="eae7" class="graf graf--p graf-after--h4"><code class="markup--code markup--p-code">PushNotification.checkPermissions(callback: Function)</code> Check permissions<code class="markup--code markup--p-code">callback</code> will be invoked with a <code class="markup--code markup--p-code">permissions</code> object:</p><ul class="postList"><li name="fc64" class="graf graf--li graf-after--p"><code class="markup--code markup--li-code">alert</code>: boolean</li><li name="4a23" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">badge</code>: boolean</li><li name="c0d5" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">sound</code>: boolean</li></ul><h4 name="aa3a" class="graf graf--h4 graf-after--li">iOS Only&nbsp;Methods</h4><p name="593d" class="graf graf--p graf-after--h4"><code class="markup--code markup--p-code">PushNotification.getApplicationIconBadgeNumber(callback: Function)</code> Get badge number</p><p name="6c6d" class="graf graf--p graf-after--p">All these details can be studied better in the <a href="https://github.com/zo0r/react-native-push-notification"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">plugin’s Github repo</a>.</p><h3 name="522b" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="f332" class="graf graf--p graf-after--h3">In this post, we learnt how to implement Push notifications using Firebase in React native apps. We also learnt how to handle different types of push and use their data in the app.</p><blockquote name="fe81" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available here&#8202;—&#8202;</em></strong><a href="https://github.com/enappd/react-native-push-example"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">React-Native-Push-Example</em></strong></a></blockquote><h3 name="93d1" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="0993" class="graf graf--p graf-after--h3">Now that you have learnt about setting up Push Notifications in React Native apps, here are some other topics you can look into</p><ul class="postList"><li name="6f8d" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">React Native life cycle hooks</a></li><li name="bf8d" class="graf graf--li graf-after--li">How To in React Native&#8202;—&#8202;<a href="https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image picker </a>| <a href="https://enappd.com/blog/intergrate-firebase-in-react-native-app/73"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Integrate Firebase</a></li><li name="8db9" 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"    target="_blank">Create Awesome Apps in React Native</a> using Full App</li></ul><p name="28d0" class="graf graf--p graf-after--li">If you need a base to start your next React Native app, you can make your next awesome app using <a href="https://store.enappd.com/product/react-native-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React Native Full App</a></p><figure tabindex="0" contenteditable="false" name="e4d4" class="graf graf--figure graf-after--p is-defaultValue"><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="1*sWyEeAfCMk7ULOkLUCdSug.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/600/1*sWyEeAfCMk7ULOkLUCdSug.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="125f" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>