React Native push notifications

Add Firebase to your project. Make sure to add your Firebase service account private key on the Settings page of your TalkJS Dashboard. For a detailed guide on how to configure Firebase, see: Configure Firebase Cloud Messaging.

Verify that you have the Firebase Android config file (google-services.json) in the directory: '[YOUR_RN_PROJECT]/android/app/'. Make sure that in your app-level Gradle file (usually app/build.gradle), you have applied the Google Services Gradle plugin.

1apply plugin: 'com.android.application'
2// Add the following line:
3apply plugin: 'com.google.gms.google-services'  // Google Services plugin
4
5android {
6  // ...
7}

Confirm that in your project-level Gradle file ([YOUR_RN_PROJECT]/android/build.gradle) that you have the Google services plugin as a buildscript dependency.

1buildscript {
2
3    repositories {
4      // Make sure that you have the following two repositories
5      google()  // Google's Maven repository
6      mavenCentral()  // Maven Central repository
7    }
8
9    dependencies {
10      ...
11
12      // Add the dependency for the Google services Gradle plugin
13      classpath 'com.google.gms:google-services:4.4.1'
14    }
15}
16
17allprojects {
18  ...
19
20  repositories {
21    // Make sure that you have the following two repositories
22    google()  // Google's Maven repository
23    mavenCentral()  // Maven Central repository
24  }
25}

If your app is targeting Android 13 or higher, you are required to request for a new runtime permission called POST_NOTIFICATIONS in order for the app to display notifications.

Declare the permission in your app's manifest file (android/app/src/main/AndroidManifest.xml) by placing the following line within the <manifest> tag:

1<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

Next, request the permission at runtime using PermissionsAndroid from the react-native package, as shown:

1import { Platform, PermissionsAndroid } from 'react-native';
2
3// Other code...
4
5if (Platform.OS === 'android') {
6  PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS);
7}

You can request for this permission at any point in your app's flow that makes sense for your project and its users.

Regardless of whether you use Apple Push Notifications (APNs) or Firebase, Apple requires that an iOS app requests for the necessary notification permissions before being able to display push notifications. You can request for these permissions at any point in your app's flow by using PushNotificationIOS as shown below:

1import { Platform } from 'react-native';
2import PushNotificationIOS from '@react-native-community/push-notification-ios';
3
4// Other code...
5
6if (Platform.OS === 'ios') {
7  PushNotificationIOS.requestPermissions({
8    lockScreen: true,
9    notificationCenter: true,
10    alert: true,
11    badge: true,
12    sound: true,
13  });
14}

Begin by configuring Apple Push Notifications (APNs) on the TalkJS dashboard. See: Configure Apple Push Notifications.

1#import <UserNotifications/UNUserNotificationCenter.h>

1@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>

1#import <UserNotifications/UserNotifications.h>
2#import <RNCPushNotificationIOS.h>

1- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
2{
3  // Other code will be here
4
5  // Define UNUserNotificationCenter
6  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
7  center.delegate = self;
8
9  return YES;
10}

1// Required for the register event.
2- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
3{
4 [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
5}
6// Required for the notification event. You must call the completion handler after handling the remote notification.
7- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
8fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
9{
10  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
11}
12// Required for the registrationError event.
13- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
14{
15 [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
16}

By default TalkJS sends push notifications on Android via Firebase, and on iOS using Apple Push Notification service (APNs). However, we also support sending push notification on iOS via Firebase.

Begin by configuring Firebase on the TalkJS dashboard. See: Configure Firebase Cloud Messaging.

If you haven't already, make sure to add your project on the Firebase console. Also, don't forget to upload your APNs authentication key to your project's Firebase console.

You'll then need to configure the Firebase iOS SDK during the bootstrap phase of your application. To do this you'll need to import the Firebase SDK inside your AppDelegate.m right after #import "AppDelegate.h":

1#import <Firebase.h>

Then, in the didFinishLaunchingWithOptions method, add the following line at the top of the method:

1- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
2{
3  [FIRApp configure];
4
5  // Other code will be here
6}

You can then proceed to register the push notification handlers.