React Native Push Notifications

The core library for Notifee is packaged an Android "AAR" file which is distributed in a "local maven repository".

You must add this repository to your android/build.gradle build script file by adding these lines in your allprojects repositories section:

GROOVY
Copy
allprojects {
  // ... you may have other items before the "repositories" section.
  repositories {
    // ... you will already have some local repositories defined ...

    // ADD THIS BLOCK
    maven {
      url "$rootDir/../node_modules/@notifee/react-native/android/libs"
    }
  }
}

If you haven't already, add Firebase to your project. Don't forget to add your FCM Server key in the TalkJS Dashboard.

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

GROOVY
Copy
apply plugin: 'com.android.application'
// Add the following line:
apply plugin: 'com.google.gms.google-services'  // Google Services plugin

android {
  // ...
}

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

GROOVY
Copy
buildscript {

    repositories {
      // Make sure that you have the following two repositories
      google()  // Google's Maven repository
      mavenCentral()  // Maven Central repository
    }

    dependencies {
      ...

      // Add the dependency for the Google services Gradle plugin
      classpath 'com.google.gms:google-services:4.3.14'
    }
}

allprojects {
  ...

  repositories {
    // Make sure that you have the following two repositories
    google()  // Google's Maven repository
    mavenCentral()  // Maven Central repository
  }
}

Next, you can follow the Apple setup below or jump to registering push notification handlers.

To ensure your app properly handles push notifications, you need to enable two capabilities in your Xcode project:

• Background Mode capability - tick Remote Notifications
• Push Notifications capability

Follow this guide for how to add capabilities to your app on Xcode.

You will use this file later when obtaining a push notification certificate from Apple. Open the Keychain Access app on your macOS system. Next, select Keychain Access > Certificate Assistant > Request a Certificate From a Certificate Authority.... Enter your information in the required fields in the popup and select the Save to disk option. Save the file.

In your Apple Developer Account, select Certificates, IDs & Profiles in the sidebar. Then go to, Identifiers. Locate and click the identifier that matches your app's BundleID on Xcode to edit it. If you don't have one, you can press the + (plus) button to create a new identifier. Under Capabilities make sure that Push Notifications is enabled.

Next, go to Certificates and create a new certificate by clicking the + (plus) button. Under Services, select Apple Push Notification service SSL (Sandbox & Production) and click Continue. The certificate will be applicable to both Sandbox and Production environments. Next, in the dropdown presented, choose the AppId (Your Team ID and Your app's Bundle ID separated by a fullstop) that has a BundleID that matches your App's. You will then be asked to upload a Certificate Signing Request. Use the file we created earlier using Keychain Access. Finally, click Download to save the certificate to your computer.

Double Click the Certificate you have just downloaded to add it to Keychain Access. In Keychain Access, select login under keychain and My Certificates from the side menu. Locate the Push Notifaction certificate and then right click it to export it.

In the window that appears, make sure the File Format is set to "Personal Information Exchange (.p12)". Click on "Save" to save it to your machine. When asked for a password, leave it blank and click on "Ok." Our TalkJS backend requires the Push Notification certificate to be a valid .p12 file without a password.

Now go to your TalkJS Dashboard and upload the .p12 file you have just exported. Once the upload is done, click on "Save Push Notification Settings".

You now need to add some code in your iOS app's AppDelegate.h and AppDelegate.m files. The code you will add will ensure the TalkJS SDK can properly register your device's token and process push notifications sent.

Objective-C
Copy
#import <UserNotifications/UNUserNotificationCenter.h>

Objective-C
Copy
@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>

Objective-C
Copy
#import <UserNotifications/UserNotifications.h>
#import <RNCPushNotificationIOS.h>

Objective-C
Copy
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // Other code will be here


  // Define UNUserNotificationCenter
  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
  center.delegate = self;

  return YES;
}

Objective-C
Copy
// Required for the register event.
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
 [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}
// Required for the notification event. You must call the completion handler after handling the remote notification.
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}
// Required for the registrationError event.
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
 [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
}