Expo Push Notifications

Install push notifications in Expo apps in 4 steps.

Setting up push notifications for your Expo app is easy. Push notifications are the ideal solution to re-engage users and bring them back to your app.

Estimated setup time: 15 minutes.

Prerequisites

You'll need:

• A working Expo setup using the development build the React Native New Architecture
  Tested on Expo SDK 54 and react-native 0.81.1
• This guide is for apps with Expo. If you are not using Expo but React Native directly, follow the 👉 React Native Push Notifications guide instead.
• Your app must not use Expo Go.
  It must use Expo development build. It either managed workflow or Continuous Native Generation (CNG). You can use Expo Application Services (EAS).
• For Android:
  • A device or emulator with Google Play services installed and up-to-date.
  • A Firebase account.
  • Android Studio.
• For iOS:
  • XCode
  • An iOS device such as an iPhone or an iPad
  • An iOS push credentials

📘

To upgrade to the latest version of our SDK, follow these instructions.

🚧

React Native without a framework users

If you are not using Expo and instead use React Native without a framework, use the 👉 React Native Push Notifications guide instead.

If you haven't already, sign up for a free account on wonderpush.com.

Step 1. Create your project

Click on New Project:

Choose a name for your project and select Android and iOS as platforms then click Create:

📘

Already have a project?

Just add the Android or iOS platforms to any existing project by going to Settings, selecting the first tab named after your project and clicking Edit. You'll be presented a form that lets you add a platform.

Step 2. Setup your push credentials

Android - Add your Firebase credentials

Follow the steps outlined in the Firebase / Filling the Firebase credentials in the WonderPush dashboard article.

Keep note of your Project number, also known as the Sender ID, as you will need in the below steps.

iOS - Upload your push credentials

Get your Apple key with the Apple Push Notifications service (APNs) service enabled. You can list your existing keys here. Simply check the Enabled Services and note the Key ID as well as the Team ID displayed below your name in the top-right corner.

If you don't have one, here's how to create one. In a few words, head to the Apple developer website, go to Accounts, then click on Keys in the Certificates, Identifiers & Profiles column, and click the + button on the top left to add a new key.

Check Apple Push Notifications service (APNs), then click Configure:

Then in the Environment drop-down, select both: Sandbox & Production, and click Save.

Once back on the previous screen, click Continue. In the next screen click Register.

⚠️

If you see a dialog telling you “You have already reached the maximum allowed number of team scoped Keys for this service in production and sandbox environment.”, this means that you should instead reuse an existing key. As Apple will not let you download the key again after its registration, you will need to use for the .p8 file that you downloaded at that time.

📘

How should Apple keys be managed for the Apple Push Notifications service (APNs)

Apple imposes a maximum of 2 keys simultaneously valid for the Apple Push Notifications service (APNs). Such keys are valid for all applications (Bundle ID or App ID) on your account (Team ID).

Limiting to 2 keys enables you to have one key used for all your push notification needs across all your WonderPush projects (you'll need to upload the same key for each of your projects) or even push providers, and perform a rolling replacement of your key with no downtime. You would create a second key, temporarily having 2 valid keys at a time, replace every WonderPush project or services that need to send push notifications, and finally revoke the previous key, leaving you again with a single existing key.

In the next screen click Register. In the next screen, note your Key ID, and your Team ID in the top right corner. Then click Download. Please do keep this.p8 file in a secure location (see the above callout about key management.)

You will then need to know your Bundle ID:

1. Open your app.json or app.config.js/app.config.ts file
2. Read the expo.ios.bundleIdentifier field

Now go to Settings / Platforms, click the iOS application section title and fill drop your .p8 file:

• Fill the Key ID, Team ID and Bundle ID if necessary. Check their values if they are pre-filled.
• Click Save.

Step 3. Add the SDK

Create your React Native application if you haven't already, see the official React Native guide and click React Native CLI Quickstart, for more details.

Add the WonderPush React Native SDK:

npx expo install react-native-wonderpush
npx expo install react-native-wonderpush-fcm
npx expo install wonderpush-expo-plugin

If you already used the previous WonderPush React Native SDK using the Legacy Architecture, make sure to upgrade the latest version of these packages.

📘

Huawei mobiles support

Because Huawei mobiles no longer ship with Google Play Services necessary for using Firebase Cloud Messaging, you will need to follow the Huawei mobiles support guide to support them.

iOS - Add push entitlement

The Expo plugin declares the Push entitlement, but the Push capability must be activated on the provisioning profile too.

Option 1: Using Expo Application Services (EAS)

If you are using EAS to build your app, this is automatically taken care for you.

You can jump to the next section.

Option 2: Using Xcode

• Take note whether or not the ios/ folder exists in your project.
  If you are using the fully managed workflow or Continuous Native Generation. the ios/ folder does not exist and you will be able to remove it afterwards.
• Run npx expo prebuild
• Open the xcworkspace file of your project in Xcode:

open ios/*.xcworkspace

• Select your app's main target and, under the Signing and Capabilities tab, click “+ Capability”

• Add the Push Notifications capability.
• Xcode has now taken care of adding the capability for your Bundle ID.
• You can now close Xcode and remove the ios/ folder if it was not previously existing.

Option 3: Using Apple Developer Center

• Open the Apple Developer Center and log in.
• Under Certificates, IDs & Profiles, click on Identifiers
• Find your Bundle in the list, or click on the round + button to add it, select App IDs, click Continue, select App, click Continue, fill a Description, select Explicit next to Bundle ID and write your Bundle ID in the text field
• Check the box next to Push notifications, click Save then Confirm, or if you were creating the identifier click Continue then Register.

Step 4. Add required code

Configuring the Expo plugin

Take note of your Client ID and Client Secret from the Platforms tab of the Settings page:

Open your app.json or app.config.js or app.config.ts file to edit the wonderpush-expo-plugin entry under the expo.plugins array. It should already exist but if it doesn't, simply add it.

{
  "expo": {
    // …
    "plugins": [
      [
        "wonderpush-expo-plugin",
        {
          "clientId": "YOUR_CLIENT_ID",
          "clientSecret": "YOUR_CLIENT_SECRET",
          "senderId": "YOUR_SENDER_ID"
        }
      ],
      // …
    ]
  }
}

Replace YOUR_CLIENT_ID and YOUR_CLIENT_SECRET with the appropriate values you find in the Settings page. Replace YOUR_SENDER_ID with the Firebase Sender ID from step 2.

There are more options, for instance to customize the notification icon and color. Take a look at the Expo plugin options reference.

Prompting users

Let's add the code that will prompt users to subscribe to push notifications. We recommend you place this code in a more suitable place in the user journey, but we'll do it at launch time for now.

import WonderPush from 'react-native-wonderpush';

export default function RootLayout() {
  useEffect(() => {
    // Prompts users to subscribe to push notifications.
    // Move this in a more suitable place in the user journey.
    WonderPush.subscribeToNotifications();
  }, []);

  return (
    // ...
  );
}

Receive your first push!

Use XCode or Android Studio to build and run your application and get the permission prompt you've configured:

Wait a couple of minutes and receive the default welcome notification:

👍

Congratulations, you're done!