Firebase Push Notifications in React Native: Step-by-Step Tutorial!

hey everyone welcome back to my Channel today I'll be showing you how to use Firebase push notifications in react native but before we dive in hit that like button and subscribe for more awesome content let's get started as you can see I have already created a simple demo project with two components home and setting first create a Firebase project I'll name it Firebase push notification now let's look at the documentation for react native Firebase Cloud messaging we need to install two packages react native Firebase slapp and react native Firebase messaging next we need to add permissions for IOS and Android for notifications import the required packages create a function to handle permissions and retrieve the fcm token e open your Firebase console click on the Android icon add a package name and continue go to the project settings then the Cloud messaging Tab while it's loading let's go back to the documentation in the receive section click on notification there are several methods to create notifications one is server side implementation where you use the token to send notifications to specific users you can also use rest API for this use the same link just change the project ID to your project ID let's use some demo code with modifications to handle notifications and navigate to a specific screen e adjust the navigation IDs accordingly as the data comes in double qued strings we won't be using the post section so you can delete it e e in the configuration remove initial route name and set the initial route to home in the stack Navigator install the required packages the command is in the description now add the background Handler and foreground Handler in the Subscribe function e back in the Firebase console enable the Cloud messaging API Legacy once enabled download the Google services. Json file and add it to the app folder don't forget to add the plug-in and class path in the app and Android folders build.gradle files e start the react native server if you encounter issues like not receiving the fcm token or service not available errors try running flash grab Loop clean in the Android folder and restarting the app if you're using an emulator close and restart it e navigate to the Firebase console click on Cloud messaging under project overview then create a Firebase notification message with a title and body in additional details add key navigation ID and value settings enable the sound review and publish the message the notification will take a few minutes to come e as you can see clicking on the notification navigates to the settings screen and there you have it integrating Firebase push notifications into your react native app is now a breeze thanks for watching if you found this tutorial helpful don't forget to like share and subscribe stay tuned for more exciting content happy coding

Channel: CodeMender

Views: 631

Keywords:

Id: F0hoVlxxtPM

Length: 12min 20sec (740 seconds)

Published: Mon Mar 18 2024