Introduction

When developing applications for users and companies, push notifications are now a crucial factor to take into action. Many companies increasingly favor sending push notifications to customers who have installed their apps to inform and alert them. In this blog, we will discuss Push notifications in React Native.

Let’s commence.

What Push Notifications Are

React Native Push notifications are the most economical way to keep users updated and enhance user engagement for an application. 

According to a study, opt-in rates for app push notifications range from 49% to 95% on Android, with a median of 81%, and from 29% to 73% on iOS, with a medium of 51%. 

How To Use React Native To Explore Push Notifications

Before moving forward with the implementation, make sure you already have a React Native project set up.

Here are the steps:

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:

Go to https://console.firebase.google.com and start a new project to create a Firebase app. We need to add apps to the Firebase panel once the project has been built.

Following that, we will outline the necessary fields for both Android and iOS. 

  • GoogleService.Info.plist file will be added to the iOS native project in the case of iOS.
  • We will receive google.services.json for Android which is going to be placed in the Android project.

2. Android Setup

To connect the Firebase application with the Android application, we need to submit information about the Firebase app integration procedure.

Click the Android icon to begin the Android app creation process when you arrive at the Firebase website.

After completing all the details, we will download the google-service-JSON file that consists Firebase configuration, and we will place it in the Android Project at the following location:

The google-services plugin needs to be enabled on the project for Firebase on Android to be able to access the credentials. Two files in the Android directory must be changed for this.

First of all, add the google-services plugin as  a dependency inside your /android/build/gradle file:

Then, run the plugin by adding the following code to your /android/app/build.gradle:

And that’s all, Android configuration is done.

3. iOS Setup

The iOS application and Firebase service will now be connected. You must click on the iOS icon 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 entering the necessary information, and we will add it to the iOS project’s root folder as seen below:

To enable Firebase to use the credentials on iOS, the Firebase SDK must be set up. For example, you could add the following by opening the /ios/projectName>/AppDelegate.mfile.

Import the SDK at the file’s top using the syntax #import <Firebase.h>

Add the following to the beginning of your current didFinishLaunchingWithOptions method.

– (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

// Add me — \/

if ([FIRApp defaultApp] == nil) {

[FIRApp configure];

}

// Add me — /\

// …

}

cd ios/

Pod install

4. Code Integration For Getting Push Notifications.

The Firebase Cloud Messaging is used to send push notifications. We will be going to install this package on our project:

For iOS, run

To receive push notifications on iOS, the app must send the request for permission for push notifications, which you can get by running:

To real Android/iOS devices and Android emulators, FCM messages can be exchanged. Simply put, a message is the payload of information we receive in the notice. 

Acquiring A Push Token

 Backend Setup

The token in the sendToDevice method is the final token. Since data-only notifications do not display alerts on the device, we must explicitly set the priority of the notification to high and the availability of the content to true for Android and iOS.

5. Sending And Getting Push Notifications

We will be going to send React Native push notifications to our backend endpoints to send the notifications. By default, push notifications do not display when the app is foreground. To handle the situation, listen to the incoming notifications.

This will show an alert once we get the notification.

Conclusion

That’s all! We hope you have understood all the above-mentioned steps in this blog. So follow this procedure and get React Native push notifications. And if you are looking for the best push notification system provider, go with WonderPush.