Enable push notifications (Expo)

If you're building with the regular React Native SDK (without Expo), check out the guide Enable push notifications.

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

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

Android

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

Configure Firebase

If you haven't already, make sure to add your project on the Firebase console and download the resultant google-services.json to your project's root folder. You will need to provide the path to the google-services.json file in your project's app.json as shown:

JSON
1{
2    "expo": {
3        "android": {
4            "googleServicesFile": "./google-services.json",
5            "package": "my_package_name"
6        }
7    }
8}

Replace my_package_name above with your application ID.

Install dependencies

Since version 0.11.0 of our Expo SDK, you have the choice of either installing @react-native-firebase libraries or expo-notifications to handle processing of push notifications on Android. Previous versions only support using @react-native-firebase. If you'd like to use the Firebase libraries, then make sure to install:

1npx expo install @react-native-firebase/app @react-native-firebase/messaging

Then add both to the plugins array of your app.json file, as shown:

JSON
1{
2    "expo": {
3        "plugins": [
4            "@react-native-firebase/app"
5            "@react-native-firebase/messaging"
6        ]
7    }
8}

If you instead choose to use expo-notifications then make sure to install expo-notifications and expo-task-manager as shown:

1npx expo install expo-notifications expo-task-manager

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.

To request a new runtime permission, first declare the permission in your project's app.json, as shown:

JSON
1{
2    "expo": {
3        "android": {
4            "permissions": ["android.permission.POST_NOTIFICATIONS"]
5        }
6    }
7}

Then request the permission at runtime using PermissionsAndroid from the react-native package, as follows:

JavaScript
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

Since v0.11.0, the TalkJS Expo SDK supports sending push notifications to iOS devices using Apple Push Notification service (APNs) or Firebase. Previous versions only support using Firebase.

Apple Push Notification service (APNs)

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

Install dependencies

Push notifications via APNs only require the expo-notifications library to be installed. You can skip this step if you had installed it while setting up push notification for Android above. Otherwise, install it as shown:

1npx expo install expo-notifications

Request permissions

Apple requires that an iOS app requests the necessary notification permissions before being able to display push notifications. You can request these permissions at any point in your app's flow by using the expo-notifications, as shown:

JavaScript
1import { Platform } from 'react-native';
2import * as Notifications from 'expo-notifications';
3

4// Other code...
5

6if (Platform.OS === 'ios') {
7  Notifications.requestPermissionsAsync({
8    ios: {
9      allowsAlert: true,
10      allowsBadge: true,
11      allowsSound: true,
12    }
13  });
14}

You can then proceed to register the push notification handlers.

Firebase

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.

After adding your project to the Firebase console, download the resultant GoogleService-Info.plist to your project's root folder. Provide the path to the GoogleService-Info.plist file in your project's app.json, as shown:

JSON
1{
2    "expo": {
3        "ios": {
4            "googleServicesFile": "./GoogleService-Info.plist",
5            "bundleIdentifier": "my_package_name"
6        }
7    }
8}

Replace my_package_name above with your app's Bundle ID.

Install dependencies

If you haven't already, install the @react-native-firebase libraries as shown:

1npx expo install @react-native-firebase/app @react-native-firebase/messaging

Then add them to the plugins array of your app.json file as shown:

JSON
1{
2    "expo": {
3        "plugins": [
4            "@react-native-firebase/app"
5            "@react-native-firebase/messaging"
6        ]
7    }
8}

The Firebase iOS SDKs require use_frameworks as part of the build process. To help with this, install expo-build-properties as shown:

Bash
1npx expo install expo-build-properties

Then add "useFrameworks": "static" to your app.json as shown:

JSON
1{
2    "expo": {
3        "plugins": [
4            // Other plugins
5            [
6                "expo-build-properties",
7                {
8                    "ios": {
9                        "useFrameworks": "static"
10                    }
11                }
12            ]
13        ]
14    }
15}

Request permissions

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 the @react-native-firebase/messaging library, as shown:

JavaScript
1import { Platform } from 'react-native';
2import Messaging from '@react-native-firebase/messaging';
3

4// Other code...
5

6if (Platform.OS === 'ios') {
7    Messaging().requestPermission();
8}

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 App.js/App.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 registerPushNotificationHandlers function also creates an Android notification channel. Without a notification channel, notifications won't appear on Android devices.

For iOS, if you are using Firebase, make sure to pass: { useFirebase: true} as the second parameter to registerPushNotificationHandlers. If you are using APNs, you may omit this parameter or pass { useFirebase: false } instead.

The following is an example App.js file (the example uses @react-native-firebase libraries for both Android and iOS):

JavaScript
1import { StatusBar } from 'expo-status-bar';
2import { StyleSheet, Text, View, PermissionsAndroid, Platform } from 'react-native';
3import { registerPushNotificationHandlers } from '@talkjs/expo';
4import Messaging from '@react-native-firebase/messaging';
5

6if (Platform.OS === 'android') {
7  PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS);
8} else if (Platform.OS === 'ios') {
9    Messaging().requestPermission();
10}
11

12registerPushNotificationHandlers(
13  {
14    channelId: 'com.anonymous.TalkjsLocalExpo',
15    channelName: 'Messages',
16    badge: true,
17  },
18  {
19    useFirebase: true
20  }
21);
22

23export default function App() {
24  return (
25    <View style={styles.container}>
26      <Text>Open up App.js to start working on your app!</Text>
27      <StatusBar style="auto" />
28    </View>
29  );
30}
31

32const styles = StyleSheet.create({
33  container: {
34    flex: 1,
35    backgroundColor: '#fff',
36    alignItems: 'center',
37    justifyContent: 'center',
38  },
39});

Also here's an example app.json file showing configuration of Firebase for both Android and iOS:

JSON
1{
2  "expo": {
3    "name": "TalkjsLocalExpo",
4    "slug": "TalkjsLocalExpo",
5    "version": "1.0.0",
6    "orientation": "portrait",
7    "icon": "./assets/icon.png",
8    "userInterfaceStyle": "light",
9    "splash": {
10      "image": "./assets/splash.png",
11      "resizeMode": "contain",
12      "backgroundColor": "#ffffff"
13    },
14    "assetBundlePatterns": [
15      "**/*"
16    ],
17    "ios": {
18      "supportsTablet": true,
19      "googleServicesFile": "./GoogleService-Info.plist",
20      "bundleIdentifier": "com.anonymous.TalkjsLocalExpo"
21    },
22    "android": {
23      "adaptiveIcon": {
24        "foregroundImage": "./assets/adaptive-icon.png",
25        "backgroundColor": "#ffffff"
26      },
27      "permissions": ["android.permission.POST_NOTIFICATIONS"],
28      "googleServicesFile": "./google-services.json",
29      "package": "com.anonymous.TalkjsLocalExpo"
30    },
31    "web": {
32      "favicon": "./assets/favicon.png"
33    },
34    "plugins": [
35      [
36        "expo-build-properties",
37        {
38          "android": {
39            "extraMavenRepos": [
40              "../../node_modules/@notifee/react-native/android/libs"
41            ]
42          },
43          "ios": {
44            "useFrameworks": "static"
45          }
46        }
47      ],
48      "@react-native-firebase/app",
49      "@react-native-firebase/messaging"
50    ]
51  }
52}