How to send push notification using firebase in react native
Hello Everyone,
This is my first blog on medium, so if you have any suggestions regarding the please comment, so let’s start my journey on medium…
Do you know why I started writing on medium with push notifications? — just because after searching the whole day on the internet I am not able to find a single post that solves all issues related to push notification and sends push notification successfully, so I decided to write a complete blog on push notification using firebase.
Intro — In today’s era, if you want to attract more audiences through your application then the best way is to push notification.
Push Notification — push notification is a way of communicating with your app users.
Firebase — Firebase is the most popular way of sending the notification, it provides a reliable connection between devices and server.
For sending a firebase push notification in react native you need to set up the 3 major part and at the end we test it…
- Firebase Console.
- Setup of the android studio with a firebase plugin.
- Implementing a firebase plugin to react-native.
- Test the notification.
So let’s start the tutorial and please follow step by step procedure for implementing the firebase push notification in your project.
1) Firebase Console:
Step 1: Let’s start with setup the firebase console -https://console.firebase.google.com/ Goto this link create your account or login in using a Gmail account, then follow this tutorial to register your project with firebase.
Step 2: After login click the add project box
Step 3:
- A dialog will appear as shown below in which you fill the project name and modify the project id and region if necessary
- After this click on create, a project then continue
Step 4: After the project created you’ll be redirected to the project homepage.
Step 5: Access your firebase account and go to the project settings from the top gear icon, it looks like.
Step 6: In the new window click on ‘Add Firebase to your Android app’ for the Android app or you can set it for your iOS app.
you add according to your required platform.
Step 7: Fill out the required fields in the popup form, make sure the package name you are using is the same as your project, Where you find your package name - android/app/src/main/AndroidManifest.xml
looks like: <manifest xmlns: android=”http://schemas.android.com/apk/res/android” package=”com.test”>
— com.test is your package name, fill it where it asks about package name
After clicking the ‘register app’ button you will see a button to download the JSON configuration file.
Step 8: Download the ‘google-services.json’ file to the directory ‘android/app’, Click ‘Next’ and complete the process. So we finish the first part of the firebase implementation now we move to the second part which is all about android studio configuration with the firebase plugin linking.
you can find other steps here —
2) Setup of the android studio with firebase plugin —
https://www.itechinsiders.com/setup-the-android-studio-with-firebase/
3) Implementing a firebase plugin to react-native —
https://www.itechinsiders.com/implementing-a-firebase-plugin-in-react-native/
How to integrate the firebase in iOS —
https://www.itechinsiders.com/how-to-integrating-firebase-with-ios-in-react-native/
And if any other query/issue then please comment.
Happy Coding Guyz.
