{"id":536,"date":"2024-05-12T12:17:22","date_gmt":"2024-05-12T12:17:22","guid":{"rendered":"https:\/\/zahiralam.com\/blog\/?p=536"},"modified":"2024-10-29T08:44:25","modified_gmt":"2024-10-29T08:44:25","slug":"implementing-push-notifications-in-react-native-for-android","status":"publish","type":"post","link":"https:\/\/zahiralam.com\/blog\/implementing-push-notifications-in-react-native-for-android\/","title":{"rendered":"Push Notifications Made Easy: Firebase Setup for React Native Android Apps"},"content":{"rendered":"\n<p>Push notifications are a powerful tool for mobile app engagement, allowing you to keep your users informed with timely and relevant information, even when the app is not active. In this tutorial, we&#8217;ll guide you through the process of setting up push notifications in a React Native app for Android using Firebase Cloud Messaging (FCM). We&#8217;ll use the example of an app named &#8220;PushDroid.&#8221;\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>Before we begin, make sure you have the following:\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js installed on your development machine.<\/li>\n\n\n\n<li>React Native CLI set up (not Expo).<\/li>\n\n\n\n<li>An Android device or emulator for testing.<\/li>\n\n\n\n<li>A Firebase project set up in the Firebase console.<\/li>\n<\/ul>\n\n\n\n<p>\n\n\n\n<p>To set up and install React Native, you can follow the tutorial mentioned below:\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-zahirs-blog wp-block-embed-zahirs-blog\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"bWF5xvAlz6\"><a href=\"https:\/\/zahiralam.com\/blog\/react-native-build-ios-android-mac\/\">No More Platform Worries: One Codebase, Two Apps (iOS &amp; Android)<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;No More Platform Worries: One Codebase, Two Apps (iOS &amp; Android)&#8221; &#8212; Zahirs Blog\" src=\"https:\/\/zahiralam.com\/blog\/react-native-build-ios-android-mac\/embed\/#?secret=d1C5ODONNT#?secret=bWF5xvAlz6\" data-secret=\"bWF5xvAlz6\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The entire codebase can be accessed on the following GitHub repository: https:\/\/github.com\/mesepith\/PushDroid\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Create a React Native Project<\/h2>\n\n\n\n<p>If you don&#8217;t have a React Native project yet, create one using the following command:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-1\">npx react-native init PushDroid<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npx%20react-native%20init%20PushDroid\">\n                            <button class=\"copy-button\" data-label=\"npx react-native init PushDroid\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>To run your application, execute the following command:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-2\">npx react-native run-android<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npx%20react-native%20run-android\">\n                            <button class=\"copy-button\" data-label=\"npx react-native run-android\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Install Firebase Libraries<\/h2>\n\n\n\n<p>Navigate to your project directory and install the necessary Firebase packages:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-3\">npm install @react-native-firebase\/app @react-native-firebase\/messaging<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npm%20install%20%40react-native-firebase%2Fapp%20%40react-native-firebase%2Fmessaging\">\n                            <button class=\"copy-button\" data-label=\"npm install @react-native-firebase\/app @react-native-firebase\/messaging\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Set up a new Firebase project.<\/h2>\n\n\n\n<p>\n\n\n\n<p>1. Go to firebase console by clicking this link <a href=\"http:\/\/console.firebase.google.com\" data-type=\"URL\" data-id=\"console.firebase.google.com\" target=\"_blank\" rel=\"noreferrer noopener\">console.firebase.google.com<\/a>\n\n\n\n<p>In your Firebase project console, add an Android app.\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-4.png\" alt=\"\" class=\"wp-image-537\" width=\"479\" height=\"311\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-4.png 958w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-4-300x195.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-4-768x499.png 768w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>2. Enter your app name (e.g. PushDroid) and click on the &#8220;Continue&#8221; button as indicated in the image below:\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-5-1024x795.png\" alt=\"\" class=\"wp-image-538\" width=\"512\" height=\"398\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-5-1024x795.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-5-300x233.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-5-768x596.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-5.png 1270w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<p>Please make sure to follow all the steps that will be outlined in order to successfully create a firebase project.\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Add Firebase to Your Android App<\/h2>\n\n\n\n<p>1. Find package name of your app.\n\n\n\n<p>Inside your android react native project go to android\/app\/src\/main\/java\/com\/pushdroid\/MainActivity.kt \n\n\n\n<p>Your package name will be mentioned at the top as shown on below screenshot.\n\n\n\n<p>In our case our package name is <code>com.pushdroid<\/code>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"384\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-7-1024x384.png\" alt=\"\" class=\"wp-image-540\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-7-1024x384.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-7-300x113.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-7-768x288.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-7-1536x576.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-7.png 1984w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>2. Navigate to your Firebase project, in this instance, <code>PushDroid<\/code>, and select the Android icon as demonstrated in the screenshot provided below:\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"430\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-8-1024x430.png\" alt=\"\" class=\"wp-image-541\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-8-1024x430.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-8-300x126.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-8-768x322.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-8-1536x645.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-8.png 1748w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>3. Register the app with the package name you have set in your React Native project (e.g., <code>com.pushdroid<\/code>).\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-9-938x1024.png\" alt=\"\" class=\"wp-image-542\" width=\"469\" height=\"512\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-9-938x1024.png 938w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-9-275x300.png 275w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-9-768x839.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-9.png 1216w\" sizes=\"auto, (max-width: 469px) 100vw, 469px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>4. Download the <code>google-services.json<\/code> file and place it in the <code>android\/app<\/code> directory of your React Native project\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"918\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-10-1024x918.png\" alt=\"\" class=\"wp-image-543\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-10-1024x918.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-10-300x269.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-10-768x688.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-10.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>Proceed by clicking the &#8220;Next&#8221; button and carefully follow each step provided.\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Update Android Configuration<\/h2>\n\n\n\n<p>1. In your Android build script (<code>android\/build.gradle<\/code>), add the classpath for Google services in dependencies:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-4\">classpath &#039;com.google.gms:google-services:4.4.1&#039;  \/\/ Google Services plugin<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#classpath%20%27com.google.gms%3Agoogle-services%3A4.4.1%27%20%20%2F%2F%20Google%20Services%20plugin\">\n                            <button class=\"copy-button\" data-label=\"classpath &#039;com.google.gms:google-services:4.4.1&#039;  \/\/ Google Services plugin\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-11.png\" alt=\"\" class=\"wp-image-544\" width=\"928\" height=\"570\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-11.png 1856w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-11-300x184.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-11-1024x629.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-11-768x472.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-11-1536x943.png 1536w\" sizes=\"auto, (max-width: 928px) 100vw, 928px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>2. In your app-level <code>android\/app\/build.gradle<\/code>, add the following at the bottom of the file:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-5\">apply plugin: &#039;com.google.gms.google-services&#039;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#apply%20plugin%3A%20%27com.google.gms.google-services%27\">\n                            <button class=\"copy-button\" data-label=\"apply plugin: &#039;com.google.gms.google-services&#039;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<p>3. Also write <code>multiDexEnabled true<\/code> in defaultConfig of <code>android\/app\/build.gradle<\/code> as shown on below screenshot.\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-12.png\" alt=\"\" class=\"wp-image-545\" width=\"1202\" height=\"757\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-12.png 2404w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-12-300x189.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-12-1024x645.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-12-768x484.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-12-1536x967.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-12-2048x1290.png 2048w\" sizes=\"auto, (max-width: 1202px) 100vw, 1202px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>4. <strong>Add necessary permissions<\/strong> in <code>android\/app\/src\/main\/AndroidManifest.xml<\/code>\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-6\">&lt;uses-permission android:name=&quot;android.permission.INTERNET&quot; \/&gt;\n&lt;uses-permission android:name=&quot;android.permission.RECEIVE_BOOT_COMPLETED&quot; \/&gt;\n&lt;uses-permission android:name=&quot;android.permission.VIBRATE&quot; \/&gt;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#%3Cuses-permission%20android%3Aname%3D%22android.permission.INTERNET%22%20%2F%3E%0A%3Cuses-permission%20android%3Aname%3D%22android.permission.RECEIVE_BOOT_COMPLETED%22%20%2F%3E%0A%3Cuses-permission%20android%3Aname%3D%22android.permission.VIBRATE%22%20%2F%3E\">\n                            <button class=\"copy-button\" data-label=\"&lt;uses-permission android:name=&quot;android.permission.INTERNET&quot; \/&gt;\n&lt;uses-permission android:name=&quot;android.permission.RECEIVE_BOOT_COMPLETED&quot; \/&gt;\n&lt;uses-permission android:name=&quot;android.permission.VIBRATE&quot; \/&gt;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2222\" height=\"1096\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-21.png\" alt=\"\" class=\"wp-image-559\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-21.png 2222w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-21-300x148.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-21-1024x505.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-21-768x379.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-21-1536x758.png 1536w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-21-2048x1010.png 2048w\" sizes=\"auto, (max-width: 2222px) 100vw, 2222px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Request Notification Permissions<\/h2>\n\n\n\n<p>Modify your <code>App.tsx<\/code> to request user permissions for notifications:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-7\">import React, { useEffect } from &#039;react&#039;;\nimport { Alert, Button, SafeAreaView, StatusBar, StyleSheet, Text } from &#039;react-native&#039;;\nimport messaging from &#039;@react-native-firebase\/messaging&#039;;\n\nconst App = () =&gt; {\n  useEffect(() =&gt; {\n    requestUserPermission();\n  }, []);\n\n  const requestUserPermission = async () =&gt; {\n    const authorizationStatus = await messaging().requestPermission();\n    if (authorizationStatus === messaging.AuthorizationStatus.AUTHORIZED || authorizationStatus === messaging.AuthorizationStatus.PROVISIONAL) {\n      console.log(&#039;Authorization status:&#039;, authorizationStatus);\n    }\n  };\n\n  return (\n    &lt;SafeAreaView style={styles.container}&gt;\n      &lt;StatusBar barStyle=&quot;dark-content&quot; \/&gt;\n      &lt;Text&gt;Welcome to PushDroid!&lt;\/Text&gt;\n      &lt;Button title=&quot;Get FCM Token&quot; onPress={getFcmToken} \/&gt;\n    &lt;\/SafeAreaView&gt;\n  );\n};\n\nconst getFcmToken = async () =&gt; {\n  const token = await messaging().getToken();\n  if (token) {\n    console.log(&#039;Your Firebase Token is:&#039;, token);\n  } else {\n    console.log(&#039;Failed to get the token&#039;);\n  }\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: &#039;center&#039;,\n    alignItems: &#039;center&#039;,\n    backgroundColor: &#039;#F5FCFF&#039;,\n  }\n});\n\nexport default App;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#import%20React%2C%20%7B%20useEffect%20%7D%20from%20%27react%27%3B%0Aimport%20%7B%20Alert%2C%20Button%2C%20SafeAreaView%2C%20StatusBar%2C%20StyleSheet%2C%20Text%20%7D%20from%20%27react-native%27%3B%0Aimport%20messaging%20from%20%27%40react-native-firebase%2Fmessaging%27%3B%0A%0Aconst%20App%20%3D%20%28%29%20%3D%3E%20%7B%0A%20%20useEffect%28%28%29%20%3D%3E%20%7B%0A%20%20%20%20requestUserPermission%28%29%3B%0A%20%20%7D%2C%20%5B%5D%29%3B%0A%0A%20%20const%20requestUserPermission%20%3D%20async%20%28%29%20%3D%3E%20%7B%0A%20%20%20%20const%20authorizationStatus%20%3D%20await%20messaging%28%29.requestPermission%28%29%3B%0A%20%20%20%20if%20%28authorizationStatus%20%3D%3D%3D%20messaging.AuthorizationStatus.AUTHORIZED%20%7C%7C%20authorizationStatus%20%3D%3D%3D%20messaging.AuthorizationStatus.PROVISIONAL%29%20%7B%0A%20%20%20%20%20%20console.log%28%27Authorization%20status%3A%27%2C%20authorizationStatus%29%3B%0A%20%20%20%20%7D%0A%20%20%7D%3B%0A%0A%20%20return%20%28%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CStatusBar%20barStyle%3D%22dark-content%22%20%2F%3E%0A%20%20%20%20%20%20%3CText%3EWelcome%20to%20PushDroid%21%3C%2FText%3E%0A%20%20%20%20%20%20%3CButton%20title%3D%22Get%20FCM%20Token%22%20onPress%3D%7BgetFcmToken%7D%20%2F%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20%29%3B%0A%7D%3B%0A%0Aconst%20getFcmToken%20%3D%20async%20%28%29%20%3D%3E%20%7B%0A%20%20const%20token%20%3D%20await%20messaging%28%29.getToken%28%29%3B%0A%20%20if%20%28token%29%20%7B%0A%20%20%20%20console.log%28%27Your%20Firebase%20Token%20is%3A%27%2C%20token%29%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20console.log%28%27Failed%20to%20get%20the%20token%27%29%3B%0A%20%20%7D%0A%7D%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create%28%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%27center%27%2C%0A%20%20%20%20alignItems%3A%20%27center%27%2C%0A%20%20%20%20backgroundColor%3A%20%27%23F5FCFF%27%2C%0A%20%20%7D%0A%7D%29%3B%0A%0Aexport%20default%20App%3B\">\n                            <button class=\"copy-button\" data-label=\"import React, { useEffect } from &#039;react&#039;;\nimport { Alert, Button, SafeAreaView, StatusBar, StyleSheet, Text } from &#039;react-native&#039;;\nimport messaging from &#039;@react-native-firebase\/messaging&#039;;\n\nconst App = () =&gt; {\n  useEffect(() =&gt; {\n    requestUserPermission();\n  }, []);\n\n  const requestUserPermission = async () =&gt; {\n    const authorizationStatus = await messaging().requestPermission();\n    if (authorizationStatus === messaging.AuthorizationStatus.AUTHORIZED || authorizationStatus === messaging.AuthorizationStatus.PROVISIONAL) {\n      console.log(&#039;Authorization status:&#039;, authorizationStatus);\n    }\n  };\n\n  return (\n    &lt;SafeAreaView style={styles.container}&gt;\n      &lt;StatusBar barStyle=&quot;dark-content&quot; \/&gt;\n      &lt;Text&gt;Welcome to PushDroid!&lt;\/Text&gt;\n      &lt;Button title=&quot;Get FCM Token&quot; onPress={getFcmToken} \/&gt;\n    &lt;\/SafeAreaView&gt;\n  );\n};\n\nconst getFcmToken = async () =&gt; {\n  const token = await messaging().getToken();\n  if (token) {\n    console.log(&#039;Your Firebase Token is:&#039;, token);\n  } else {\n    console.log(&#039;Failed to get the token&#039;);\n  }\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: &#039;center&#039;,\n    alignItems: &#039;center&#039;,\n    backgroundColor: &#039;#F5FCFF&#039;,\n  }\n});\n\nexport default App;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 7: Handle Incoming Notifications<\/h2>\n\n\n\n<p>To handle notifications, whether the app is in the foreground, background, or terminated, you can set up listeners like so:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-8\">useEffect(() =&gt; {\n  \/\/ Foreground\n  const unsubscribeOnMessage = messaging().onMessage(async remoteMessage =&gt; {\n    Alert.alert(&#039;A new notification arrived!&#039;, JSON.stringify(remoteMessage.notification));\n  });\n\n  \/\/ Background and quit states\n  messaging().setBackgroundMessageHandler(async remoteMessage =&gt; {\n    console.log(&#039;Received in background:&#039;, remoteMessage);\n  });\n\n  return () =&gt; {\n    unsubscribeOnMessage();\n  };\n}, []);<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#useEffect%28%28%29%20%3D%3E%20%7B%0A%20%20%2F%2F%20Foreground%0A%20%20const%20unsubscribeOnMessage%20%3D%20messaging%28%29.onMessage%28async%20remoteMessage%20%3D%3E%20%7B%0A%20%20%20%20Alert.alert%28%27A%20new%20notification%20arrived%21%27%2C%20JSON.stringify%28remoteMessage.notification%29%29%3B%0A%20%20%7D%29%3B%0A%0A%20%20%2F%2F%20Background%20and%20quit%20states%0A%20%20messaging%28%29.setBackgroundMessageHandler%28async%20remoteMessage%20%3D%3E%20%7B%0A%20%20%20%20console.log%28%27Received%20in%20background%3A%27%2C%20remoteMessage%29%3B%0A%20%20%7D%29%3B%0A%0A%20%20return%20%28%29%20%3D%3E%20%7B%0A%20%20%20%20unsubscribeOnMessage%28%29%3B%0A%20%20%7D%3B%0A%7D%2C%20%5B%5D%29%3B\">\n                            <button class=\"copy-button\" data-label=\"useEffect(() =&gt; {\n  \/\/ Foreground\n  const unsubscribeOnMessage = messaging().onMessage(async remoteMessage =&gt; {\n    Alert.alert(&#039;A new notification arrived!&#039;, JSON.stringify(remoteMessage.notification));\n  });\n\n  \/\/ Background and quit states\n  messaging().setBackgroundMessageHandler(async remoteMessage =&gt; {\n    console.log(&#039;Received in background:&#039;, remoteMessage);\n  });\n\n  return () =&gt; {\n    unsubscribeOnMessage();\n  };\n}, []);\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 8: Testing Your Setup<\/h2>\n\n\n\n<p>1. Run your React Native application on an Android device or emulator.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-9\">npx react-native run-android<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#npx%20react-native%20run-android\">\n                            <button class=\"copy-button\" data-label=\"npx react-native run-android\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>2. The <code>getFcmToken<\/code> function will generate a token, which will then be outputted in the console log. Make sure to copy the token.\n\n\n\n<p>3. Navigate to your Firebase Project and select &#8220;<code>Engage<\/code>&#8221; from the menu. Within the &#8220;Engage&#8221; section, click on &#8220;<code>Messaging<\/code>&#8221; as depicted in the image below.\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-13.png\" alt=\"\" class=\"wp-image-546\" width=\"771\" height=\"654\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-13.png 1542w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-13-300x254.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-13-1024x869.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-13-768x651.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-13-1536x1303.png 1536w\" sizes=\"auto, (max-width: 771px) 100vw, 771px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>4. Click on &#8216;<code>Create your first campaign<\/code>&#8216;\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-15.png\" alt=\"\" class=\"wp-image-549\" width=\"913\" height=\"466\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-15.png 1826w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-15-300x153.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-15-1024x523.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-15-768x392.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-15-1536x784.png 1536w\" sizes=\"auto, (max-width: 913px) 100vw, 913px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>5. Choose <code>Firebase Notification messages<\/code> and click <code>Create<\/code> .\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1176\" height=\"1124\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-16.png\" alt=\"\" class=\"wp-image-550\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-16.png 1176w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-16-300x287.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-16-1024x979.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-16-768x734.png 768w\" sizes=\"auto, (max-width: 1176px) 100vw, 1176px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>6. Write your<strong> Notification Title<\/strong> and <strong>Notification Text<\/strong> and click on <code>Send test message<\/code> as shown on below image .\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2038\" height=\"1550\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-17.png\" alt=\"\" class=\"wp-image-551\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-17.png 2038w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-17-300x228.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-17-1024x779.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-17-768x584.png 768w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-17-1536x1168.png 1536w\" sizes=\"auto, (max-width: 2038px) 100vw, 2038px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>7. Insert the token generated by the getFcmToken function, which is displayed in your console.\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-18.png\" alt=\"\" class=\"wp-image-552\" width=\"599\" height=\"286\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-18.png 1198w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-18-300x143.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-18-1024x489.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-18-768x367.png 768w\" sizes=\"auto, (max-width: 599px) 100vw, 599px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>8. Once you have added your token, click on the &#8220;+&#8221; icon as illustrated in the screenshot below.\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1168\" height=\"548\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-19.png\" alt=\"\" class=\"wp-image-553\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-19.png 1168w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-19-300x141.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-19-1024x480.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-19-768x360.png 768w\" sizes=\"auto, (max-width: 1168px) 100vw, 1168px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>9. Click on Test \n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1186\" height=\"602\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-20.png\" alt=\"\" class=\"wp-image-555\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-20.png 1186w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-20-300x152.png 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-20-1024x520.png 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/05\/image-20-768x390.png 768w\" sizes=\"auto, (max-width: 1186px) 100vw, 1186px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<p>You&#8217;ll get a notification on your phone. If you don&#8217;t get it, wait a bit and try again, or make sure the app has permission to send notifications.\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion:<\/h2>\n\n\n\n<p>You have successfully implemented push notifications in your React Native app for Android using Firebase. This setup not only enables you to engage users effectively but also leverages the robust capabilities of Firebase for more advanced features like analytics and user segmentation.\n\n\n\n<p>\n","protected":false},"excerpt":{"rendered":"<p>Push notifications are a powerful tool for mobile app engagement, allowing you to keep your users informed with timely and relevant information, even when the [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":1391,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[80,79,78,54],"class_list":["post-536","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-development","tag-android-development","tag-firebase","tag-push-notifications","tag-react-native"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/comments?post=536"}],"version-history":[{"count":10,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/536\/revisions"}],"predecessor-version":[{"id":1390,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/536\/revisions\/1390"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media\/1391"}],"wp:attachment":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media?parent=536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/categories?post=536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/tags?post=536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}