React Native push notifications

The React Native SDK makes it easy to integrate TalkJS into your app. This guide shows you how to set up and receive push notifications from TalkJS on React Native for both iOS and Android.

The guide assumes that you have set up the TalkJS React Native SDK as shown in the Getting Started guide.

Android

This section guides you through the steps for how to set up push notifications from TalkJS on Android.

Add Firebase Messaging SDK to your project

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}

Request push notification permissions (Android 13 and higher)

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.

iOS

TalkJS supports sending push notifications to iOS devices using Apple Push Notification service (APNs) or using Firebase.

Requesting Permissions

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}

Apple Push Notification service (APNs)

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

Augment AppDelegate

To set up push notifications from APNs, you need to place an additional code snippet in your iOS app's AppDelegate.h and AppDelegate.m files. The code ensures that the TalkJS SDK can properly register your device's token and process push notifications sent.

In AppDelegate.h

At the top of the file, add:

1#import <UserNotifications/UNUserNotificationCenter.h>

Then add the following line:

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

In AppDelegate.m

At the top of the file, add:

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

Then, in the didFinishLaunchingWithOptions method, add the highlighted lines below:

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}

Next, add the following lines below that method:

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}

You have now set up push notifications for iOS from APNs. Next, you can jump to registering push notification handlers.

Firebase

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.

Register push notification handlers

To register push notification handlers, make a call to registerPushNotificationHandlers inside your app's index.js/index.tsx file.

Avoid calling the registerPushNotificationHandlers function inside any component, because when your app is stopped—whether by the user swiping away from the recents screen, or due to low memory on the device—notifications received won't start the full app. This means that no component code runs and therefore no notifications are displayed.

Aside from setting up the notification handlers, the function also creates an Android notification channel. Without a notification channel, notifications won't appear on Android devices.

You can also pass an object describing whether you'd like to use Firebase for push notifications on iOS.

Below is an example index.js file:

1import { AppRegistry, Platform, PermissionsAndroid } from 'react-native';
2import { registerPushNotificationHandlers } from '@talkjs/react-native';
3import PushNotificationIOS from '@react-native-community/push-notification-ios';
4
5import App from './App';
6import { name as appName } from './app.json';
7
8if (Platform.OS === 'ios') {
9 PushNotificationIOS.requestPermissions({
10 lockScreen: true,
11 notificationCenter: true,
12 alert: true,
13 badge: true,
14 sound: true,
15 });
16} else if (Platform.OS === 'android') {
17 PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS);
18}
19
20registerPushNotificationHandlers(
21 {
22 channelId: 'com.example.reactnativetalkjs.messages',
23 channelName: 'My Messages',
24 },
25 { useFirebase: false }
26);
27
28AppRegistry.registerComponent(appName, () => App);

Enable push notifications

For your user to actually receive push notifications, use the enablePushNotifications prop in the Session component to enable or turn off push notifications for that particular device.

1<Session
2 appId='<APP_ID>'
3 me={{
4 id: '123456789',
5 name: 'Alice',
6 photoUrl: 'https://talkjs.com/images/avatar-1.jpg'
7 }}
8 enablePushNotifications={true}
9 signature='HMAC-SHA256_OF_USER_ID'
10/>

Users who have enablePushNotifications set to true have message notifications displayed whenever the app is in the background.

If you have any issues receiving push notifications, you can reach out via the support chat.