Firebase HTTP V1 Push Notifications with React Native Expo | Foreground & Background | Tutorial

hello everyone my name is Rohit and welcome to my channel in this video I'm going to show you how to send a foreground or background notification using Firebase sttp version one and react native Expo earlier I made a video on how to send uh notification using Firebase Legacy method but uh that method has been deprecated or going to be deprecated soon so from now on you can follow this method to send notification so follow the video carefully and let's get started [Music] first we are going to initialize the Expo project and select the blank template name your application here I'm naming it fcm test after that let the dependencies downloading be complete Now navigate to the newly created directory and open this project in your favorite code editor next we are going to install the react native Firebase package we will install the app and messaging package for this project so follow the video and install them you can see the versions of the packages and Expo I'm currently working with we will need the package name and sh1 key in this project to set up Firebase to do this we have to create a development build for this project Expo provides a smooth way to do so just follow the official docs to create a development build the docs suggest that we have to install the Expo Dev client package now copy this command and paste it into the terminal to create a build just press Y and hit enter to leave the default settings as they are continue to create the build if in your case Expo ask you to log to your account log using the same credentials as your account if you don't have an account visit export. Dev to create one first then log in here with the same credentials here you have to wait uh let's say 5 to 10 minutes for the build creation to finish okay now that our build is complete we will not scan this QR code right away as we have a lot of work to do first if you visit the app.js file you will see the package name for Android because we use development build for Android We are following the official docs to accomplish our task next we need to set up a Firebase account to do this go to the firebase.com and click on get started then simply follow the video for a smooth setup click on the settings icon then click on Project settings and finally click on service account here click on generate new private key the Json file will be automatically downloaded you have to place the Json file in the root directory of your project also don't change the name of the Json file because nobody wants to encounter unexpected errors right in a step four we have to upload the downloaded Json file to Expo so let's follow the command one by one and upload this Json file run the command EAS credentials and then select Android then select production then select the Google service account then select the fcm version one option if you have an existing Google service account then select that one however I want to proceed with the new one here you can choose the existing key but I would recommend uploading a new service account key I uploaded once when I was testing this code but here I want to go with the new one so I will press n here we need to upload the path of the Json file we have already placed the Json file in the root directory simply copy the file name and paste it here that's it now simply go back or quit the terminal if you want to verify the uploaded Json file visit export. Dev and follow the video to verify the uploaded Json file all right now go to the Firebase dashboard and click on Android hit here we need to add the package name and sh1 key we have already seen the package name in the Android section of the app.js file so simply copy the package name and paste it here next we need to add two sh1 keys here follow the video to generate two sh1 keys okay now we have two sh1 keys let's add both of these to the Firebase android setup now download the Google service Json file and paste it into the root directory of our project also we need to specify the path of the Google service Json file in the Android section of the abdor Json file now if you go to the engage section and click on messaging you will see an interface is similar to this we will create our first campaign soon but first we have to build our application because every time we make any changes to the appj file we have to build the app to reflect those changes in our application now we have to write some code the code Imports necessary components and libraries including the status bar from Expo various components from react native and the messaging module from react native Firebase package the app component is defined as the main component of the application inside the app component there is a function called request user permission that request permission from the user to receive post notifications the use effect Hook is used to run some code when the component mounts it checks if the user has granted permission to receive notification and retrives the devic's fcm token the code then set up various event listeners to handle different scenarios related to push notifications get initial notification check if the app has opened due to notification while it was closed on notification open app handles the case when a notification opens the app from the background set background message Handler allows handling notification when the app is running in the background on message lense for incoming fcm messages and display an alert with the message data finally the app component renders a simple view with the text fcm tutorial and the status bar component during the testing phase when I attempt to receive notification in the build phase they do not arrive therefore I will build an APK of the application after doing so the notifications arrive let's proceed to build the APK of this Expo app using the official command all right scan this QR code using your phone's camera if your phone camera support QR code scanning proceed otherwise download any QR code scanner from Play Store do not use the Expo Go app to scan this QR code install the APK on your mobile device I will now test both foreground and background notification one by one please navigate to Firebase messaging and commence your first campaign after waiting for approximately 2 to 3 minutes I noticed that the notification did not arrive upon further investigation I discovered that notification permission are disabled on this device therefore navigate to the device settings and enable notifications comence our test campaign once again now with my device locked wait for a few minutes and you will observe the notification from Firebase you can also test foreground notification in a similar manner this video provides a basic understanding of how notification functions in Firebase and how to set up uh your application from fireb sttp version one no hard coding is involved uh it's just a simple demonstration I hope you found this video helpful if this was helpful then like this video And subscribe to my channel thanks for watching see you in my next video

Channel: Bug Ninza

Views: 4,444

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

Id: yCBecuxzUuU

Length: 18min 55sec (1135 seconds)

Published: Thu Mar 28 2024