---
url: https://talkjs.com/docs/Guides/React_Native/Push_Notifications_Expo
---

# Enable push notifications (Expo)

Set up push notifications for iOS and Android in Expo.

Ask a question Copy for LLM [View as Markdown](/docs/Guides/React_Native/Push_Notifications_Expo.md)

If you're building with the regular React Native SDK (without Expo), check out
the guide [Enable push notifications](/docs/Guides/React_Native/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](#ios) and [Android](#android).

The guide assumes that you have set up the TalkJS Expo SDK as shown in the [Getting Started guide](/docs/UI_Components/React_Native/).

## Android

Begin by configuring Firebase on the TalkJS dashboard. See: [Configure Firebase Cloud Messaging](/docs/Guides/Mobile/Configure_FCM/).

### Configure Firebase

If you haven't already, make sure to [add your project on the Firebase console](https://firebase.google.com/docs/android/setup#register-app) 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

```json
{
    "expo": {
        "android": {
            "googleServicesFile": "./google-services.json",
            "package": "my_package_name"
        }
    }
}
```

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:

```bash
npx 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

```json
{
    "expo": {
        "plugins": [
            "@react-native-firebase/app",
            "@react-native-firebase/messaging"
        ]
    }
}
```

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

```bash
npx 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`](https://developer.android.com/develop/ui/views/notifications/notification-permission) 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

```json
{
    "expo": {
        "android": {
            "permissions": ["android.permission.POST_NOTIFICATIONS"]
        }
    }
}
```

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

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

Since v0.11.0, the TalkJS Expo SDK supports sending push notifications to iOS devices using [Apple Push Notification service (APNs)](#apple-push-notification-service-apns) or [Firebase](#firebase). Previous versions only support using [Firebase](#firebase).

### Apple Push Notification service (APNs)

Begin by configuring Apple Push Notification service (APNs) on the TalkJS dashboard. See: [Configure Apple Push Notifications](/docs/Guides/Mobile/Configure_APNs/).

#### 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:

```bash
npx 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`](https://docs.expo.dev/versions/latest/sdk/notifications/#requestpermissionsasyncpermissions), as shown:

JavaScript

```javascript
import { Platform } from 'react-native';
import * as Notifications from 'expo-notifications';

// Other code...

if (Platform.OS === 'ios') {
  Notifications.requestPermissionsAsync({
    ios: {
      allowsAlert: true,
      allowsBadge: true,
      allowsSound: true,
    }
  });
}
```

You can then proceed to [register the push notification handlers](#register-push-notification-handlers).

### Firebase

If you haven't already, make sure to [add your project on the Firebase console](https://firebase.google.com/docs/ios/setup#register-app).
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.

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

```json
{
    "expo": {
        "ios": {
            "googleServicesFile": "./GoogleService-Info.plist",
            "bundleIdentifier": "my_package_name"
        }
    }
}
```

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:

```bash
npx 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

```json
{
    "expo": {
        "plugins": [
            "@react-native-firebase/app",
            "@react-native-firebase/messaging"
        ]
    }
}
```

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

Bash

```bash
npx expo install expo-build-properties
```

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

JSON

```json
{
    "expo": {
        "plugins": [
            // Other plugins
            [
                "expo-build-properties",
                {
                    "ios": {
                        "useFrameworks": "static"
                    }
                }
            ]
        ]
    }
}
```

#### 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`](https://rnfirebase.io/messaging/ios-permissions) library, as shown:

JavaScript

```javascript
import { Platform } from 'react-native';
import Messaging from '@react-native-firebase/messaging';

// Other code...

if (Platform.OS === 'ios') {
    Messaging().requestPermission();
}
```

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 `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](https://developer.android.com/guide/topics/ui/notifiers/notifications#ManageChannels). 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

```javascript
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, PermissionsAndroid, Platform } from 'react-native';
import { registerPushNotificationHandlers } from '@talkjs/expo';
import Messaging from '@react-native-firebase/messaging';

if (Platform.OS === 'android') {
  PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS);
} else if (Platform.OS === 'ios') {
    Messaging().requestPermission();
}

registerPushNotificationHandlers(
  {
    channelId: 'com.anonymous.TalkjsLocalExpo',
    channelName: 'Messages',
    badge: true,
  },
  {
    useFirebase: true
  }
);

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```

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

JSON

```json
{
  "expo": {
    "name": "TalkjsLocalExpo",
    "slug": "TalkjsLocalExpo",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "googleServicesFile": "./GoogleService-Info.plist",
      "bundleIdentifier": "com.anonymous.TalkjsLocalExpo"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "permissions": ["android.permission.POST_NOTIFICATIONS"],
      "googleServicesFile": "./google-services.json",
      "package": "com.anonymous.TalkjsLocalExpo"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "extraMavenRepos": [
              "../../node_modules/@notifee/react-native/android/libs"
            ]
          },
          "ios": {
            "useFrameworks": "static"
          }
        }
      ],
      "@react-native-firebase/app",
      "@react-native-firebase/messaging"
    ]
  }
}
```