How To Integrate Firebase Cloud Messaging with Expo

Building applications using React Native gives developers a lot of flexibility. Expo’s open-source platform is perfect for building cross-platform experiences, but you might need a little help getting users to interact with your app. That’s where push notifications come into play. 

With Google’s Firebase Cloud Messaging (FCM) and Expo, developers can seamlessly add push notification features into their apps and reach users wherever they are—iOS, Android, or the web. Check out this guide to learn why the Expo FCM integration is so helpful and how to set it up in your own app. 

In this article:

• What Is the Expo Firebase Cloud Messaging Integration?
• How To Integrate Firebase Cloud Messaging with Expo
• Your Users Are Waiting—Keep Them Notified
• Frequently Asked Questions

What Is the Expo Firebase Cloud Messaging Integration?

Expo is a popular framework for mobile applications. Write your JavaScript code once and deploy it across multiple platforms without managing finicky native code integrations. This tool is incredibly valuable because it speeds up development time, allowing you to focus on building features instead of the complexities of native setups. 

Expo simplifies many things, but integrating it with Firebase Cloud Messaging makes your job even easier. Firebase Cloud Messaging is a Google service that allows you to send push notifications and messages to Android, iOS, and web devices. It’s part of Google’s Firebase suite, which offers tools for app development, including analytics, hosting, and database management.

The Expo and FCM integration enables developers to send push notifications on Expo applications using Firebase Cloud Messaging. This setup allows you to send push notifications to both iOS and Android devices from a single codebase. Plus, Expo provides helpful documentation for FCM integrations, making the process relatively straightforward. 

How To Integrate Firebase Cloud Messaging With Expo

Integrating Firebase Cloud Messaging with Expo is a smart way for developers to streamline the development process while improving user experience—it’s a true win-win. Follow these steps to set up your Expo FCM integration properly. 

1. Set Up Expo and FCM

Make sure you have an Expo project set up, a Firebase account, and the latest node.js installed. 

Go to your Firebase Console to create a project. Go to Project Settings > Cloud Messaging. For Android, download your google-services.json file from Project Settings > General > Your Apps. For iOS, download the GoogleService-Info.plist file.

2. Add Expo to Your Project

You’ll use the expo-notifications module to handle push notifications. Run this command in Expo to install the library: 

expo install expo-notifications

From there, Expo will automatically link the module. 

3. Configure Firebase

Return to FCM and update your app.json or app.config.js file to include your FCM sender ID. It should look like this: 

{
  "expo": {
    "android": {
      "googleServicesFile": "./google-services.json"
    }
  }
}

If you’re sending notifications for iOS, be sure to handle permissions properly. You’ll need to add this script to app.json:

{
  "expo": {
    "ios": {
      "usesAppleSignIn": true,
      "googleServicesFile": "./GoogleService-Info.plist",
      "bundleIdentifier": "com.yourapp.bundle"
    }
  }
}

Next, add this code to your Firebase project to request and log push notification tokens: 

import * as Notifications from 'expo-notifications';
import * as Device from 'expo-device';
async function registerForPushNotifications() {
  if (Device.isDevice) {
    const { status: existingStatus } = await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      alert('Failed to get push token for push notification!');
      return;
    }
    const token = (await Notifications.getExpoPushTokenAsync()).data;
    console.log('Push Token:', token);
  } else {
    alert('Must use a physical device for push notifications');
  }
}
registerForPushNotifications();

4. Test the Integration

Now that the hard part is done, it’s time to double-check your work. Run your app on a test device to see if notifications are running correctly. You can also try the Expo push notification tool to send a test notification with your push token.

However, testing on an actual device is always better because testing environments vary so much. If you’re testing web push notifications, webpushtest.com is a valuable (and free!) tool that provides a demo of standards-based web push notifications across all platforms, including iOS. 

Your Users Are Waiting—Keep Them Notified

Expo is a helpful resource that seriously speeds up the development process. Instead of managing notifications manually, use the Expo and FCM integration to start sending messages in a matter of hours. The integration is cost-effective, user-friendly, and scalable, making it an excellent choice for apps of all sizes.

Still, this integration can’t handle everything. Take your app's notification system to the next level with MagicBell. Our intuitive, developer-friendly platform helps you deliver seamless, in-app notifications that keep users engaged and informed—no heavy lifting required. Create your free MagicBell account now to start sending notifications. 

Frequently Asked Questions

Do I need a Firebase paid plan to use FCM with Expo?

No. Firebase Cloud Messaging is free to use and works well with Expo. You’re allowed to send unlimited notifications to users without additional costs. However, you may want to upgrade to a paid FCM subscription if you need advanced features or send a lot of notifications. 

What’s the difference between Expo’s push notification service and direct FCM integration?

Expo's push notification service simplifies sending notifications and the complexities of working directly with FCM and APNs (Apple Push Notification Service). However, direct integration with FCM (in a custom workflow) gives you more control over advanced messaging features, such as sending data-only messages or segment targeting.

Can I schedule notifications with Expo and FCM?

Absolutely! You can schedule notifications using FCM’s backend tools or directly in Expo with the expo-notifications library. Firebase allows you to schedule notifications through the Firebase Console or programmatically via its SDK.