Push Notification Using Firebase Cloud Messaging And React Native & Expo | Project And Tutorial | JS

Hello guys, My name is Rohit Kumar Thakur, and In this video, I am going to show you how to work with firebase cloud messaging and react native expo. Here we are working with the push notification feature. The firebase push notifications work well in the foreground and background or quit state of the application. You can see the demo here on the screen as well. Now, let’s start making this. For this, first, you have to start an expo application, select the blank template, name the application and continue to dependencies downloading. Navigate to the project directory. Install the react native firebase app package first. Then install the messaging module. Here, in the official documentation, the code is well-written with proper documentation. We just have to copy and paste the code into our application with slight changes. So, please be careful and pay close attention. This module provides a requestPermission method which triggers a native permission dialog requesting the user's permission. However, On Android, you do not need to request user permission. Next, I am going to use the useEffect hook. Using this we gonna tell react to remember the component changes. First, we gonna return the fcm token for the device. Just console log the token key, because we are going to use this token key later in the firebase cloud messaging application. When a user interacts with your notification by pressing on it, the default behavior is to open the application. So, we are using getInitialNotification when the application is opened from a quit state. Just Remove the few lines of code because we don’t need that here. When the application is running, but in the background. Then we are going to use the onNotificationOpenedApp component. Remove this navigation, because here I don’t want to navigate to any data type. Next, we are going to register the background handler. When the application is in the background or quit state, the onMessage handler will not be called when receiving messages. Instead, you need to set up a background callback handler via the setBackgroundMessageHandler method. Now, To listen to messages in the foreground. Use these lines of code. Here, we are sending an alert with the data in JSON format. You can customize this with a nice UI Now, we are done with the code. Let’s set up our firebase and react native expo application. First, let’s create a firebase account. Here, we have to set up the firebase account for android devices. You can set it up for iOS devices too. But here I am using an Android so let’s continue with it. But before we continue, we have to customize our expo application for android. Here I am using the development build method to test our application. You can use the base react native method too. First, you have to install the expo dev client package. You must have an expo account here. If you don’t have one, I suggest you create that first and verify your email address. Now, in the terminal window, log in to your expo account using EAS login. Select android, copy this command and paste it into the terminal window. Press y Do not alter the android package name. So, hit enter and continue. Press y to generate a new Keystore Now, let this build complete. This may take some time. Maybe 5 to 10 minutes. In the meantime, if the build process disrupts then don’t worry, re-run the previous command and rebuild the application. Because sometimes the build fails due to server issues or maybe due to some other issues. Now, our build is complete. So, let’s proceed to the next step. Select android. Copy and paste the android package name from the JSON file. Now, for the SHA1 credentials, run the command eas credentials on the terminal window screen Select Android, then development, because our application is in development mode. If your application is in production then you must choose production instead. Select Keystore, then set up a new Keystore, then create new build credentials, and after that hit enter. We have two SHA1 keys. We gonna use both of them in our firebase application. Don’t download this google service JSON file because we need to add one more SHA1 key. Now, download this google service JSON file and place it into the project root directory. Next, inside the android section of the JSON file, you have to specify the location of the google service JSON file. Next, we have to rebuild our expo application. So, let’s do that. Wait again for 5-10 minutes. Now, On your android device. Scan this QR code with a QR code scanner. You can use your phone’s default camera QR code scanner or download any application from google playstore. Download and install this build Next, we have to upload our secret server key to send the push notification. The cloud messaging API is disabled so enable it first. Refresh the page. You can see the server key here. We have to upload this key to the expo server. Use the command given in the documentation. And we are all set. Now run this expo application. Scan this QR code with a QR code scanner and paste the URL link inside the downloaded build. OK, here I missed the messaging package to import. That’s why don’t copy-paste the code blindly. Just like here, I missed one important package to import. Moving on, refresh the application, and here you go. You can see the application screen on the mobile device. Now let’s test the push notification feature. Write the notification title and notification text We console log the FCM registration token. So copy the token from the terminal window and paste it here. You can see the alert notification on the screen as the application is in the foreground state. In our code, we wrote the code for an alert and data in JSON format. Now, let’s test this push notification for the background state. I removed the application from recent tasks. Now let’s test for the new push notification. You can see that we got our push notification. So, that’s it for the push notification tutorial using firebase and react native expo. See you in the next react native project video.

Channel: Bug Ninza

Views: 30,702

Keywords: React Native Expo, Mobile App Development, iOS App Development, Android App Development, Native App Development, Javascript, Code, Programming, Technology, Software Engineering, Projects, ui-ux, cross platform framework, js, learn javascript, app development, react navigation, react navigation 6, firebase, React native Tutorial, react native tutorial in hindi, react js, fcm, firebase cloud messaing, android, ios

Id: EaVG6wVZPyY

Length: 18min 42sec (1122 seconds)

Published: Mon Oct 24 2022

Reddit Comments

[u/jahazious]

I followed this tutorial but when I try to import messaging module I get the following error: "You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously."Then, I added ['babel-preset-expo',{targets: {node: 'current'}}] to the babel.config.js, however, I could not manage to run. Any ideas on how I can make it work?