React Native Push Notifications with Firebase | Guidence #pushnotifications #reactnative

hey there and welcome to the future of mobile application before that if you guys are new here join to the unbox [Music] call today we are going to see react native push notification so if you guys are know for the basic thing in react native we need to show the push notification the top of the screen so today we going to see how we can do that using react n push notification before that I just saw some demo here see here when this is our application see here uh so I just cleared the notification when whenever we are doing this click we are manually triggering a local notification so this is the one so when you're pulling down you can able to see the notification so today we are going to see two things the one is local notification and the second one is remote notification using the Firebase so without doing the Firebase we can't able to do that so today we're going to see how we can achieve that first of all go to the react native post notification npm we can able to see the lot of downloads here around 35,000 weekly downloads are there and also the size 275 279 KB so it's good one so you guys try to install the retive first notification first into the retive project so later we can see the lot of things they have given uh like the permissions things and then uh background color and then script all those things so I have created a sample reactnative project so this is the react native project so we can see from the scratch how we can achieve this first go to the retive fire base just search Firebase go to the first link do get started so before that uh the five is is the open source platform we can able to connect to our application making this we can able to send the popup request so if you are sending a lot of request we need to do a subscription to get a lot of features for basic thing we are having two things so this is our project so I'm just creating a new project I'm just entering a project name so project name should be uh registered to your dashboard one so I'm just giving a project name to be notification it's say checking the project name is available so secondly we have to give a continue see here just asking for the fire Firebase thing do continue third one you have to in the country you need to accept the policies I'm just creating a project so it's just taking a few seconds to creating a new project see the fire B is ready we just doing the continue so this is for the first fire Bas application uh okay so here uh we need to go with the Android one currently I'm just doing the demo for the Android so please select this Android feature see here we can able to see uh so this is the best this is the important one we guys need to know uh our fire base is connecting directly to our project so this is the one android package name so this name the package name is generally the application ID your app level build on gr file so just go to here inside Android build. Gradle so this one inside app build. grad so here name space so this is the one hour project name you guys should select. aesome [Music] project so my Android app name test notification so the security key is optional if you guys need to know you guys can able to add the security key So currently I'm just skipping this the secondly uh we guys should add see here uh they have given me given Google service. Json file we guys should download this thing so while clicking this it will download go to your downloads see uh the file has been downloaded then you guys should add this file inside the SRC see here inside the Android app I'm having Google service Json file so so I'm just deleting this this is the existing file I'm just adding the new file open with v Studio code so it has opened I'm just adding this thing here and just need to edit the name just renaming to Google service Jan see here we can able to get the project ID project number storage bucket all those things our project name awesome project so the first level configuration was done secondly do the next so see here it will ask it will allow us to do the setup thing so I will show the demo directly go to the next continue to the console so test notification was added go to the settings see once you about the settings see here you can able to see the notification ID all those things see the class see the Cloud messaging API Legacy was disabled so before that uh I just let you know what are all things we need to configure into our application so just go to your application then go to your build that grel file so this build on grel file see here I just added this line uh com google. service. 4.0 see this thing we need to add so I'm just giving this thing below you can able to easily add this service you guys need to add this line into build and Gradle once that is done then you guys should add inside app SRC build on grd we are having right that uh we need to import another one file uh which is Google filebase so this one we need to import com. Google file B.B bomb uh so this one you guys need to input here also from Google service so this is the second thing so once uh that is done we guys should add the permission request in Android manifest.xml so in this thing uh we should add uh the permissions so I'm just giving the permission level here so so this is the one you just copy and replace the same thing uh to the permission level once uh this permission level is replaced then we guys shouldn't go to the inside SRC then response then values here colors.xml so so we guys should create a folder colors. XML then just copy paste the second thing so this resource this resource is nothing but it will while giving a popup notification we can able to control the background color and style so this is the one so the nextly once this all configuration is done okay once this all configuration is done you guys should uh do delete the node module do gradal clean so just CD Android grade W clean once that is done then do the npm install the app will run again so after that you guys should go to the two things the first thing is local notification so just create a new file uh near to the app. TSS this our local notification file so in this local notification we have two things the one is create channel and another one is local notification so I'm just mentioning here so this is the one so we just should import a react native post notification so inside post notification we can able to create a channel so without creating a basic Channel we can't able to do these uh initiate the pop-up notification so create channel so Channel ID should be the unique one so currently I'm just giving the date string as an unique on and channel name and then description the importance importance is nothing but the priority of the message and then vibrators are no like that we are having the N number of keys uh you guys should know you just uh scroll down to the npm you can able to get lot of things right so see here uh the color priority uh I like that we guys able to hear give it here so the secondly uh so while doing this we can able to get uh this basic uh uu ID uh so each product we can able to get an unique ID so then only we can able to uh pause that uh post notification so once uh this thing is done now secondly we guys should do the major thing so so that is uh like for whenever we are entering into the application we are just doing the first notification without having an access to the access permission to from the user we can't able to do that so we need to do the permission level request so that one we should do the in npm level so just go to the your node module go to the node module so inside go to the react so inside go to the react native then libraries then permission Android then permission android. JS so here you guys should add post notification then post notification and. post notification and P post if this to line we should add there so once you have added run your application once you are running the your application so it will ask for an added permission once if it's asked you guys should do allow so secondly uh we have created a local notification right this one we have to import so just import this directly to app. jss see here I just imported this local notification so in this local notification I'm just giving directly to the button whenever I'm just clicking the button this local notification file to trigger whenever it's triggering it will create a new local notification so that's the one see here uh once this all is done whenever I'm just clicking this new local notification will come

Channel: Prem Yathvik

Views: 1,052

Keywords: ReactNative, PushNotifications, Firebase, MobileAppDevelopment, CodingTutorial, TechGeek, AndroidDevelopment, MobileDev, FirebaseCloudMessaging, ProgrammingGuide

Id: HJRfcDAs91E

Length: 15min 24sec (924 seconds)

Published: Thu Feb 15 2024