Are you looking for the steps to update the new version of react-native push notifications? If yes, then read this post now!
How To Update To The New Version Of React-Native Push Notifications
Introduction
Push notification configuration is one of the most popular features for mobile apps. It should come as no surprise that push notifications are a highly useful tool for any business, so you must master this aspect of app development. In this post, we will discuss how to update the new version of react-native push notifications.
We can send a notification using a variety of libraries or APNs designed especially for iOS. But because the Firebase messaging library is so simple to integrate, we will use it as an example throughout this article to show how it is done!
Ensure that you already have a React Native project set up before moving forward with the implementation so that we can begin carrying out the steps to finish the push notifications mission:
1. Firebase Installation
2. Android Setup
3. iOS Setup
4. Code integration for push notifications
5. Sending the test push notifications
Now, let’s get started!
1. Firebase Installation
We begin by using NPM or Yarn to add the React Native Firebase “app” module to the root of your React Native Project-
Note: the @react-native-firebase/app module should be installed before using any other Firebase service.
To build a Firebase app, you need to build a new project. Once you build a project, you need to add apps on the Firebase panel.
Following that, we will outline the necessary fields for both Android and iOS.
- The GoogleService-Info.plist file will be added to the iOS native project in the case of iOS.
- We will receive google-service.json for Android, which will be added to the Android native project.
2. Android Setup
We must provide information on the Firebase app integration process, i.e., the Android package name, to connect the Firebase service with the Android application.
To create the Android app, select the Android icon on the Firebase website.
After filling in all the required details, we will download the google-service.json file that has the Firebase configuration. And, we will place it inside the Android project at the following location:
To enable firebase on Android to use the certifications, the google-services plugin must be allowed on the project. This needs modifications to two files in the Android directory.
First of all, add the google-services plugin as a dependency inside of your /android/build.gradle file:
Go ahead and run the plugin by adding the following to your /android/build.gradle
Now, Android’s configuration is done!!
3. iOS Setup
The iOS application and Firebase service will now be connected. You must click on the iOS on the Firebase platform to get information about the Firebase app integration process, including the iOS bundle id.
The GoogleService-Info.plist file, which contains Firebase configuration, will be obtained after adding the necessary information, and we will add it to the iOS project's root folder as shown below:
The Firebase iOS SDK needs to be set up for the credentials to be used by Firebase on iOS.
At the top of the file, import the Firebase SDK:
Within your current method, add the following to the top of the method:
For iOS, we need to install pods:
iOS configuration is done now!!
4. Code integration for push notifications
Push notifications are sent using the Firebase cloud messaging service (FCM). On the project, we will install the package:
And for iOS, run this
To get push notifications on iOS, push notifications to require the app to ask for permission, which you can do by running:
To actual Android/iOS devices as well as Android emulators, FCM messages can be sent (iOS simulators however do not handle cloud messages). Simply put, a message is the payload of information we receive in the notification.
Next, we must manage notifications in the following three app states:
1. Active ( the app is running in the foreground);
2. Background (the app is minimized or running in the background);
3. Killed (the app is closed or terminated)
The app can handle push notifications with just this one line of code.
Notification handling when an app is open
We typically receive notifications in the Firebase callback as shown above, then throw the local notification from the React Native app because the app won't display notifications in foreground mode. With this package, we can create a local notification.
You can see that when we get a notification in foreground mode, the callback mentioned above is triggered. When we receive a notification in foreground mode, we use the following code to trigger the local notification:
Now that handling local notifications differ from handling remote notifications, we must add these lines of code to :
5. Sending the test push notifications
We can use the Firebase console to send test push notifications. From the side menu, select the cloud messaging option, then click "Send your first message".
When you click the button, you will be taken to this screen, where you can enter the title and body of the notification for testing purposes. After you've finished writing the notification content, click 'Send test message':
You must now enter the FCM token of the device to which you wish to send the notification.
Add the notification here, then click the Test button. The push notification will be sent to the device with the device token you specify.
We can now obtain the FCM token, which is the device's unique identifier for sending notifications via Firebase.
Then, all of a sudden, our mobile device notified us.
Wrap Up
Everything is done now! This is how to update the new version of React-Native Push Notifications. Push notifications are a great opportunity to re-engage your users, So, look for the best push notification service provider.