--- url: https://talkjs.com/docs/Guides/React_Native/Push_Notifications --- # Enable push notifications Ask a question Copy for LLM [View as Markdown](/docs/Guides/React_Native/Push_Notifications.md) If you're building with the React Native Expo SDK, check out the guide [Enable push notifications (Expo)](/docs/Guides/React_Native/Push_Notifications_Expo/). 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](#ios) and [Android](#android). The guide assumes that you have set up the TalkJS React Native SDK as shown in the [Getting Started guide](/docs/UI_Components/React_Native/). ## 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](https://firebase.google.com/docs/android/setup). Make sure to add your Firebase service account private key on the **Settings** page of your [TalkJS Dashboard](/dashboard/). For a detailed guide on how to configure Firebase, see: [Configure Firebase Cloud Messaging](/docs/Guides/Mobile/Configure_FCM/). 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. GROOVY ```groovy apply plugin: 'com.android.application' // Add the following line: apply plugin: 'com.google.gms.google-services' // Google Services plugin android { // ... } ``` 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. GROOVY ```groovy 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.4.1' } } allprojects { ... repositories { // Make sure that you have the following two repositories google() // Google's Maven repository mavenCentral() // Maven Central repository } } ``` ### 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`](https://developer.android.com/develop/ui/views/notifications/notification-permission) 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 `` tag: XML ```xml ``` Next, request the permission at runtime using `PermissionsAndroid` from the `react-native` package, as shown: JavaScript ```javascript import { Platform, PermissionsAndroid } from 'react-native'; // Other code... if (Platform.OS === 'android') { PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS); } ``` 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)](#apple-push-notification-service-apns) or using [Firebase](#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`](https://github.com/react-native-push-notification/ios) as shown below: JavaScript ```javascript import { Platform } from 'react-native'; import PushNotificationIOS from '@react-native-community/push-notification-ios'; // Other code... if (Platform.OS === 'ios') { PushNotificationIOS.requestPermissions({ lockScreen: true, notificationCenter: true, alert: true, badge: true, sound: true, }); } ``` ### Apple Push Notification service (APNs) Begin by configuring Apple Push Notifications (APNs) on the TalkJS dashboard. See: [Configure Apple Push Notifications](/docs/Guides/Mobile/Configure_APNs/). #### 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: Objective-C ```objectivec #import ``` Then add the following line: Objective-C ```objectivec @interface AppDelegate : UIResponder ``` #### In AppDelegate.m At the top of the file, add: Objective-C ```objectivec #import #import ``` Then, in the `didFinishLaunchingWithOptions` method, add the highlighted lines below: Objective-C ```objectivec - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Other code will be here // Define UNUserNotificationCenter UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter]; center.delegate = self; return YES; } ``` Next, add the following lines below that method: Objective-C ```objectivec // 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]; } ``` You have now set up push notifications for iOS from APNs. Next, you can jump to [registering push notification handlers](#register-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](/docs/Guides/Mobile/Configure_FCM/). If you haven't already, make sure to [add your project on the Firebase console](https://rnfirebase.io/#generating-ios-credentials). Also, don't forget to [upload your APNs authentication key](https://firebase.google.com/docs/cloud-messaging/ios/client#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"`: Objective-C ```objectivec #import ``` Then, in the `didFinishLaunchingWithOptions` method, add the following line at the top of the method: Objective-C ```objectivec - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [FIRApp configure]; // Other code will be here } ``` You can then proceed to [register the push notification handlers](#register-push-notification-handlers). ## Register push notification handlers To register push notification handlers, make a call to [`registerPushNotificationHandlers`](/docs/UI_Components/React_Native/API/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](https://developer.android.com/guide/topics/ui/notifiers/notifications#ManageChannels). 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: JavaScript ```javascript import { AppRegistry, Platform, PermissionsAndroid } from 'react-native'; import { registerPushNotificationHandlers } from '@talkjs/react-native'; import PushNotificationIOS from '@react-native-community/push-notification-ios'; import App from './App'; import { name as appName } from './app.json'; if (Platform.OS === 'ios') { PushNotificationIOS.requestPermissions({ lockScreen: true, notificationCenter: true, alert: true, badge: true, sound: true, }); } else if (Platform.OS === 'android') { PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS); } registerPushNotificationHandlers( { channelId: 'com.example.reactnativetalkjs.messages', channelName: 'My Messages', }, { useFirebase: false } ); AppRegistry.registerComponent(appName, () => App); ``` ## Enable push notifications For your user to actually receive push notifications, use the [`enablePushNotifications`](/docs/UI_Components/React_Native/Components/Session/#enablePushNotifications) prop in the [`Session`](/docs/UI_Components/React_Native/Components/Session/) component to enable or turn off push notifications for that particular device. JSX ```jsx ``` 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.