{"id":6300,"date":"2023-05-26T06:47:16","date_gmt":"2023-05-26T06:47:16","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=6300"},"modified":"2024-02-05T11:29:05","modified_gmt":"2024-02-05T11:29:05","slug":"integrating-push-notifications-in-react-native-using-firebase","status":"publish","type":"post","link":"https:\/\/dianapps.com\/blog\/integrating-push-notifications-in-react-native-using-firebase\/","title":{"rendered":"Integrating Push Notifications in React Native Using Firebase"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">React Native builds apps for iOS, Android, and the web from a single codebase by utilizing JavaScript and React. Additionally, it enables you to utilize each device&#8217;s built-in functions, like push notifications, the camera, geolocation, and default themes. As I will show you today, this means you can utilize React Native to create a fully functional mobile application that interfaces with the underlying settings of iOS or Android, making it easy to incorporate push notifications.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This post will teach you how to create a basic React chat app that works with Firebase Cloud Messaging and push notifications on the device to let users know when there are new messages.<\/span><\/p>\n<h1><span class=\"ez-toc-section\" id=\"Types-of-Push-Notifications\"><\/span><span style=\"font-weight: 400;\">Types of Push Notifications<\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Let&#8217;s take a time to go over the various kinds of push notifications before getting into the specifics of integrating them with React Native. Push notifications come in three primary varieties: background, remote, and local.\n<p><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The app alone schedules and delivers local alerts; a server is not required. They are employed to notify users of pertinent events or reminders, such an impending appointment or a new message.\n<p><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In contrast, the app receives remote alerts from a server. They are employed to inform consumers with significant app-related news, promotions, or changes. There are two more categories of remote notifications: interactive and quiet.\u00a0 The app receives silent notifications without alerting the user; they are received in the background. Conversely, interactive alerts enable the user take action right from the notification\u2014like sending a message or finishing a task.\n<p><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Even when the app is not open, background notifications are utilized to update data or content in the background. They are frequently used to retrieve fresh material or synchronize data so that users don&#8217;t have to manually refresh the app.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">It&#8217;s crucial to remember that iOS and Android handle push notifications in somewhat different ways. For instance, Android utilizes Firebase Cloud Messaging (FCM) for push notifications, but iOS needs developers to use Apple&#8217;s Push Notification service (APNs). On the other hand, React Native offers a single interface for integrating push notifications across the two platforms.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Prerequisites-for-Setting-Up-Push-Notifications-in-React-Native\"><\/span><span style=\"font-weight: 400;\">Prerequisites for Setting Up Push Notifications in React Native<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">There are a few things you must do before you can begin incorporating push notifications into your React Native application. We&#8217;ll address each platform&#8217;s setup requirements for push notifications individually because iOS and Android have different needs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">iOS<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You&#8217;ll need the following to set up push notifications on iOS:<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">A developer account on Apple<\/span><\/li>\n<li><span style=\"font-weight: 400;\">A unique app ID<\/span><\/li>\n<li><span style=\"font-weight: 400;\">a current APNs certificate<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">On the Apple Developer website, you may generate an App ID and an Apple Developer account. To enable push notifications for your app, you must first create an APNs certificate when you have an App ID. The certificate will be used to encrypt push notifications delivered to your app and authenticate it with APNs<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Android<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To configure Android push notifications, you&#8217;ll need:<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">An initiative using Firebase<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">An authentic FCM key<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">On the Firebase website, you may start a new project. To enable push notifications for your app, you must generate an FCM key when you have a project. Push notifications will be sent to your app and authentication with FCM will be performed using the FCM key.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Implementing-Push-Notifications-in-React-Native\"><\/span><span style=\"font-weight: 400;\">Implementing Push Notifications in React Native<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now that you have the prerequisites out of the way, let&#8217;s dive into the process of implementing push notifications in your React Native app. In this section, we&#8217;ll cover the step-by-step process of integrating push notifications into your app.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step-1-Install-the-Libraries-and-Dependencies-That-Are-Needed\"><\/span><span style=\"font-weight: 400;\">Step 1: Install the Libraries and Dependencies That Are Needed.<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Installing the necessary dependencies and libraries is the first step towards incorporating push notifications into your React Native application. You must use the following command in order to do this:<\/span><\/p>\n<p><strong>npm Install react-native-firebase react-native-push-notification @react-native-community\/push-notification-ios<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">By doing this, you&#8217;ll install the libraries your app needs to provide push notifications.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step-2-Configure-the-AndroidManifestxml-and-Infoplist-Files\"><\/span><span style=\"font-weight: 400;\">Step 2: Configure the AndroidManifest.xml and Info.plist Files<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Next, you will need to configure the AndroidManifest.xml and Info.plist files in your React Native app. These files are used to configure the settings for push notifications on iOS and Android, respectively.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For Android, open the AndroidManifest.xml file and add the following code inside the &lt;application&gt; tag:<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true\">&lt;meta-data\u00a0 android:name=\"com.dieam.reactnativepushnotification.notification_channel_name\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0android:value=\"@string\/notification_channel_name\"\/&gt;\r\n\r\n&lt;meta-data\u00a0 android:name=\"com.dieam.reactnativepushnotification.notification_channel_description\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0android:value=\"@string\/notification_channel_description\"\/&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">This will create a notification channel for your app, which is required for Android 8.0 and higher.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For iOS, open the Info.plist file and add the following code:<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true\">&lt;key&gt;UIBackgroundModes&lt;\/key&gt;\r\n\r\n&lt;array&gt;\r\n\r\n\u00a0\u00a0&lt;string&gt;fetch&lt;\/string&gt;\r\n\r\n\u00a0\u00a0&lt;string&gt;remote-notification&lt;\/string&gt;\r\n\r\n&lt;\/array&gt;\r\n\r\n&lt;key&gt;NSAppTransportSecurity&lt;\/key&gt;\r\n\r\n&lt;dict&gt;\r\n\r\n\u00a0\u00a0&lt;key&gt;NSAllowsArbitraryLoads&lt;\/key&gt;\r\n\r\n\u00a0\u00a0&lt;true\/&gt;\r\n\r\n&lt;\/dict&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">This will enable background fetch and remote notifications for your app.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step-3-Initialize-Firebase-in-Your-React-Native-App\"><\/span><span style=\"font-weight: 400;\">Step 3: Initialize Firebase in Your React Native App<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In your React Native app, you must start Firebase if you&#8217;re implementing push notifications for Android. You must add the following code to your app&#8217;s index.js file in order to accomplish this:<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true\">import firebase from 'react-native-firebase';\r\n\r\nfirebase.initializeApp();<\/pre>\n<p><span style=\"font-weight: 400;\">This will initialize Firebase in your app and allow you to send push notifications using FCM.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step-4-Request-Permission-to-Receive-Push-Notifications\"><\/span><span style=\"font-weight: 400;\">Step 4: Request Permission to Receive Push Notifications<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Before your app can receive push notifications, you will need to request permission from the user. To do this, you can use the following code:<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true \">import PushNotification from 'react-native-push-notification';\r\n\r\nPushNotification.requestPermissions();<\/pre>\n<p><span style=\"font-weight: 400;\">This will prompt the user to grant permission for your app to receive push notifications.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step-5-Handle-Push-Notification-Registration-and-Token-Retrieval\"><\/span><span style=\"font-weight: 400;\">Step 5: Handle Push Notification Registration and Token Retrieval<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You will have to take care of registering and retrieving the push notification token when the user gives permission for your app to receive push notifications. You may use the following code to accomplish this:<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true \">import firebase from 'react-native-firebase';\r\n\r\nimport PushNotification from 'react-native-push-notification';\r\n\r\nPushNotification.configure({\r\n\r\n\u00a0\u00a0onRegister: function(token) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0firebase.messaging().getToken()\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then(fcmToken =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Send the FCM token to your server for further processing\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0onNotification: function(notification) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\/\/ Handle the notification when it is received\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0permissions: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0alert: true,\r\n\r\n\u00a0\u00a0\u00a0\u00a0badge: true,\r\n\r\n\u00a0\u00a0\u00a0\u00a0sound: true\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0popInitialNotification: true,\r\n\r\n\u00a0\u00a0requestPermissions: true\r\n\r\n});<\/pre>\n<p><span style=\"font-weight: 400;\">This code will handle the registration of the push notification token and the retrieval of the FCM token. You can then send the FCM token to your server for further processing.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step-6-Sending-Push-Notifications\"><\/span><span style=\"font-weight: 400;\">Step 6: Sending Push Notifications<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Once your app has been properly configured to receive push notifications, you can start sending push notifications from your server. There are many services available for sending push notifications, including Firebase Cloud Messaging (FCM), Amazon SNS, and OneSignal.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To send push notifications using FCM, you can use the Firebase Admin SDK. First, you will need to create a new Firebase project and obtain the credentials for the Admin SDK. Then, you can use the following code to send a push notification to a specific device:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true \">const admin = require('firebase-admin');\r\n\r\nadmin.initializeApp({\r\n\r\n\u00a0\u00a0credential: admin.credential.cert(serviceAccount),\r\n\r\n\u00a0\u00a0databaseURL: \"https:\/\/your-project-id.firebaseio.com\"\r\n\r\n});\r\n\r\nconst registrationToken = 'YOUR_DEVICE_REGISTRATION_TOKEN';\r\n\r\nconst message = {\r\n\r\n\u00a0\u00a0notification: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0title: 'New Message',\r\n\r\n\u00a0\u00a0\u00a0\u00a0body: 'You have a new message!'\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0token: registrationToken\r\n\r\n};\r\n\r\nadmin.messaging().send(message)\r\n\r\n\u00a0\u00a0.then(response =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log('Successfully sent message:', response);\r\n\r\n\u00a0\u00a0})\r\n\r\n\u00a0\u00a0.catch(error =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log('Error sending message:', error);\r\n\r\n\u00a0\u00a0});<\/pre>\n<p><span style=\"font-weight: 400;\">This code will send a push notification to the specified device, with a title and body text.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now that we have implemented the push notification in our React Native application. Let\u2019s also understand how to handle incoming push notifications in the apps.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Handling-Push-Notifications-in-React-Native\"><\/span><span style=\"font-weight: 400;\">Handling Push Notifications in React Native<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Defining-and-handling-different-push-notification-events\"><\/span><span style=\"font-weight: 400;\">Defining and handling different push notification events<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Push notifications can be received in different states of your app: foreground, background, or terminated. Depending on the state of your app, you may want to handle the push notification differently.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When your app is in the foreground, the push notification will not be shown by default. Instead, you can customize the appearance of the notification and show it as a banner or alert, or you can handle the notification silently without showing any visual feedback.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When your app is in the background or terminated, the push notification will be shown in the notification tray. You can customize the appearance of the notification and handle the user&#8217;s tap on the notification to open your app or navigate to a specific screen.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To handle push notifications in your React Native app, you can use a library like react-native-push-notification. Here is an example of how to handle push notifications in your app:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true \">import PushNotification from 'react-native-push-notification';\r\n\r\nPushNotification.configure({\r\n\r\n\u00a0\u00a0onNotification: function(notification) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log('Notification received:', notification);\r\n\r\n\u00a0\u00a0\u00a0\u00a0if (notification.foreground) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Handle foreground notification\r\n\r\n\u00a0\u00a0\u00a0\u00a0} else {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Handle background or terminated notification\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0},\r\n\r\n});<\/pre>\n<p><span style=\"font-weight: 400;\">In this example, we define an onNotification function to handle push notifications received by the app. The notification parameter contains information about the notification, such as the title and message.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We check the foreground property of the notification object to determine if the notification receives in the foreground or not. If it was received in the foreground, we can handle the notification accordingly.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Customizing-the-appearance-of-push-notifications\"><\/span><span style=\"font-weight: 400;\">Customizing the appearance of push notifications<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Customizing the appearance of push notifications is an important aspect of providing a good user experience. By default, push notifications will be shown with a system-generated appearance.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To customize the appearance of push notifications, you can use a library like react-native-push-notification. Here is an example of how to customize the appearance of a push notification:<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true \">PushNotification.localNotification({\r\n\r\n\u00a0\u00a0title: 'My Title',\r\n\r\n\u00a0\u00a0message: 'My Message',\r\n\r\n\u00a0\u00a0bigText: 'My Big Text',\r\n\r\n\u00a0\u00a0color: 'red',\r\n\r\n\u00a0\u00a0vibration: 300,\r\n\r\n\u00a0\u00a0actions: ['Yes', 'No'],\r\n\r\n});<\/pre>\n<p><span style=\"font-weight: 400;\">In this example, we use the localNotification function of react-native-push-notification to show a custom notification. We can set the title, message, bigText, color, vibration, and actions properties to customize the appearance of the notification.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Handling-user-interactions-with-push-notifications\"><\/span><span style=\"font-weight: 400;\">Handling user interactions with push notifications<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Handling user interactions with push notifications is another important aspect of providing a good user experience. However, when the user taps on a push notification, you may want to navigate them to a specific screen or perform some other action.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To handle user interactions with push notifications, you can use a library like react-native-push-notification. Here is an example of how to handle user interactions with a push notification:<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true \">PushNotification.configure({\r\n\r\n\u00a0\u00a0onNotification: function(notification) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log('Notification received:', notification);\r\n\r\n\u00a0\u00a0\u00a0\u00a0if (notification.userInteraction) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Handle user interaction\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0},\r\n\r\n});<\/pre>\n<p><span style=\"font-weight: 400;\">In this example, we define a onNotification function to handle push notifications received by the app. We check the userInteraction property of the notification object to determine if the user tapped on the notification or not. If the user did tap on the notification, we can handle the interaction accordingly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can use the userData property of the notification object to pass additional data along with the notification. For example, you can pass an ID that identifies the notification and use it to navigate the user to a specific screen in your app.<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true \">PushNotification.localNotification({\r\n\r\n\u00a0\u00a0title: 'My Title',\r\n\r\n\u00a0\u00a0message: 'My Message',\r\n\r\n\u00a0\u00a0userData: { id: 123 },\r\n\r\n});<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">In this example, we use the userData property of the localNotification function to pass additional data along with the notification. We can then use this data to navigate the user to a specific screen in our app when they tap on the notification.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><span style=\"font-weight: 400;\">Conclusion\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">This post has shown us how to send push notifications to React Native and Node.js apps using Firebase Cloud Messaging (FCM). FCM is a dependable and expandable messaging system that works with iOS, Android, and web-based devices. Text, picture, and JSON object messages are among the many message formats that FCM supports.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We have also learnt how to use Node.js and React Native to create push notifications and how to set up Firebase for your project. Even when your app is not being used, you can effortlessly send your users timely and relevant alerts using Firebase. This can assist you in maintaining consumers&#8217; interest and keeping them informed, as well as enhancing the general user experience of app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In case you want to hire a <\/span><a href=\"https:\/\/dianapps.com\/react-native-app-development\"><b>React Native app development company<\/b><\/a><span style=\"font-weight: 400;\"> to integrate Push notifications into your app then DianApps can easily assist you as we hold a tremendously long year of experience in offering the best app development services to our clients all over the world.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With these steps and tips, you can easily integrate push notifications into your React Native app and improve the user experience for your users.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Additional-Resources\"><\/span><span style=\"font-weight: 400;\">Additional Resources<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/rnfirebase.io\/messaging\/usage\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">React Native Firebase Docs on Push Notifications<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/firebase.google.com\/docs\/cloud-messaging\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">Firebase Cloud Messaging Docs<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/github.com\/zo0r\/react-native-push-notification#usage\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">React Native Push Notifications Library Docs<\/span><\/a><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">We hope this article has provided a helpful guide to integrating push notifications in your React Native app. Happy coding!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Native builds apps for iOS, Android, and the web from a single codebase by utilizing JavaScript and React. Additionally, it enables you to utilize each device&#8217;s built-in functions, like push notifications, the camera, geolocation, and default themes. As I will show you today, this means you can utilize React Native to create a fully [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6302,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[265,104],"class_list":["post-6300","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-push-notifications-in-react-native","tag-react-native"],"featured_image_src":{"landsacpe":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-76-1-1140x445.png",1140,445,true],"list":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-76-1-463x348.png",463,348,true],"medium":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-76-1-300x169.png",300,169,true],"full":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-76-1.png",1536,864,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Integrating Push Notifications in React Native Using Firebase<\/title>\n<meta name=\"description\" content=\"Discover how to integrate push notifications in React Native using Firebase. Engage users with real-time updates in your app.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dianapps.com\/blog\/integrating-push-notifications-in-react-native-using-firebase\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integrating Push Notifications in React Native Using Firebase\" \/>\n<meta property=\"og:description\" content=\"Discover how to integrate push notifications in React Native using Firebase. Engage users with real-time updates in your app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dianapps.com\/blog\/integrating-push-notifications-in-react-native-using-firebase\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-26T06:47:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-05T11:29:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-76-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"864\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vikash Soni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vikash Soni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Integrating Push Notifications in React Native Using Firebase","description":"Discover how to integrate push notifications in React Native using Firebase. Engage users with real-time updates in your app.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dianapps.com\/blog\/integrating-push-notifications-in-react-native-using-firebase\/","og_locale":"en_US","og_type":"article","og_title":"Integrating Push Notifications in React Native Using Firebase","og_description":"Discover how to integrate push notifications in React Native using Firebase. Engage users with real-time updates in your app.","og_url":"https:\/\/dianapps.com\/blog\/integrating-push-notifications-in-react-native-using-firebase\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2023-05-26T06:47:16+00:00","article_modified_time":"2024-02-05T11:29:05+00:00","og_image":[{"width":1536,"height":864,"url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-76-1.png","type":"image\/png"}],"author":"Vikash Soni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vikash Soni","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dianapps.com\/blog\/integrating-push-notifications-in-react-native-using-firebase\/","url":"https:\/\/dianapps.com\/blog\/integrating-push-notifications-in-react-native-using-firebase\/","name":"Integrating Push Notifications in React Native Using Firebase","isPartOf":{"@id":"https:\/\/dianapps.com\/blog\/#website"},"datePublished":"2023-05-26T06:47:16+00:00","dateModified":"2024-02-05T11:29:05+00:00","author":{"@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f"},"description":"Discover how to integrate push notifications in React Native using Firebase. Engage users with real-time updates in your app.","breadcrumb":{"@id":"https:\/\/dianapps.com\/blog\/integrating-push-notifications-in-react-native-using-firebase\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dianapps.com\/blog\/integrating-push-notifications-in-react-native-using-firebase\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dianapps.com\/blog\/integrating-push-notifications-in-react-native-using-firebase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Integrating Push Notifications in React Native Using Firebase"}]},{"@type":"WebSite","@id":"https:\/\/dianapps.com\/blog\/#website","url":"https:\/\/dianapps.com\/blog\/","name":"Learn About Digital Transformation &amp; Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f","name":"Vikash Soni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","caption":"Vikash Soni"},"description":"Vikash Soni, the visionary CEO and Co-founder of DianApps. With his profound expertise in Android and iOS app development, he leads the team to deliver top-notch solutions to clients worldwide. Under his guidance, the company has achieved remarkable success, earning a reputation as a leading web and mobile app development company.","sameAs":["https:\/\/www.linkedin.com\/in\/vikash-soni-59726530\/"],"url":"https:\/\/dianapps.com\/blog\/author\/infodianapps-com\/"}]}},"_links":{"self":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/6300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=6300"}],"version-history":[{"count":4,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/6300\/revisions"}],"predecessor-version":[{"id":8323,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/6300\/revisions\/8323"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media\/6302"}],"wp:attachment":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=6300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=6300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=6300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}